Перейти к содержимому


Правила форума

Внимание!!! Если не можете скачать, пожалуйста ознакомьтесь с условиями получения доступа с файлам форума. Правила форума


Закрепляем горизонтальное меню в теме ShopCMS (3.1.3)

горизонтальное меню

Сообщений в теме: 43

#21 badisoft

    Продвинутый пользователь

  • Assistent vsupport.ru
  • PipPipPip
  • 5 071 сообщений
Репутация: 783
Мастер

Отправлено 01 марта 2015 - 17:39

Цитата

Да, да, да! Именно так!!!
http://vsupport.ru/t...малых-разрешени
http://cpu.badisoft.ru (тестовый сайт), http://badisoft.ru (модули)

#22 FusSheva

    Продвинутый пользователь

  • Assistent vsupport.ru
  • PipPipPip
  • 210 сообщений
Репутация: 7
Начинающий

Отправлено 08 марта 2015 - 22:23

Хм... закрепить то меню сверху закрепили, но теперь в этой связи вылазит еще одна проблемка.
Если в верхнем меню есть относительно много пунктов, то при сжатии браузера либо с мобильного или планшета, нет возможности прокручивать это меню до конца.

В примере Bootstap http://bootstrap-3.r...vbar-fixed-top/ все ОК с этим. У меню есть возможность прокрутки его до конца.
А вот в нашем случае что делать то? :)
Каждый человек способен на многое. Но к сожалению, не каждый знает на что он способен.

#23 badisoft

    Продвинутый пользователь

  • Assistent vsupport.ru
  • PipPipPip
  • 5 071 сообщений
Репутация: 783
Мастер

Отправлено 09 марта 2015 - 00:47

Просмотр сообщенияFusSheva сказал:

А вот в нашем случае что делать то?
Смотреть код. Банально, да? :)
http://cpu.badisoft.ru (тестовый сайт), http://badisoft.ru (модули)

#24 FusSheva

    Продвинутый пользователь

  • Assistent vsupport.ru
  • PipPipPip
  • 210 сообщений
Репутация: 7
Начинающий

Отправлено 09 марта 2015 - 02:14

Устал сегодня женщин поздравлять... лень матушка. :) Думал может кто уже нашел и просто ответит как подправить.
Каждый человек способен на многое. Но к сожалению, не каждый знает на что он способен.

#25 FusSheva

    Продвинутый пользователь

  • Assistent vsupport.ru
  • PipPipPip
  • 210 сообщений
Репутация: 7
Начинающий

Отправлено 09 марта 2015 - 23:52

Сам задал вопрос сам и решил вопрос. Может кому еще пригодится.

Цитата

Если в верхнем меню есть относительно много пунктов, то при сжатии браузера либо с мобильного или планшета, нет возможности прокручивать это меню до конца.

А ларчик просто открывался. :)

В файле index.tpl.html

Ищем:
	<div id="top" class="navbar navbar-inverse navbar-static-top" role="navigation" style="margin-bottom: 0">

Меняем на:
	<div id="top" class="navbar navbar-inverse navbar-fixed-top" role="navigation">

p.s. Тогда и все изменения описанные выше делать и не нужно было. ;)

Одно что сделал, это вынес все настройки css магазина в отдельный файл (типа my_style.css).
Все что следует в файле bootstrap.css после этих строчек и ниже до конца:

/*!
* ShopCMS v3.1.2 (http://shopcms.ru)
* Copyright 2007-2014 ShopCMS
*/

Ну и подключил его в head.tpl.html после подключения bootstrap.css

Делал так:
Ищем в head.tpl.html
<link href="data/{$smarty.const.TPL}/css/bootstrap.css" rel="stylesheet">

После добавляем:
<link href="data/{$smarty.const.TPL}/css/my_style.css" rel="stylesheet">

Каждый человек способен на многое. Но к сожалению, не каждый знает на что он способен.

#26 badisoft

    Продвинутый пользователь

  • Assistent vsupport.ru
  • PipPipPip
  • 5 071 сообщений
