Меню многоуровневое горизонтальное и вертикальное CSS

Уникальность приведённого ниже кода в том, что он позволяет создавать неограниченное количество плавно появляющихся вложений не изменяя стилей.

Ещё одна особенность в том, что для того чтоб переделать вертикальное меню в горизонтальное, достаточно изменить лишь одно значение в стилях. О чём я укажу в комментариях в коде.

Я даю только эскиз меню. Оформлять и наводить красоту, каждый будет по своему вкусу.

1. Вертикальное

 

 

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>

Чтоб не выкладывать огромную портянку, я сделал только два блока с двумя уровнями, но вы можете простым копированием добавлять в этот код столько блоков сколько надо и делать столько уровней в каждом блоке, сколько вам потребуется.

Стили для всех блоков, имеющихся и добавленных, будут одинаковыми.

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 основы. Добавьте в закладки постоянную ссылку.
А так же:

4 комментария на «Меню многоуровневое горизонтальное и вертикальное CSS»

  1. stariс говорит:

    Всё в ваших руках. В CSS можно изменять размеры и подвинуть куда угодно, чтоб не вылезало за край. Я даю только решение, а уж оформить и разместить так как нужно вам — ваша задача.

  2. Вячеслав говорит:

    Всё хорошо, если бы за край не выползало меню.

  3. stariс говорит:

    Пожалуйста. Для себя делал. Говорил же — тут много чего интересного собрано.

  4. Юрий говорит:

    спасибо за меню.Вертикальное -пригодится

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *