Меню многоуровневое горизонтальное и вертикальное 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 не будет опубликован. Обязательные поля помечены *