Вариант верстки меню для Joomla 1.5 с использованием CSS 2.1

У меня уже было несколько рецептов верстки меню для Joomla 1.5 - а именно Пошаговое создание трехуровневого меню и Создание раскрывающегося меню для Joomla 1.5.

Сегодня дам еще один вариант с использованием селекторов CSS 2.1. Про MS Internet Explorer 6.0 даже не заикайтесь, считаем его усопшим.

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

Код ниже дан в расчете на то, что меню находится внутри контейнера

div class="left"

, если в Вашем шаблоне он в другом месте - поменяйте на нужый селектор.

 

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

 

div#left  ul > li > ul > li {
padding-left:16px;
display:none;
}
div#left ul > li > ul > li > ul > li {
padding-left:16px;
display:none;
}
div#left ul li#current > ul > li, div#left ul li.active > ul > li {
display:block !important;
}
div#left ul li#current ul li ul li{
display:none !important;
}

Собственно все. Буду краток.

Добавить комментарий