Репутация: 783
Мастер

Отправлено 10 марта 2015 - 13:29

Просмотр сообщенияFusSheva сказал:

p.s. Тогда и все изменения описанные выше делать и не нужно было
Не все "не нужно" :).
Довесок
#wrap{margin-top:50px}
Все равно нужен, иначе картинка будет подлезать под меню, а не располагаться ниже, т.к. при fixed высота меню не учитывается в расчетах положения остальных элементов. А вот id="top" теперь точно не нужен :).
http://cpu.badisoft.ru (тестовый сайт), http://badisoft.ru (модули)

#27 FusSheva

    Продвинутый пользователь

  • Assistent vsupport.ru
  • PipPipPip
  • 210 сообщений
Репутация: 7
Начинающий

Отправлено 10 марта 2015 - 20:31

Да, да согласен. Сразу не обратил внимание.
Незабываем чистить кеш. :)
Каждый человек способен на многое. Но к сожалению, не каждый знает на что он способен.

#28 FusSheva

    Продвинутый пользователь

  • Assistent vsupport.ru
  • PipPipPip
  • 210 сообщений
Репутация: 7
Начинающий

Отправлено 13 марта 2015 - 00:08

Небольшое добавление.
Если мы хотим чтобы в верхнем меню та же Авторизация открывалась не по клику мышки а по наведению курсора (hover эффект) то...

В файл стиля шаблона вниз добавляем:
ul.nav li.dropdown:hover ul.dropdown-menu {
display: block;
margin: 0;
}
a.menu:after, .dropdown-toggle:after {
content: none;
}

Каждый человек способен на многое. Но к сожалению, не каждый знает на что он способен.

#29 badisoft

    Продвинутый пользователь

  • Assistent vsupport.ru
  • PipPipPip
  • 5 071 сообщений
Репутация: 783
Мастер

Отправлено 13 марта 2015 - 01:45

Просмотр сообщенияFusSheva сказал:

Если мы хотим чтобы в верхнем меню та же Авторизация открывалась не по клику мышки а по наведению курсора (hover эффект) то...
...то пробуем получить "hover эффект" на планшете.
http://cpu.badisoft.ru (тестовый сайт), http://badisoft.ru (модули)

#30 FusSheva

    Продвинутый пользователь

  • Assistent vsupport.ru
  • PipPipPip
  • 210 сообщений
Репутация: 7
Начинающий

Отправлено 13 марта 2015 - 08:37

Просмотр сообщенияbadisoft (13 марта 2015 - 01:45) писал:

...то пробуем получить "hover эффект" на планшете.
В этом случае он срабатывает как обычное нажатие кнопки. :)
Но сайт смотрят как на мобильных устройствах, так и на стационарных машинах...

И в моем посте выше ключевым словом является выражение если мы хотим. :)
Никто же не заставляет этого делать принудительно, просто описано как добиться такого эффекта.
Каждый человек способен на многое. Но к сожалению, не каждый знает на что он способен.

#31 badisoft

    Продвинутый пользователь

  • Assistent vsupport.ru
  • PipPipPip
  • 5 071 сообщений
Репутация: 783
Мастер

Отправлено 14 марта 2015 - 06:20

Просмотр сообщенияFusSheva сказал:

В этом случае он срабатывает как обычное нажатие кнопки. :)
Правда? Сами пробовали или прочитали? :)
на компе в полном экране, естественно, это работает.
Но если нет планшета, то достаточно сжать по ширине браузер, чтобы увидеть получаемую хрень.
Аналогично, кстати, и с заменой stаtic на fixed вместо решения с id="top".
В некоторых браузерах (у меня - в обоих установленных) на планшете не появляется справа скроллер и даже при штатном наборе пунктов меню недоступны развернутые пункты меню авторизации, а пункт смены валюты не виден вообще.
http://cpu.badisoft.ru (тестовый сайт), http://badisoft.ru (модули)

#32 FusSheva

    Продвинутый пользователь

  • Assistent vsupport.ru
  • PipPipPip
  • 210 сообщений
