Как создать вертикальное многоуровневое меню в modx evo


я в Интернете не смог найти как создать многоуровневое меню ( именно вертикальное) для модх Ева.

И случайным образом , наткнулся на зарубежный сайт на котором были предоставлены простые многоуровневые меню для модх’а. Немного подкорректировал под свои нужны, и получилось очень даже =)

Создание вертикального многоуровневого меню для модх ева

 


Как же легко создать вертикальное многоуровневое меню для модх ева?
Делаем все по этапам:
Заходим в админку modx evo.  Элементы-Управление элементами-Чанки
 

как создать вертикальное многоуровневое меню для модх ева

И  создаем несколько чанков.

1) Первый чанк: в названии чанка пишем cssplay_flyout
Код чанка :
<link rel="stylesheet" media="all" type="text/css" href="assets/templates/wayfinder/flyout.css" />
<!--[if lte IE 6]>
<link rel="stylesheet" media="all" type="text/css" href="assets/templates/wayfinder/flyout_ie.css" />
<![endif]-->

Вертикальное меню на модх ево

 

2) Второй чанк:
В названии чанка пишем cssplay_inner
В коде чанка пишем :
<ul>
    [+wf.wrapper+]
</ul>

создание меню вертикального на модх

 


3) Третий чанк с именем:
cssplay_outer
В коде чанка вставляем:
<div[+wf.classes+]>
    <ul>
        [+wf.wrapper+]
    </ul>
</div>

вертикальное меню на css для модх


4) Четвертый чанк с именем:
cssplay_parentRow
в коде пишем:
<li><a [+wf.classes+] href="[+wf.link+]" >[+wf.linktext+]</a>
    <!--[if lte IE 6]>
    <a class="sub" href="[+wf.link+]" >[+wf.linktext+]
    <table><tr><td>
    <![endif]-->
    [+wf.wrapper+]
    <!--[if lte IE 6]>
</td></tr></table>
    </a>
    <![endif]-->
</li>

Как создать многоуровневое вертикальное меню на modx evo

 


5) Создаем последний пятый чанк с именем :
cssplay_row
с кодом:
<li[+wf.classes+]><a href="[+wf.link+]">[+wf.linktext+]</a>[+wf.wrapper+]</li>

Создание меню на mod evo

 

Так, теперь нам нужно вызвать меню в вашем шаблоне , вертикальное многоуровневое меню выводим в левой колонке сайта .
Заходим в шаблон сайта, в моем случае чанк с выводом моего меню назвается LEFT-COL.
В нужном вам месте вызываем меню :
<div id="menu">
[[Wayfinder? &startId=`15` &level=`3` &parentClass=`hide` &parentRowTpl=`cssplay_parentRow` &outerTpl=`cssplay_outer` &innerTpl=`cssplay_inner` &rowTpl=`cssplay_row` &outerClass=`menu` &cssTpl=`cssplay_flyout`]]
</div>

Вертикальное меню на css для modx evo

 

Так, с чанками закончили, осталось прописать стили css меню. Заходим в style.css вашей темы и вставляем код ( вы можете сами в дальнейшем поддкоректировать цвета и шрифты меню, зная немного css )

Код для вставки css:

.menu {

width:106px;
height:150px;
position:relative;


  margin: 5px 0px 40px -10px;

}
.menu ul li a, .menu ul li a:visited {
display:block;
text-decoration:none;
color:white;
width:150px;

 

padding:6px 10px 5px 10px;
line-height:15px;
float:left;
  text-align:center;
font-size:15px;
background: #b8e1fc; /* Old browsers */
background: -moz-linear-gradient(top,  #b8e1fc 0%, #a9d2f3 10%, #90bae4 25%, #90bcea 37%, #90bff0 50%, #6ba8e5 51%, #a2daf5 83%, #bdf3fd 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b8e1fc), color-stop(10%,#a9d2f3), color-stop(25%,#90bae4), color-stop(37%,#90bcea), color-stop(50%,#90bff0), color-stop(51%,#6ba8e5), color-stop(83%,#a2daf5), color-stop(100%,#bdf3fd)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%); /* IE10+ */
background: linear-gradient(to bottom,  #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b8e1fc', endColorstr='#bdf3fd',GradientType=0 ); /* IE6-9 */


box-shadow:1px 1px 6px 1px #90BAE4;

-webkit-border-radius: 10px 10px 0px 0px;
-moz-border-radius: 10px 10px 0px 0px;
-khtml-border-radius: 10px 10px 0px 0px;
border-radius: 5px 5px 5px 5px;
border:1px solid white;

}
.menu ul {
padding:0;
margin:0;
list-style-type: none;
}
.menu ul li {
float:left;
margin-right:1px;
position:relative;
}
.menu ul li ul {display: none;}

/* specific to non IE browsers */
.menu ul li:hover a {
color:white;


}
.menu ul li:hover ul {
display:block;
position:absolute;
top:0;
left:171px;
width:105px;
 
}
.menu ul li:hover ul li a.hide {
background:#dfc184;
color:#000;
}
.menu ul li:hover ul li:hover a.hide {
width:150px;
}
.menu ul li:hover ul li ul {
display: none;
}
.menu ul li:hover ul li a {  
display:block;

color:white;
width:200px;
border:1px solid grey;
}
.menu ul li:hover ul li a:hover {

color:black;
}
.menu ul li:hover ul li:hover ul {
display:block;
position:absolute;
left:151px;
top:0;
color:#000;
}
.menu ul li:hover ul li:hover ul li a {
display:block;
width:200px;
background:#dfc184;
color:#000;
}
.menu ul li:hover ul li:hover ul li a:hover {
background:#bd8d5e;
color:#fff;
}

Пример рабочей реализации вы сможете посмотреть на сайте aksinew.ru
Данный метод реализации меню был взят и изменен  с сайта http://muddydogpaws.com/


Интересные статьи

  • Психология выбора цвета при создании сайта.
  • Какой должен быть интернет-магазин или что раздражает посетителей.
  • Интернет-магазин глазами покупателя
  • Повышение пребывания в интернет-магазине и что такое липкий сайт.
  • Почему нужен сайт?

  •