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

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

Ваш IP: 3.209.80.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 (Сентябрь 2019). БСОШ №1.

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

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

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

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

Единицы измерения информации

Единицы измерения информации 1 байт = 8 бит 1 килобайт (Кб) = 210 байт = 1024 байт = 213бит 1 мегабайт (Мб) = 210 Кб   = 1024 Кб   = 220 байт...

Гречухин Николай Викторович - avatar Гречухин Николай Викторович 08 Окт 2019 Просмотров:40 КОМПЬЮТЕРы

Подробнее

ПРОЕКТ ОГЭ по Информатике и ИКТ в 2020 г…

Демонстрационный вариант контрольных измерительных материалов для проведения в 2020 году основного государственного экзамена по ИНФОРМАТИКЕ Разбор заданий по информатике проекта на 2020 год от «ФЕДЕРАЛЬНОГО ИНСТИТУТА ПЕДАГОГИЧЕСКИХ ИЗМЕРЕНИЙ» С 2020 года меняется порядок и...

Гречухин Николай Викторович - avatar Гречухин Николай Викторович 10 Сен 2019 Просмотров:1263 ГИА и ЕГЭ

Подробнее

Выпуск №1 (Сентябрь 2019)

 ШКОЛЬНЫЙ ВЕСТНИК. Выпуск №1 (Сентябрь 2019). БСОШ №1.

Гречухин Николай Викторович - avatar Гречухин Николай Викторович 02 Сен 2019 Просмотров:165 ШКОЛЬНЫЙ ВЕСТНИК

Подробнее

Устали? Поиграйте в шахматы!

В НОВОМ ОКНЕ

Как уменьшить фотографию, изменить размер фото в Paint?
Как уменьшить фотографию, изменить размер фото в Paint?
Подробнее ...

Авторизация

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

Астрономическая конференция кружка «Зодиак»

Астрономическая  конференция кружка «Зодиак»

Астрономическая  конференция кружка «Зодиак».  

Admin 31 Мар 2014 Просмотров:7463 Новости БСОШ №1

Подробнее

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