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


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

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

  • Вы не можете ответить в тему
Сообщений в теме: 43

#21 badisoft

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

  • Assistent vsupport.club
  • PipPipPip
  • 5075 сообщений
Репутация: 786
Мастер

Отправлено 01 March 2015 - 05:39 PM

Да, да, да! Именно так!!!

http://vsupport.club/topic/3216-сворачиваем-блок-категорий-на-малых-разрешени
  • 0
http://cpu.badisoft.ru (тестовый сайт), http://badisoft.ru (модули)

#22 FusSheva

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

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

Отправлено 08 March 2015 - 10:23 PM

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

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

#23 badisoft

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

  • Assistent vsupport.club
  • PipPipPip
  • 5075 сообщений
Репутация: 786
Мастер

Отправлено 09 March 2015 - 12:47 AM

А вот в нашем случае что делать то?

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

#24 FusSheva

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

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

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

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

#25 FusSheva

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

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

Отправлено 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">

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

#26 badisoft

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

  • Assistent vsupport.club
  • PipPipPip
  • 5075 сообщений
Репутация: 786
Мастер

Отправлено 10 March 2015 - 01:29 PM

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

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

#27 FusSheva

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

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

Отправлено 10 March 2015 - 08:31 PM

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

#28 FusSheva

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

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

Отправлено 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;
}

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

#29 badisoft

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

  • Assistent vsupport.club
  • PipPipPip
  • 5075 сообщений
Репутация: 786
Мастер

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

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

...то пробуем получить "hover эффект" на планшете.
  • 0
http://cpu.badisoft.ru (тестовый сайт), http://badisoft.ru (модули)

#30 FusSheva

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

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

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

...то пробуем получить "hover эффект" на планшете.

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

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

#31 badisoft

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

  • Assistent vsupport.club
  • PipPipPip
  • 5075 сообщений
Репутация: 786
Мастер

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

В этом случае он срабатывает как обычное нажатие кнопки. :)

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

#32 FusSheva

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

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

Отправлено 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 Количество загрузок:
  • 0
Каждый человек способен на многое. Но к сожалению, не каждый знает на что он способен.

#33 FusSheva

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

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

Отправлено 14 March 2015 - 02:17 PM

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

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

#34 badisoft

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

  • Assistent vsupport.club
  • PipPipPip
  • 5075 сообщений
Репутация: 786
Мастер

Отправлено 14 March 2015 - 06:42 PM

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

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

В общем, проблем пока не вижу.

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

#35 FusSheva

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

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

Отправлено 14 March 2015 - 10:20 PM

Тут каждый решает сам для себя, что важнее. Прозрачность решения, а с fixed вместо static оно, несомненно, прозрачнее и соответствует общей идее bootstrap. Или нормальное отображение в максимальном количестве браузеров.

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

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

#36 badisoft

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

  • Assistent vsupport.club
  • PipPipPip
  • 5075 сообщений
Репутация: 786
Мастер

Отправлено 14 March 2015 - 11:28 PM

Это я думаю понимают все, даже Google.
Кстати, не так давно прислал сообщение, что типа ваш сайт не адаптирован под мобильные устройства.

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

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

#37 stasikons

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

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

Отправлено 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>
И всё отлично работает.
  • 0

#38 badisoft

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

  • Assistent vsupport.club
  • PipPipPip
  • 5075 сообщений
Репутация: 786
Мастер

Отправлено 18 March 2015 - 05:28 PM

И всё отлично работает.

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

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

#39 stasikons

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

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

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

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

#40 FusSheva

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

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

Отправлено 19 March 2015 - 02:10 PM

Я фиксацию верхнего меню сделал по другому:
...
И всё отлично работает.

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