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

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

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

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

Печать

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

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 Просмотров:266 КОНКУРС САЙТОВ 2019

Подробнее

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

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

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

Подробнее

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

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

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

Подробнее

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

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

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

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

Подробнее

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

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

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

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

Подробнее

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

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

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

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

Подробнее

Авторизация

Русские народные игры - Малечена-калечена

Малечена-калечена

«Малечина-калечина»  – игра старинная. Играли в нее во время посиделок, долгими зимними вечерами, чтобы время скоротать, свою удаль показать! Правила очень просты: нужно поставить на раскрытую ладонь палочку (султанчик, обычный  карандаш) и стараться удержать как можно дольше. Зажимать пальцами нельзя! При этом произносят слова: «Малечена-калечина, сколь часов до вечера?» -  и начинают отсчет: «Раз, два, три…десять, одиннадцать..» — до тех пор, пока ребенок может удержать палочку на ладони.

Можно усложнить игру – держать палочку не на ладошке, а на пальце, ноге, колене и так далее.

Эта старинная русская народная игра – замечательный тренажёр для ребенка. Она развивает ловкость, крупную и мелкую моторику, координацию движений и чувство равновесия.   Очень хорошо проводить такую игру как конкурс. В нем одновременно могут участвовать от двух до пяти человек. Можно и больше, но «судье» будет сложно следить за соблюдением правил.

 

Подробнее ...
Варианты загрузки Mac

Варианты загрузки Mac

Большинство современных Mac поддерживают более 10 способов запуска системы. Чтобы попасть в любой из них, нужно зажать определенную кнопку или сочетание клавиш сразу после стартового звука при включении питания.

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

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


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