Изменяем внешний вид горизонтального меню

загруженное Многие начинающие с ПрестаШоп для старта работы онлайн-магазина используют стандартный шаблон магазина или бесплатные шаблоны. Но всегда хочется выделиться и сделать свой сайт неповторимым, поэтому я уже написал несколько статей по изменению дизайна шаблона default и эта заметка продолжит уроки по изменению внешнего вида вашего магазина. Сейчас я постараюсь достаточно подробно и доходчиво объяснить, как используя наработки сторонних разработчиков изменить внешний вид стандартного модуля blocktopmenu. Используя этот метод вы поймете, делать это не только не сложно, а наоборот интересно. Подобный метод я применил в создании меню для своего бесплатного магазина.
для того чтобы заинтересовать своих читателей я сразу выложу демо результата, которого мы достигнем.

preview
Этот вариант меню был подсмотрен на http://codepen.io/sethabbott/pen/cewzF , где разработчик выложил HTML код и стили. В данном примере используется эффект 3D для показа подменю, в конце урока вы сможете сами выбрать включать или не использовать этот момент.
Хочу напомнить, что все изменения с модулем должны быть выполнены в соответствующей папке вашего шаблона, в нашем случае для файла шаблона
themes/default/modules/blocktopmenu/blocktopmenu.tpl
и для файла стилей
themes/default/modules/blocktopmenu/css/superfish-modified.css
Так делать следует для того, что бы не потерять наши изменения в случае обновления версии движка магазина
Теперь давайте внимательно посмотрим код HTML

и сравним его с кодом шаблона модуля меню blocktopmenu.tpl (для примера используется версия модуля Prestashop 1.5.5.0)

 

Не обращаем внимание на переменные смарти заключенные в фигурные скобки, нас интересует только HTML составляющая шаблона.
В коде создаваемого меню первый тег div имеет атрибут id=”container”, а в нашем шаблоне имеет атрибут class=”sf-contener clearfix” и изменять мы его не будем для сохранения стилей меню по отношению в шаблону магазина. Следующий тег кода HTML ul с атрибутом id=”menu” применим к нашему шаблону заменив class=”sf-menu clearfix”
Далее замечаем, что в верхнем коде подменю заключены в еще один тег ul, добавим и мы его в наш шаблон после переменной {if $MENU_SEARCH} и закрыв перед {/if}
Получаем результат

 

По ссылке в примере смотрим код CSS и копируем все что связано с атрибутом menu, так как мы его задали в теге ul id=”menu”, а остальные стили нас не интересуют.

 

Теперь мы добавляем эти стили в файл superfish-modified.css практически без изменений, за исключением в #menu padding: 0 20px который я закомментировал. Все недочеты можно убрать с помощью инструмента разработчиков в Chrome или Firebug в мозиле.
На этом можно было бы закончить, но можно применить эффект 3D при открытии подменю, для этого подключаем скрипт prefixfree.min.js, который помещаем в папку js модуля(при обновлении движка он не измениться) За эффект у нас отвечает строка @keyframes swingdown в файле стилей.
Конечный результат шаблона blocktopmenu.tpl с применением 3d

 

Готовые файлы для изменения меню
До встречи на webnewbie.ru

Comments (14)

Алекс
05.01.2014 - 02:14 / Ответить

codepen – рулит – спасибо за статью

Олег
18.01.2014 - 20:29 / Ответить

Если несколько подкатегорий, то модуль этот работает некорректно! Есть решение?

19.01.2014 - 06:37 / Ответить

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

Олег
20.01.2014 - 16:33 / Ответить

Ну это можно как то сделать как я хочу?)

21.01.2014 - 14:30 / Ответить

По моему я Вам ответил на этот вопрос-используйте другой модуль.

Вадим
14.02.2014 - 20:43 / Ответить

добрый день! Евгений, я так понимаю сам код находится в файле prefixfree.min.js, что нужно в нем изменить для получения вот такого эффекта:

_http://truequery.ru/css_m_gorizontalnoe_menu_s_3d_punktami_on_css3/index.html

15.02.2014 - 06:56 / Ответить

В Вашем примере другой случай-меню на чистом css ,без js.

Николай
22.05.2014 - 19:03 / Ответить

Где можно посмотреть статью про боковое меню?

23.05.2014 - 10:02 / Ответить

Поищите в сети, я такой статьи не писал.

Николай
23.05.2014 - 13:36 / Ответить

Есть статья про боковое меню, что то в этом роде

23.05.2014 - 14:47 / Ответить

и???

Николай
23.05.2014 - 22:19 / Ответить

Забыл поставить знак ? в конце, хочу переделать боковое меню навыков нет, по этой статье сделал верхнее меню, очень все подробно у вас описано! Спасибо вам!

Василий
27.10.2014 - 16:58 / Ответить

Добрый день.
Можете подсказать, как отключить выпадающие меню с подкатегориями?

27.10.2014 - 21:46 / Ответить

Самый простой способ, удалить все элементы в меню по умолчанию и добавить собственные ссылки для нужных старниц

Leave a Reply