ПШвИ - ПЕРВЫЙ ШАГ в ИНТЕРНЕТ

ИНТЕРНЕТ-ПОРТАЛ БОЛГАРСКОЙ СОШ №1 

Ваш IP: 54.81.69.220
  • Увеличить размер шрифта
  • Размер шрифта по умолчанию
  • Уменьшить размер шрифта
Первый Шаг в Интернет ПУБЛИКАЦИИ САЙТОСТРОЕНИЕ Горизонтальное выпадающее многоуровневое меню

Горизонтальное выпадающее многоуровневое меню

Печать

Горизонтальное выпадающее многоуровневое меню

mnogourovnevoe-menu

 

Как сделать выпадающее меню с двумя уровнями вложения

Разметка горизонтального многоуровневого меню базируется на css-позиционировании. Всем элементам списка li задается относительное позиционирование, а выпадающему меню ul любого уровня — абсолютное позиционирование.

По умолчанию ширина выпадающего меню равна ширине элемента списка, в который оно вложено. Чтобы изменить ширину, нужно её задать при помощи свойства width, например, .submenu {width: 300px;}.

Выпадающее меню первого уровня вложения не требует задания смещения, абсолютное позиционирование делает его высоту равной нулю, чтобы не оставлять пустое место под элементом списка. Для меню второго уровня задаётся смещение относительно левой и верхней границы элемента списка ul {left: 100%; top: 0;}

1. Выпадающее раскладывающееся многоуровневое меню

 

 

Выпадающее меню скрывается с помощью .submenu {visibility: hidden; opacity: 0;}, показывается li:hover > .submenu {visibility: visible; opacity: 1;}.

<nav>
  <ul class="topmenu">
    <li><a href="/" class="active">Главная<span class="fa fa-angle-down"></span></a>
      <ul class="submenu">
        <li><a href="/">меню второго уровня</a></li>
        <li><a href="/">меню второго уровня<span class="fa fa-angle-down"></span></a>
          <ul class="submenu">
            <li><a href="/">меню третьего уровня</a></li>
            <li><a href="/">меню третьего уровня</a></li>
            <li><a href="/">меню третьего уровня</a></li>
          </ul>
        </li>
        <li><a href="/">меню второго уровня</a></li>
      </ul>
    </li>
    <li><a href="/">Компания</a></li>
    <li><a href="/">Блог</a></li>
    <li><a href="/">Контакты</a></li>
  </ul>
