Создание фиксированного меню

fixedmenu
В этот раз я покажу как достаточно легко и просто с помощью jQuery и CSS сделать меню сайта PrestaShop фиксированным в верхней части сайта при прокрутке страницы.Сделать это достаточно просто. Для начала необходимо определить класс блока в котором находится наше меню. Для этого я воспользуюсь инструментом разработчика в Chrome. На блоке меню нажимаем правую кнопку мышки и в появившемся окне инструмента находим class

instr
В данном случае пример на штатном шаблоне PrestaShop версии 1.6.0.9 и как видим на картинке наш класс sf-menu
Далее необходимо разместить код jQuery в самом низу файла header.tpl вашего шаблона

 

Поясняю. как видно из кода в скрипте назначается постоянная var nav = $(‘.sf-menu’); для класса блока нашего меню. При скролле мышкой если расстояние от верхней токи сайта будет превышать 136px срабатывает CSS со стилям класса f-nav.
Добавим далее эти стили.

 
Вот и все. Вы можете воспользоваться моим примером или бесплатным модулем, который я подготовил специально для этой статьи.
До встречи на webnewbie.ru

Comments (8)

Андрей
09.04.2015 - 06:53 / Ответить

Простите за глупый вопрос, только учусь, как вы сделали центрирование меню по горизонтали, у меня никак не получается, подскажите где копать?

09.04.2015 - 11:02 / Ответить

В конце статьи указаны стили [php]z-index: 9999; position: fixed; left: 0; top: 0; width: 100%;[/php]

Андрей
09.04.2015 - 16:31 / Ответить

Я не правильно выразился, как сделать так чтобы пункты меню-вкладки были отцентрированы по горизонтали, а не смещались влево

09.04.2015 - 18:46 / Ответить

Вкладки и не смещаются влево, а растягивается блок меню целиком. Поиграйте со стилями left и width, например, left:80px; width:90%

Костя
29.05.2015 - 01:43 / Ответить

Как в меню добавить блок, как у вас в простом меню нету поиска, а в фиксированном есть и лого у вас тоже меняется. Как вы это реализовали?

31.05.2015 - 05:13 / Ответить

Это все уже было реализовано в шаблоне который я установил.

Nadya
09.07.2016 - 19:02 / Ответить

Добрый день. Второй глупый вопрос: в какой файл нужно добавить строку .f-nav{ z-index: 9999; position: fixed; left: 0; top: 0; width: 100%;} ?

10.07.2016 - 12:56 / Ответить

Стили можно добавить в файл global.css шаблона магазина

Leave a Reply