http://vsupport.club/topic/3216-сворачиваем-блок-категорий-на-малых-разрешениДа, да, да! Именно так!!!
Закрепляем горизонтальное меню в теме ShopCMS (3.1.3)
#21
Отправлено 01 March 2015 - 05:39 PM
#22
Отправлено 08 March 2015 - 10:23 PM
Если в верхнем меню есть относительно много пунктов, то при сжатии браузера либо с мобильного или планшета, нет возможности прокручивать это меню до конца.
В примере Bootstap http://bootstrap-3.r...vbar-fixed-top/ все ОК с этим. У меню есть возможность прокрутки его до конца.
А вот в нашем случае что делать то?
#23
Отправлено 09 March 2015 - 12:47 AM
Смотреть код. Банально, да?А вот в нашем случае что делать то?
#24
Отправлено 09 March 2015 - 02:14 AM
#25
Отправлено 09 March 2015 - 11:52 PM
Если в верхнем меню есть относительно много пунктов, то при сжатии браузера либо с мобильного или планшета, нет возможности прокручивать это меню до конца.
А ларчик просто открывался.
В файле 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
Отправлено 10 March 2015 - 01:29 PM
Не все "не нужно" .p.s. Тогда и все изменения описанные выше делать и не нужно было
Довесок
#wrap{margin-top:50px}Все равно нужен, иначе картинка будет подлезать под меню, а не располагаться ниже, т.к. при fixed высота меню не учитывается в расчетах положения остальных элементов. А вот id="top" теперь точно не нужен .
#27
Отправлено 10 March 2015 - 08:31 PM
Незабываем чистить кеш.
#28
Отправлено 13 March 2015 - 12:08 AM
Если мы хотим чтобы в верхнем меню та же Авторизация открывалась не по клику мышки а по наведению курсора (hover эффект) то...
В файл стиля шаблона вниз добавляем:
ul.nav li.dropdown:hover ul.dropdown-menu { display: block; margin: 0; } a.menu:after, .dropdown-toggle:after { content: none; }
#29
Отправлено 13 March 2015 - 01:45 AM
...то пробуем получить "hover эффект" на планшете.Если мы хотим чтобы в верхнем меню та же Авторизация открывалась не по клику мышки а по наведению курсора (hover эффект) то...
#30
Отправлено 13 March 2015 - 08:37 AM
В этом случае он срабатывает как обычное нажатие кнопки....то пробуем получить "hover эффект" на планшете.
Но сайт смотрят как на мобильных устройствах, так и на стационарных машинах...
И в моем посте выше ключевым словом является выражение если мы хотим.
Никто же не заставляет этого делать принудительно, просто описано как добиться такого эффекта.
#31
Отправлено 14 March 2015 - 06:20 AM
Правда? Сами пробовали или прочитали?В этом случае он срабатывает как обычное нажатие кнопки.
на компе в полном экране, естественно, это работает.
Но если нет планшета, то достаточно сжать по ширине браузер, чтобы увидеть получаемую хрень.
Аналогично, кстати, и с заменой stаtic на fixed вместо решения с id="top".
В некоторых браузерах (у меня - в обоих установленных) на планшете не появляется справа скроллер и даже при штатном наборе пунктов меню недоступны развернутые пункты меню авторизации, а пункт смены валюты не виден вообще.
#32
Отправлено 14 March 2015 - 12:55 PM
Пробовал сам, планшет Lenovo. Все достаточно корректно работает.Правда? Сами пробовали или прочитали?
на компе в полном экране, естественно, это работает.
Но если нет планшета, то достаточно сжать по ширине браузер, чтобы увидеть получаемую хрень.
И это работает в том числе.а пункт смены валюты не виден вообще.
Может дело в установленных браузерах на планшете?
Еще... Вот сжатое до таких размеров (натуральный размер) окно браузера (обычный ноут)
IMG_14.03.2015-12.43.38.jpg 15.76К 0 Количество загрузок:
После входа (можно прокручивать до конца) срабатывает при обычном наведении мышки и скролинге колесиком.
IMG_14.03.2015-12.52.57.jpg 19.64К 0 Количество загрузок:
#33
Отправлено 14 March 2015 - 02:17 PM
Пробовал с телефона... есть некоторые проблемы, но они больше связаны с моими толстыми пальцами. Если же пользоваться стилусом то тоже менюшка раскрывается нормально и до конца.
В общем, проблем пока не вижу.
#34
Отправлено 14 March 2015 - 06:42 PM
Очевидно, что дело в установленных на планшете браузерахМожет дело в установленных браузерах на планшете?\
Один штатный, встроенный, второй сторонний. Dolfin или Delfin, как-то так.
Тут каждый решает сам для себя, что важнее. Прозрачность решения, а с fixed вместо static оно, несомненно, прозрачнее и соответствует общей идее bootstrap. Или нормальное отображение в максимальном количестве браузеров.В общем, проблем пока не вижу.
Я у себя вернул назад первоначальное решение, с id="top".
#35
Отправлено 14 March 2015 - 10:20 PM
Полностью с вами согласен. Тут действительно каждый решает для себя сам.Тут каждый решает сам для себя, что важнее. Прозрачность решения, а с fixed вместо static оно, несомненно, прозрачнее и соответствует общей идее bootstrap. Или нормальное отображение в максимальном количестве браузеров.
Но, нужно учитывать еще специализацию своего магазина. Провести исследование, узнать сколько заходят (или пытаются/пытались зайти) в магазин с мобильных устройств. Сколько было продаж клиентам заходившим с моб.устойств и т.д. Может быть для некоторых не стоит и голову ломать.
Но все же, чем лучше будет выглядеть сайт с различных устройств тем лучше! Это я думаю понимают все, даже Google.
Кстати, не так давно прислал сообщение, что типа ваш сайт не адаптирован под мобильные устройства.
Вот такие пироги.
#36
Отправлено 14 March 2015 - 11:28 PM
Это, похоже, вторая порция рассылки. Я тоже получил, но как-то выборочно. По паре сайтов получил, а по тестовому сайту - нет. Хотя у меня все сайты на дефолтовом шаблоне. Так-то Гугл чуть не полгода назад уже предупреждал, что с апреля (?) будет учитывать в позиционировании доступность сайта для мобильных устройств. А дефолтовый шаблон от 3.1.2 напрочь Гуглу не гравится. Пришлось озадачиваться переходом на шаблон от 3.1.3 .Это я думаю понимают все, даже Google.
Кстати, не так давно прислал сообщение, что типа ваш сайт не адаптирован под мобильные устройства.
Вот тут можно посмотреть инфо и рекомендации по своему сайту, если он подключен к Гуглу: https://www.google.c...http://site.ru/ заменив site.ru на свой сайт.
#37
Отправлено 18 March 2015 - 03:12 PM
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
Отправлено 18 March 2015 - 05:28 PM
Осталось понять, зачем при таком подходе шаблон на bootstrap, если штатные бутстраповые фишки (из-за которых и нужен этот шаблон) реализуются своим собственным кодом. Чем-то сильно напоминает изобретение велосипеда в стиле "не хочу читать, как устроен велосипед, поэтому придумаю его сам, пусть даже на квадратных колесах" .И всё отлично работает.
PS. понятно, что это работает. Хотя я не уверен, что будет нормально работать на всех разрешениях. И не очень понимаю, зачем яваскрипт, ведь если элемент нормально "прикнопить" к конкретному месту путем position:fixed, то он и так будет фиксированно находится в этом месте без какого-либо применения JS. Ну а проверять, естественно, лень.
#39
Отправлено 19 March 2015 - 10:28 AM
#40
Отправлено 19 March 2015 - 02:10 PM
Я согласен с badisoft !Я фиксацию верхнего меню сделал по другому:
...
И всё отлично работает.
Bootstap нужно изучать и использовать по полной программе! Очень интересный framework с потрясающими возможностями для сайт/шаблон строения.