Меню многоуровневое горизонтальное и вертикальное CSS
Опубликовано: 23.08.2018
Уникальность приведённого ниже кода в том, что он позволяет создавать неограниченное количество плавно появляющихся вложений не изменяя стилей.
Ещё одна особенность в том, что для того чтоб переделать вертикальное меню в горизонтальное, достаточно изменить лишь одно значение в стилях. О чём я укажу в комментариях в коде.
Я даю только эскиз меню. Оформлять и наводить красоту, каждый будет по своему вкусу.
1. Вертикальное
Горизонтальное меню на css 3
2. Горизонтальное
Код:
HTML
< div class =" nav "> < ul class =" topmenu "> < li >< a href ="">Meny1< /a > < ul class =" submenu "> < li >< a href ="">Meny 1-2< /a > < ul class =" submenu "> < li >< a href ="">Meny 1-2-1< /a >< /li > < li >< a href ="">Meny 1-2-2</a>< /li > < /ul > < /li > < li >< a href ="">Meny 1-3< /a > < ul class =" submenu "> < li >< a href ="">Meny 1-3-1< /a >< /li > < li >< a href ="">Meny 1-3-2< /a >< /li > < /ul > < /li > < /ul > < /li > < li >< a href ="">Meny 2< /a > < ul class =" submenu "> < li >< a href ="">Meny 2-1< /a > < ul class =" submenu "> < li >< a href ="">Meny 2-1-1< /a >< /li > < li >< a href ="">Meny 2-1-2< /a >< /li > < /ul > < /li > < li >< a href ="">Meny 2-2< /a > < ul class =" submenu "> < li >< a href ="">Meny 2-2-1< /a >< /li > < li >< a href ="">Meny 2-2-2< /a >< /li > < /ul > < /li > < /ul > < /li > < /ul > < /div >Чтоб не выкладывать огромную портянку, я сделал только два блока с двумя уровнями, но вы можете простым копированием добавлять в этот код столько блоков сколько надо и делать столько уровней в каждом блоке, сколько вам потребуется.
12:. CSS. Создаем многоуровневое меню | ч1
Стили для всех блоков, имеющихся и добавленных, будут одинаковыми.
CSS
. nav { background : white ; text-align : center ; } . nav a { text-decoration : none ; display : block ; transition : .5s linear ; } . nav ul { list-style : none ; margin : 0 ; padding : 0 ; } . topmenu > li { display : block ; /*Если вместо block задать inline-block, меню будет горизонтальным*/ position : relative ; } . topmenu > li > a { font-weight : bold ; padding : 10px 30px ; font-size : 12px ; text-transform : uppercase ; letter-spacing : 2px ; color : # 1c1c1c ; border : 1px solid #999 ; } . submenu { position : absolute ; left : 10px ; z-index : 5 ; width : 240px ; visibility : hidden ; opacity : 0 ; transform : translateY(10px) ; transition : .5s ease-in-out ; } . submenu li { position : relative ; border : 1px solid #999 ; margin :2px ; } . submenu a { background : white ; color : #1c1c1c ; text-align : center ; font-size : 14px ; letter-spacing : 1px ; padding : 10px 20px ; } . submenu .submenu { position : absolute ; top : 0 ; left : 200px ; } . nav li:hover > .submenu { visibility : visible ; opacity : 1 ; transform : translateY(0px) ; }Желаю творческих успехов.
В раздел > > >
Запись опубликована в рубрике CSS основы , HTML основы . Добавьте в закладки постоянную ссылку .