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

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

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

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

Печать

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

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);
}

Источник

 

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


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

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

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

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

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

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

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

Подробнее

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

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

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

Подробнее

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

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

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

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

Подробнее

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

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

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

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

Подробнее

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

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

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

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

Подробнее

Календарь грибника — когда какие грибы с…

Календарь грибника — когда какие грибы собирать

Календарь грибника — когда какие грибы собирать

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

Подробнее

Авторизация

Выбираем объектив к камере видеонаблюдения

Выбираем объектив к камере видеонаблюдения.

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

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

Школьное расписание


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