Репутация: 7
Начинающий

Отправлено 14 марта 2015 - 12:55

Просмотр сообщенияbadisoft (14 марта 2015 - 06:20) писал:

Правда? Сами пробовали или прочитали? :)
на компе в полном экране, естественно, это работает.
Но если нет планшета, то достаточно сжать по ширине браузер, чтобы увидеть получаемую хрень.
Пробовал сам, планшет Lenovo. Все достаточно корректно работает.

Цитата

а пункт смены валюты не виден вообще.
И это работает в том числе.

Может дело в установленных браузерах на планшете?

Еще... Вот сжатое до таких размеров (натуральный размер) окно браузера (обычный ноут)

Прикрепленный файл  IMG_14.03.2015-12.43.38.jpg   15,76К   0 Количество загрузок:

После входа (можно прокручивать до конца) срабатывает при обычном наведении мышки и скролинге колесиком.

Прикрепленный файл  IMG_14.03.2015-12.52.57.jpg   19,64К   0 Количество загрузок:
Каждый человек способен на многое. Но к сожалению, не каждый знает на что он способен.

#33 FusSheva

    Продвинутый пользователь

  • Assistent vsupport.ru
  • PipPipPip
  • 210 сообщений
Репутация: 7
Начинающий

Отправлено 14 марта 2015 - 14:17

p.s. Попробовал только что у друга с планшета FreeLander зайти - все нормально отображается. Даже с включенным "hover эффектом".
Пробовал с телефона... есть некоторые проблемы, но они больше связаны с моими толстыми пальцами. :) Если же пользоваться стилусом то тоже менюшка раскрывается нормально и до конца.

В общем, проблем пока не вижу.
Каждый человек способен на многое. Но к сожалению, не каждый знает на что он способен.

#34 badisoft

    Продвинутый пользователь

  • Assistent vsupport.ru
  • PipPipPip
  • 5 071 сообщений
Репутация: 783
Мастер

Отправлено 14 марта 2015 - 18:42

Цитата

Может дело в установленных браузерах на планшете?\
Очевидно, что дело в установленных на планшете браузерах :)
Один штатный, встроенный, второй сторонний. Dolfin или Delfin, как-то так.

Просмотр сообщенияFusSheva сказал:

В общем, проблем пока не вижу.
Тут каждый решает сам для себя, что важнее. Прозрачность решения, а с fixed вместо static оно, несомненно, прозрачнее и соответствует общей идее bootstrap. Или нормальное отображение в максимальном количестве браузеров.
Я у себя вернул назад первоначальное решение, с id="top".
http://cpu.badisoft.ru (тестовый сайт), http://badisoft.ru (модули)

#35 FusSheva

    Продвинутый пользователь

  • Assistent vsupport.ru
  • PipPipPip
  • 210 сообщений
Репутация: 7
Начинающий

Отправлено 14 марта 2015 - 22:20

Просмотр сообщенияbadisoft (14 марта 2015 - 18:42) писал:

Тут каждый решает сам для себя, что важнее. Прозрачность решения, а с fixed вместо static оно, несомненно, прозрачнее и соответствует общей идее bootstrap. Или нормальное отображение в максимальном количестве браузеров.
Полностью с вами согласен. Тут действительно каждый решает для себя сам.
Но, нужно учитывать еще специализацию своего магазина. Провести исследование, узнать сколько заходят (или пытаются/пытались зайти) в магазин с мобильных устройств. Сколько было продаж клиентам заходившим с моб.устойств и т.д. Может быть для некоторых не стоит и голову ломать. :)

Но все же, чем лучше будет выглядеть сайт с различных устройств тем лучше! Это я думаю понимают все, даже Google.
Кстати, не так давно прислал сообщение, что типа ваш сайт не адаптирован под мобильные устройства.
Вот такие пироги. :)
Каждый человек способен на многое. Но к сожалению, не каждый знает на что он способен.

#36 badisoft

    Продвинутый пользователь

  • Assistent vsupport.ru
  • PipPipPip
  • 5 071 сообщений
