Боковое выпадающее меню на CSS

Рассматриваем вариант, как самому состряпать боковое вложенное меню. Тема достаточно актуальная, лично я сам недавно столкнулся с подобной проблемой, где CMS не рассчитана на некоторые извращения. Но на что не пойдешь ради того чтобы заказчик остался довольным и счастливым, ведь частенько приходиться жертвовать собой целиком ради результата. И так, приступаем к делу. Для начала рассмотрим блок CSS, добавим туда своих стилей:

ul#navmenu-v,
ul#navmenu-v li,
ul#navmenu-v ul {
margin: 0;
border: 0 none;
padding: 0;
width: 160px;
list-style: none;
}

ul#navmenu-v:after {
clear: both;
display: block;
font: 1px/0px serif;
content: ".";
height: 0;
visibility: hidden;
}

ul#navmenu-v li {
float: left;
display: block !important;
display: inline;
position: relative;
}

ul#navmenu-v a {
border: 1px solid #FFF;
border-right-color: #527337;
border-bottom-color: #527337;
padding: 0 6px;
display: block;
background: #A2C585;
color: #666;
font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
height: auto !important;
height: 1%;
}

ul#navmenu-v a:hover,
ul#navmenu-v li:hover a,
ul#navmenu-v li.iehover a {
background: #648B43;
color: #FFF;
}

ul#navmenu-v li:hover li a,
ul#navmenu-v li.iehover li a {
background: #648B43;
color: #BCD6A7;
}

ul#navmenu-v li:hover li a:hover,
ul#navmenu-v li:hover li:hover a,
ul#navmenu-v li.iehover li a:hover,
ul#navmenu-v li.iehover li.iehover a {
background: #648B43;
color: #FFF;
}

ul#navmenu-v li:hover li:hover li a,
ul#navmenu-v li.iehover li.iehover li a {
background: #648B43;
color: #BCD6A7;
}

ul#navmenu-v li:hover li:hover li a:hover,
ul#navmenu-v li:hover li:hover li:hover a,
ul#navmenu-v li.iehover li.iehover li a:hover,
ul#navmenu-v li.iehover li.iehover li.iehover a {
background: #648B43;
color: #FFF;
}

ul#navmenu-v li:hover li:hover li:hover li a,
ul#navmenu-v li.iehover li.iehover li.iehover li a {
background: #648B43;
color: #BCD6A7;
}

ul#navmenu-v li:hover li:hover li:hover li a:hover,
ul#navmenu-v li.iehover li.iehover li.iehover li a:hover {
background: #648B43;
color: #FFF;
}

ul#navmenu-v ul,
ul#navmenu-v ul ul,
ul#navmenu-v ul ul ul {
display: none;
position: absolute;
top: 0;
left: 160px;
}

ul#navmenu-v li:hover ul ul,
ul#navmenu-v li:hover ul ul ul,
ul#navmenu-v li.iehover ul ul,
ul#navmenu-v li.iehover ul ul ul {
display: none;
}

ul#navmenu-v li:hover ul,
ul#navmenu-v ul li:hover ul,
ul#navmenu-v ul ul li:hover ul,
ul#navmenu-v li.iehover ul,
ul#navmenu-v ul li.iehover ul,
ul#navmenu-v ul ul li.iehover ul {
display: block;
}

Далее верстаем менюшку с вложениями:

<ul id="navmenu-v">
<li><a href="index.html">Главная</a></li>
<li><a href="templates.html">Шаблоны, рецепты +</a>
<ul>
<li><a href="templates.html">Шаблоны, заготовки +</a>
<ul>
<li><a href="temp1.html">Шаблон 1</a></li>
<li><a href="temp2.html">Шаблон 2</a></li>
<li><a href="temp3.html">Шаблон 3</a></li>
<li><a href="temp4.html">Шаблон 4</a></li>
<li><a href="temp5.html">Шаблон 5</a></li>
<li><a href="temp6.html">Шаблон 6</a></li>
<li><a href="temp7.html">Шаблон 7</a></li>
<li><a href="temp8.html">Шаблон 8</a></li>
</ul>
</li>
<li><a href="faq.html">Рецепты HTML</a></li>
<li><a href="faq-css.html">Рецепты CSS</a></li>
</ul>
</li>
<li><a href="#">Менюшки +</a>
<ul>
<li><a href="#">Вертикальные +</a>
<ul>
<li><a href="menu1.html">Вертикальное меню 1</a></li>
<li><a href="menu2.html">Вертикальное меню 2</a></li>
<li><a href="menu3.html">Вертикальное меню 3</a></li>
<li><a href="menu4.html">Вертикальное меню 4</a></li>
<li><a href="menu5.html">Вертикальное меню 5</a></li>
</ul>
</li>
<li><a href="#">Горизонтальные +</a>
<ul>
<li><a href="menu6.html">Горизонтальное меню 1</a></li>
<li><a href="menu7.html">Горизонтальное меню 2</a></li>
<li><a href="menu8.html">Горизонтальное меню 3</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="/gb">Гостевая книга</a></li>
<li><a href="submit.html">Контакт</a></li>
</ul>

После все этого можно подключить этот JavaScript-файл, он даст динамику действия.

Причина по которой я поднял эту проблему, заключается в том, что opencart 1.5.4.1 не умеет выборочно по желанию админа составлять меню категорий как это например умеет делать WordPress. Пришлось тупо лезть в код module/category.tpl и сносить там все к черту и писать статику, но зато все прекрасно работает в итоге. И еще по дефолту категории в opencart не умеют демонстрировать нам динамическое меню сбоку. Вот и всё собственно на этом.

Метки записи: