Опубликовано: 24 ноября 2015
Разное офорлмение пунктов горизонтального меню Есть решение
Добрый день! Подскажите пожалуйста, как возможно осуществить разное выпадение менюшек в горизонтальном меню? Т.е. одно меню должно выпадать вот так http://prntscr.com/965skr , а остальные так http://prntscr.com/965unn . Ну или что бы это меню не залезало вниз, а выпадало вниз, а то что ниже, выпадало в колонках справа http://prntscr.com/965vfp , подменю 2 и третьего уровня не нужны.
Комментарии (3)
С помощью средств CSS можно обратится к любому элементу по его порядковому номеру в списке
например Вы хотите изменить отображение дочерних элементов 2-го пункта меню
это обратившись к "селекторам"
ul.base-menu.tree > li:nth-child(2)
* Элемент li второй в списке (в Вашем случае это пункт меню "обои по бренду")
ul.base-menu.tree > li:nth-child(2)>a
* дочерний элемент второго пункта - ссылка
ul.base-menu.tree > li:nth-child(2)>ul
* дочерний элемент второго пункта - блок содержащий пункты 2-го уровня
ul.base-menu.tree > li:nth-child(2)>ul>li
* пункты 2-го уровня вложенности
ul.base-menu.tree > li:nth-child(2)>ul>li>ul
* контейнер для пунктов 3-го уровня вложенности
что бы изменить отображение контейнера и его содержания для 2-го пункта меню пропишите в пользовательских стилях следующее
@media only screen and (min-width: 993px){
ul.base-menu.tree{
position:relative;
/*изменяем позиционирование контейнера горизонтальных пунктов меню*/
}
ul.base-menu.tree > li:nth-child(2){
position:static;
/*изменяем позиционирование 2-го пункта меню, что бы вложенный блок с пунктами 2-го уровня не наследовал ширину*/
}
ul.base-menu.tree > li:nth-child(2)>ul{
width:100%;
/*задаем ширину контейнеру для пунктов 2-го уровня в 100%*/
}
ul.base-menu.tree > li:nth-child(2)>ul>li{
width:25%;
/*ширину каждого пункта в 25% что бы получилось 4 колонки*/
display:inline-block;
/*изменяем тип отображения - что бы пункты разместились друг рядом с другом по горизонтали*/
}
ul.base-menu.tree > li:nth-child(2)>ul>li>ul{
display:none;
/*скрываем контейнер с элементами 3-го уровня*/
}
}
* таких условий (псевдо-класс) может содержаться несколько в сеекторе
например на скриншоте видно что есть дочерняя категория "Atlas" которая является 3-й по порядку. К ней можно обратится с помощью следующего селектора
ul.base-menu.tree > li:nth-child(2)>ul>li:nth-child(3)>a{
color:red;
}
Таким образом Вы можете обращаться к любому элементу по его порядковому номеру
Супер! То что надо! Спасибо огромное!!!
Может вы мне еще подскажите как один пункт меню сделать вида "Блок", а другой вида "Список"?
Дотямкал только на половину, вот посмотрите: goo.gl/cr07A3
Т.е. выводится только 2-ой уровень, а 3-ый выводится в в виде "Список".
Там мне нужно первый пункт меню "Каталог" сделать по принципу "Блок", а все остальные как есть в виде "Список"