Репутация: 783
Мастер

Отправлено 14 марта 2015 - 23:28

Цитата

Это я думаю понимают все, даже Google.
Кстати, не так давно прислал сообщение, что типа ваш сайт не адаптирован под мобильные устройства.
Это, похоже, вторая порция рассылки. Я тоже получил, но как-то выборочно. По паре сайтов получил, а по тестовому сайту - нет. Хотя у меня все сайты на дефолтовом шаблоне. Так-то Гугл чуть не полгода назад уже предупреждал, что с апреля (?) будет учитывать в позиционировании доступность сайта для мобильных устройств. А дефолтовый шаблон от 3.1.2 напрочь Гуглу не гравится. Пришлось озадачиваться переходом на шаблон от 3.1.3 :).

Вот тут можно посмотреть инфо и рекомендации по своему сайту, если он подключен к Гуглу: https://www.google.c...http://site.ru/ заменив site.ru на свой сайт.
http://cpu.badisoft.ru (тестовый сайт), http://badisoft.ru (модули)

#37 stasikons

    Продвинутый пользователь

  • Assistent vsupport.ru
  • PipPipPip
  • 68 сообщений
Репутация: 4
Начинающий

Отправлено 18 марта 2015 - 15:12

Я фиксацию верхнего меню сделал по другому:
1. Заключил верхнее меню в <div>
2. В CSS для div добавил width:100%;top:0px; position: fixed;z-index: 1000;
3. В head добавил скрипт
<script>
	    var h_hght =0; // высота шапки
	    var h_mrg = 0; // отступ когда шапка уже не видна
			   
	    $(function(){
		    $(window).scroll(function(){
			    var top = $(this).scrollTop();
			    var elem = $('#top_nav');
			   
			    if (top+h_mrg < h_hght) {
				    elem.css('top', (h_hght-top));
			    } else {
				    elem.css('top', h_mrg);
			    }
		    });
	   
	    });
    </script>
И всё отлично работает.

#38 badisoft

    Продвинутый пользователь

  • Assistent vsupport.ru
  • PipPipPip
  • 5 071 сообщений
Репутация: 783
Мастер

Отправлено 18 марта 2015 - 17:28

Просмотр сообщенияstasikons сказал:

И всё отлично работает.
Осталось понять, зачем при таком подходе шаблон на bootstrap, если штатные бутстраповые фишки (из-за которых и нужен этот шаблон) реализуются своим собственным кодом. Чем-то сильно напоминает изобретение велосипеда в стиле "не хочу читать, как устроен велосипед, поэтому придумаю его сам, пусть даже на квадратных колесах" :).

PS. понятно, что это работает. Хотя я не уверен, что будет нормально работать на всех разрешениях. И не очень понимаю, зачем яваскрипт, ведь если элемент нормально "прикнопить" к конкретному месту путем position:fixed, то он и так будет фиксированно находится в этом месте без какого-либо применения JS. Ну а проверять, естественно, лень.
http://cpu.badisoft.ru (тестовый сайт), http://badisoft.ru (модули)

#39 stasikons

    Продвинутый пользователь

  • Assistent vsupport.ru
  • PipPipPip
  • 68 сообщений
Репутация: 4
Начинающий

Отправлено 19 марта 2015 - 10:28

Дак уже всё проверено на всех разрешениях.

#40 FusSheva

    Продвинутый пользователь

  • Assistent vsupport.ru
  • PipPipPip
  • 210 сообщений
Репутация: 7
Начинающий

Отправлено 19 марта 2015 - 14:10

Просмотр сообщенияstasikons (18 марта 2015 - 15:12) писал:

Я фиксацию верхнего меню сделал по другому:
...
И всё отлично работает.
Я согласен с badisoft !
Bootstap нужно изучать и использовать по полной программе! Очень интересный framework с потрясающими возможностями для сайт/шаблон строения.
Каждый человек способен на многое. Но к сожалению, не каждый знает на что он способен.