Изменяем внешний вид горизонтального меню
Многие начинающие с ПрестаШоп для старта работы онлайн-магазина используют стандартный шаблон магазина или бесплатные шаблоны. Но всегда хочется выделиться и сделать свой сайт неповторимым, поэтому я уже написал несколько статей по изменению дизайна шаблона default и эта заметка продолжит уроки по изменению внешнего вида вашего магазина. Сейчас я постараюсь достаточно подробно и доходчиво объяснить, как используя наработки сторонних разработчиков изменить внешний вид стандартного модуля blocktopmenu. Используя этот метод вы поймете, делать это не только не сложно, а наоборот интересно. Подобный метод я применил в создании меню для своего бесплатного магазина.
для того чтобы заинтересовать своих читателей я сразу выложу демо результата, которого мы достигнем.
Этот вариант меню был подсмотрен на http://codepen.io/sethabbott/pen/cewzF , где разработчик выложил HTML код и стили. В данном примере используется эффект 3D для показа подменю, в конце урока вы сможете сами выбрать включать или не использовать этот момент.
Хочу напомнить, что все изменения с модулем должны быть выполнены в соответствующей папке вашего шаблона, в нашем случае для файла шаблона
themes/default/modules/blocktopmenu/blocktopmenu.tpl
и для файла стилей
themes/default/modules/blocktopmenu/css/superfish-modified.css
Так делать следует для того, что бы не потерять наши изменения в случае обновления версии движка магазина
Теперь давайте внимательно посмотрим код HTML
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
<div id="container">
<ul id="menu">
<li><a href="#">About Me</a>
<ul>
<li><a href="#">Lorem ipsum dolor</a></li>
<li><a href="#">Maecenas lacinia sem</a></li>
<li><a href="#">Suspendisse fringilla</a></li>
</ul>
</li>
<li><a href="#">Portfolio</a>
<ul>
<li><a href="#">Lorem ipsum dolor</a></li>
<li><a href="#">Maecenas dignissim fermentum luctus</a></li>
<li><a href="#">Suspendisse fringilla</a></li>
<li><a href="#">Lorem ipsum dolor</a></li>
<li><a href="#">Maecenas lacinia sem</a></li>
<li><a href="#">Suspendisse fringilla</a></li>
</ul>
</li>
<li><a href="#">Clients</a>
<ul>
<li><a href="#">Lorem ipsum dolor</a></li>
<li><a href="#">Maecenas lacinia sem</a></li>
<li><a href="#">Suspendisse fringilla</a></li>
</ul>
</li>
<li><a href="#">Contact Me</a>
<ul>
<li><a href="#">Lorem ipsum dolor</a></li>
<li><a href="#">Maecenas dignissim fermentum luctus</a></li>
<li><a href="#">Suspendisse fringilla</a></li>
</ul>
</li>
<li><a href="#">Support</a></li>
</ul>
</div>
|
и сравним его с кодом шаблона модуля меню blocktopmenu.tpl (для примера используется версия модуля Prestashop 1.5.5.0)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
if $MENU != ''}
<!-- Menu -->
<div class="sf-contener clearfix">
<ul class="sf-menu clearfix">
{$MENU}
{if $MENU_SEARCH}
<li class="sf-search noBack" style="float:right">
<form id="searchbox" action="{$link->getPageLink('search')|escape:'html'}" method="get">
<p>
<input type="hidden" name="controller" value="search" />
<input type="hidden" value="position" name="orderby"/>
<input type="hidden" value="desc" name="orderway"/>
<input type="text" name="search_query" value="{if isset($smarty.get.search_query)}{$smarty.get.search_query|escape:'htmlall':'UTF-8'}{/if}" />
</p>
</form>
</li>
{/if}
</ul>
</div>
<div class="sf-right"> </div>
<!--/ Menu -->
{/if}
|
Не обращаем внимание на переменные смарти заключенные в фигурные скобки, нас интересует только HTML составляющая шаблона.
В коде создаваемого меню первый тег div имеет атрибут id=”container”, а в нашем шаблоне имеет атрибут class=”sf-contener clearfix” и изменять мы его не будем для сохранения стилей меню по отношению в шаблону магазина. Следующий тег кода HTML ul с атрибутом id=”menu” применим к нашему шаблону заменив class=”sf-menu clearfix”
Далее замечаем, что в верхнем коде подменю заключены в еще один тег ul, добавим и мы его в наш шаблон после переменной {if $MENU_SEARCH} и закрыв перед {/if}
Получаем результат
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
{if $MENU != ''}
<!-- Menu -->
<div id="container" >
<ul id="menu" >
{$MENU}
{if $MENU_SEARCH}
<ul>
<li >
<form id="searchbox" action="{$link->getPageLink('search')|escape:'html'}" method="get">
<p>
<input type="hidden" name="controller" value="search" />
<input type="hidden" value="position" name="orderby"/>
<input type="hidden" value="desc" name="orderway"/>
<input type="text" name="search_query" value="{if isset($smarty.get.search_query)}{$smarty.get.search_query|escape:'htmlall':'UTF-8'}{/if}" />
</p>
</form>
</li>
</ul>
{/if}
</ul>
</div>
<div class="sf-right"> </div>
<!--/ Menu -->
{/if}
|
По ссылке в примере смотрим код CSS и копируем все что связано с атрибутом menu, так как мы его задали в теге ul id=”menu”, а остальные стили нас не интересуют.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
|
#menu {
position: relative;
float: left;
width: 100%;
/***padding: 0 20px;***/
border-radius: 3px;
box-shadow: inset 0 1px 1px rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.15);
background: #ccc;
}
#menu, #menu ul {
list-style: none;
}
#menu > li {
float: left;
position: relative;
border-right: 1px solid rgba(0,0,0,.1);
box-shadow: 1px 0 0 rgba(255,255,255,.25);
perspective: 1000px;
}
#menu > li:first-child {
border-left: 1px solid rgba(255,255,255,.25);
box-shadow: -1px 0 0 rgba(0,0,0,.1), 1px 0 0 rgba(255,255,255,.25);
}
#menu a {
display: block;
position: relative;
z-index: 10;
padding: 13px 20px 13px 20px;
text-decoration: none;
color: rgba(75,75,75,1);
line-height: 1;
font-weight: 600;
font-size: 12px;
letter-spacing: -.05em;
background: transparent;
text-shadow: 0 1px 1px rgba(255,255,255,.9);
transition: all .25s ease-in-out;
}
#menu > li:hover > a {
background: #333;
color: rgba(0,223,252,1);
text-shadow: none;
}
#menu li ul {
position: absolute;
left: 0;
z-index: 99;
width: 200px;
padding: 0;
opacity: 0;
visibility: hidden;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
background: transparent;
overflow: hidden;
transform-origin: 50% 0%;
}
#menu li:hover ul {
padding: 15px 0;
background: #333;
opacity: 1;
visibility: visible;
box-shadow: 1px 1px 7px rgba(0,0,0,.5);
animation-name: swingdown;
animation-duration: 1s;
animation-timing-function: ease;
}
@keyframes swingdown {
0% {
opacity: .99999;
transform: rotateX(90deg);
}
30% {
transform: rotateX(-20deg) rotateY(5deg);
animation-timing-function: ease-in-out;
}
65% {
transform: rotateX(20deg) rotateY(-3deg);
animation-timing-function: ease-in-out;
}
100% {
transform: rotateX(0);
animation-timing-function: ease-in-out;
}
}
#menu li li a {
padding-left: 15px;
font-weight: 400;
color: #ddd;
text-shadow: none;
border-top: dotted 1px transparent;
border-bottom: dotted 1px transparent;
transition: all .15s linear;
}
#menu li li a:hover {
color: rgba(0,223,252,1);
border-top: dotted 1px rgba(255,255,255,.15);
border-bottom: dotted 1px rgba(255,255,255,.15);
background: rgba(0,223,252,.02);
}
|
Теперь мы добавляем эти стили в файл superfish-modified.css практически без изменений, за исключением в #menu padding: 0 20px который я закомментировал. Все недочеты можно убрать с помощью инструмента разработчиков в Chrome или Firebug в мозиле.
На этом можно было бы закончить, но можно применить эффект 3D при открытии подменю, для этого подключаем скрипт prefixfree.min.js, который помещаем в папку js модуля(при обновлении движка он не измениться) За эффект у нас отвечает строка @keyframes swingdown в файле стилей.
Конечный результат шаблона blocktopmenu.tpl с применением 3d
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
{if $MENU != ''}
<!-- Menu -->
<script src="{$base_dir}modules/blocktopmenu/js/prefixfree.min.js"></script>
<div id="container" >
<ul id="menu" >
{$MENU}
{if $MENU_SEARCH}
<ul>
<li >
<form id="searchbox" action="{$link->getPageLink('search')|escape:'html'}" method="get">
<p>
<input type="hidden" name="controller" value="search" />
<input type="hidden" value="position" name="orderby"/>
<input type="hidden" value="desc" name="orderway"/>
<input type="text" name="search_query" value="{if isset($smarty.get.search_query)}{$smarty.get.search_query|escape:'htmlall':'UTF-8'}{/if}" />
</p>
</form>
</li>
</ul>
{/if}
</ul>
</div>
<div class="sf-right"> </div>
<!--/ Menu -->
{/if}
|
Готовые файлы для изменения меню
До встречи на webnewbie.ru
codepen – рулит – спасибо за статью
Если несколько подкатегорий, то модуль этот работает некорректно! Есть решение?
Если не устраивает стандартный модуль меню, то придется поискать альтернативу. Но несколько подкатегорий плохо скажется на SEO, чем меньше вложенность тем быстрее и лучше проиндексируются страницы. А еще большая вложенность повлияет на снижение скорости работы магазина.
Ну это можно как то сделать как я хочу?)
По моему я Вам ответил на этот вопрос-используйте другой модуль.
добрый день! Евгений, я так понимаю сам код находится в файле prefixfree.min.js, что нужно в нем изменить для получения вот такого эффекта:
_http://truequery.ru/css_m_gorizontalnoe_menu_s_3d_punktami_on_css3/index.html
В Вашем примере другой случай-меню на чистом css ,без js.
Где можно посмотреть статью про боковое меню?
Поищите в сети, я такой статьи не писал.
Есть статья про боковое меню, что то в этом роде
и???
Забыл поставить знак ? в конце, хочу переделать боковое меню навыков нет, по этой статье сделал верхнее меню, очень все подробно у вас описано! Спасибо вам!
Добрый день.
Можете подсказать, как отключить выпадающие меню с подкатегориями?
Самый простой способ, удалить все элементы в меню по умолчанию и добавить собственные ссылки для нужных старниц