</nav>
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600&subset=latin,cyrillic);
*{box-sizing: border-box;}
body {
  margin: 0;
  font-family: 'Open Sans', sans-serif;
}
nav {background: #413F3C;}
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav ul:after {
  content: "";
  display: table;
  clear: both;
}
nav a {
  text-decoration: none;
  display: block;
  transition: .3s linear;
}
.topmenu > li {
  float: left;
  position: relative;
  border-left: 1px solid black;
}
.topmenu > li:first-child {border-left: 0;}
.topmenu > li > a {  
  padding: 20px 30px;
  font-size: 12px;
  text-transform: uppercase;
  color: #FEFDFD;
  letter-spacing: 2px;
}
.topmenu > li > a.active, 
.submenu a:hover {color: #ddbe86;}
.topmenu .fa, 
.submenu .fa {
  margin-left: 5px;
  color: inherit;
}
.submenu {
  position: absolute;
  z-index: 5;
  min-width: 200px;
  background: white;
  border-top: 1px solid #CBCBCC;
  border-left: 1px solid #CBCBCC;
  border-right: 1px solid #CBCBCC;
  visibility: hidden;
  opacity: 0; 
  transform-origin: 0% 0%;
  transform: rotateX(-90deg);
  transition: .3s linear;  
}
.submenu li {position: relative;}
.submenu li a {
  color: #282828;
  padding: 10px 20px;
  font-size: 13px;
  border-bottom: 1px solid #CBCBCC;
}
.submenu .submenu {
  position: absolute;
  left: 100%;
  top: -1px;
  transition: .3s linear;
}
nav li:hover > .submenu {
  transform: rotateX(0deg);
  visibility: visible;
  opacity: 1;
}

2. «Подъезжающее» выпадающее меню

2017-06-15 085154

 

Смещаем подменю .submenu {transform: translateY(10px);} по горизонтали, скрываем его при помощи visibility: hidden; opacity: 0;. При наведении на элемент списка меню становится видимым и перемещается вверх на 10px. Для отображения галочки не забудьте подключить FontAwesome.

<nav>
  <ul class="topmenu">
    <li><a href="/" class="active">Главная</a>
      <ul class="submenu">
        <li><a href="/">меню второго уровня</a></li>
        <li><a href="/" class="submenu-link">меню второго уровня</a>
          <ul class="submenu">
            <li><a href="/">меню третьего уровня</a></li>
            <li><a href="/">меню третьего уровня</a></li>
            <li><a href="/">меню третьего уровня</a></li>
          </ul>
        </li>
        <li><a href="/">меню второго уровня</a></li>
      </ul>
    </li>
    <li><a href="/">Компания</a></li>
    <li><a href="/">Блог</a></li>
    <li><a href="/">Контакты</a></li>
  </ul>
</nav>
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600&subset=latin,cyrillic);
*{box-sizing: border-box;}
body {
  margin: 0; 
  background: #f7f9fe;
  font-family: 'Open Sans', sans-serif;
}
nav {
  background: white;
  box-shadow: 0 2px 0 0 #ECF1F2;
  border-top: 1px solid #ECF1F2;
  text-align: center;
}
nav a {
  text-decoration: none;
  display: block;
  transition: .3s linear;
}
nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.topmenu > li {
  display: inline-block;
  position: relative;
  margin-right: -4px;
  border-left: 1px solid #ECF1F2;
}
.topmenu > li:last-child {border-right: 1px solid #ECF1F2;}
.topmenu > li > a {
  font-weight: bold;
  padding: 20px 30px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #1c1c1c;
}
.active:after, .submenu-link:after {
  content: "\f107";
  font-family: "FontAwesome";
  color: inherit;
  margin-left: 10px;
}
.topmenu .active, .topmenu > li > a:hover, .submenu li a:hover {color: #ddbe86;}
.submenu {
  position: absolute;
  left: -1px;
  z-index: 5;
  width: 240px;
  border-bottom: 1px solid #ECF1F2;
  visibility: hidden;
  opacity: 0;  
  transform: translateY(10px);
  transition: .3s ease-in-out;
}
.submenu li {position: relative;}
.submenu a {
  background: white;
  border-top: 1px solid #ECF1F2;
  border-right: 1px solid #ECF1F2;
  border-left: 1px solid #ECF1F2;
  color: #1c1c1c;
  text-align: left;
  font-size: 14px;
  letter-spacing: 1px;
  padding: 10px 20px;
}
.submenu .submenu {
  position: absolute;
  top: 0;
  left: calc(100% - 1px);
  left: -webkit-calc(100% - 1px);
}
nav li:hover > .submenu {
  visibility: visible;
  opacity: 1;
  transform: translateY(0px);
}

Источник

 

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


Защитный код
Обновить

Поиск по сайту

Новейшее из новостей

Предыдущая Следующая

Конкурс персональных сайтов среди учител…

Конкурс персональных сайтов среди учителей БСОШ №1.

Admin - avatar Admin 11 Апр 2019 Просмотров:438 КОНКУРС САЙТОВ 2019

Подробнее

Видео для подготовки к ЕГЭ

Единый Государственный Экзамен по информатике и ИКТ в 2019 году Видео для подготовки к ЕГЭ:  При подготовке данного метериала были использованы ресурсы:  Информатика. Видеоуроки. Подготовка к ЕГЭ(Ч.1 и Ч.2). 

Admin - avatar Admin 26 Ноя 2018 Просмотров:285 'Подготовка к ЕГЭ (11 класс)

Подробнее

Задания на ЕГЭ в 2019 году

Единый Государственный Экзамен по информатике и ИКТ в 2019 году Задания по категориям:  При подготовке данного метериала были использованы ресурсы:  https://inf-ege.sdamgia.ru - РЕШУ ЕГЭ. Информатика. Видеоуроки. Подготовка к ЕГЭ(Ч.1 и Ч.2). 

Admin - avatar Admin 26 Ноя 2018 Просмотров:267 'Подготовка к ЕГЭ (11 класс)

Подробнее

Как узнать сколько знаков в тексте Word?

Как узнать сколько знаков в тексте Word?

Как узнать сколько знаков в тексте Word?   Когда требуется написание текста определенного объема, нужно периодически узнавать сколько знаков уже написано в текстовом документе Word. Многие пользователи не знают как это...

Admin - avatar Admin 07 Ноя 2018 Просмотров:983 КОМПЬЮТЕРы

Подробнее

Как в ворде вставить формулу суммы?

Как в ворде вставить формулу суммы?

Как в ворде вставить формулу суммы? Несмотря на то, что Microsoft Word является текстовым редактором таблицы в нем встречаются довольно часто. А таблицы, как правило, состоят из числовых значений, которые зачастую...

Admin - avatar Admin 07 Ноя 2018 Просмотров:1274 КОМПЬЮТЕРы

Подробнее

Супер хрустящие огурчики на зиму, которы…

Супер хрустящие огурчики на зиму, которые никогда не взрываются

Супер хрустящие огурчики на зиму, которые никогда не взрываются

Admin - avatar Admin 14 Авг 2018 Просмотров:1101 САДОГОРОД

Подробнее

Авторизация

НЕ безлимитный почтовый ящик, или Сказ про секретное ограничение Mail.ru

НЕ безлимитный почтовый ящик, или Сказ про секретное ограничение Mail.ru

Подробнее ...

Рейтинг@Mail.ru Яндекс.Метрика Рейтинг@Mail.ru