Выпадающее меню на css адаптивное: Как сделать адаптивное выпадающее мега меню на CSS

Содержание

Как создать адаптивное выпадающее меню навигации с помощью CSS?

Из этого руководства вы узнаете, как с помощью CSS создать адаптивное выпадающее меню навигации. Для этого мы воспользуемся CSS flexbox и хаком с чек-боксами.

Верхняя панель навигации крайне важна для любого сайта. В этой статье описана одна из реализаций, которая адаптивна. А также не использует JavaScript для переключения выпадающего списка на мобильных устройствах.

Создайте пустой HTML-документ и назовите его index.html. Добавьте в него базовый HTML-код.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<body>
   
</body>
</html>

Я использовала шрифт Font Awesome для иконки меню. Поэтому добавьте приведенную далее строку кода ниже тега <title>.

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css" rel="stylesheet">

Создайте файл styles.css и подключите его в HTML-документе:

<link rel="stylesheet" href="styles.css">

Я использовал в качестве логотипа приведенное ниже изображение. Вы можете добавить свое собственное изображение.

Добавьте следующий HTML-код в тег <body>

<header>
   <div>
       <img src="logo.png" alt="Logo">
       <nav>
           <ul>
               <li><a href="#">Home</a></li>
               <li><a href="#">About</a></li>
               <li><a href="#">Services</a></li>
               <li><a href="#">Contact</a></li>
           </ul>
       </nav>
       <i></i>
   </div>
</header>

Элемент header формирует темную панель навигации, содержащую все остальное. Также у нас есть div menu-wrap, который является контейнером для логотипа, ссылок навигации и иконки меню.

В файл styles.css добавим несколько стилей для всех элементов:

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: sans-serif;
}

Затем примените эти стили к header.

header {
   height: 70px;
   background-color: #22292F;
   padding: 10px 0;
}

Теперь темная панель навигации растягивается на всю ширину окна просмотра.

Добавьте приведенные ниже стили к классу menu-wrap:

.menu-wrap {
   display: flex;
   justify-content: space-between;
   padding: 0 15px;
}

Мы используем display:flex, чтобы все дочерние элементы занимали свободное пространство, доступное горизонтально. Свойству justify-content установлено значение space-between, чтобы расположить эти элементы как можно дальше друг от друга.

Стилизуем каждый из этих дочерних элементов один за другим.

.logo-img {
   height: 50px;
}
.menu-icon {
   font-size: 2.4em;
   color: #ffffff;
   line-height: 50px;
}

В результате мы получили правильно позиционированные логотип и иконку нужного размера. Теперь нужно на мобильных устройствах абсолютно позиционировать все пункты меню ниже панели. Сначала добавьте следующий код:

nav {
   position: absolute;
   background-color: #3D4852;
   top:70px;
   left:0;
   width: 100%;
}

Теперь добавьте стили списка и ссылок:

nav ul {
   list-style-type: none;
}
nav ul li {
   padding: 0 15px;
}
nav ul li a {
   display: inline-block;
   padding: 12px;
   /* Добавьте ниже свои пользовательские стили, чтобы изменить отображение ссылок */
   color: #DAE1E7;
   text-decoration: none;
   letter-spacing: 0.05em;
}

Также добавьте для ссылок стили при наведении и фокуса:

nav ul li a:hover, nav ul li a:focus {
   color: #eb6f4a;
}

Теперь в браузере отображается следующее:

Меню должно быть сначала скрыто и отображаться при нажатии на иконку. Для этого добавьте к элементу nav ul дополнительные стили max-height, overflow, а также transition:

nav ul li a:hover, nav ul li a:focus {
   color: #eb6f4a;
}

Этот код скроет все меню, потому что для свойства max-height задано значение 0, а для свойства overflow:hidden. Мы не используем для скрытия меню display:none, потому что нам нужен эффект анимации скольжения меню вниз. Он может быть достигнут только с помощью свойства max-height.

Нам нужно переключить отображение меню, используя только CSS. Лучший способ сделать это – использовать скрытый чекбокса.

Мы используем иконку гамбургера в качестве метки для этого чекбокса. После нажатия метки чекбокс будет выбран. Поэтому мы можем использовать селектор псевдокласса :checked, чтобы отобразить меню!

В файле index.html добавьте элемент checkbox перед элементом nav:

<input type="checkbox">

В этом коде for=”checkbox” обеспечивает, чтобы чекбокс был установлен / снят при каждом нажатии на эту метку.

Сначала нужно скрыть чекбокс. Для этого в файл styles.css добавьте следующий код:

#checkbox {
   display: none;
}

Это сердце кода:

#checkbox:checked ~ nav ul {
   max-height: 200px;
   padding: 15px 0;
   transition: all 0.5s;
}

Символ ~ является общим селектором следующего смежного элемента, который отделяет два селектора (#checkbox:checked и nav ul). А также соответствует второму элементу, только если он следует за первым. Когда чекбокс установлен, меню сдвигается вниз, потому что значение свойства max-height изменяется от 0 до большого числа.

Иконка гамбургера не должна отображаться на больших экранах, на которых достаточно места для вывода ссылок.

Поэтому добавим несколько медиазапросов для размеров экрана планшета и больше, чтобы отобразить непосредственно ссылки вместо иконки меню. В файл styles.css добавьте приведенный ниже медиа-запрос.

@media (min-width: 768px) {
}

В нем сначала спрячьте иконку меню.

@media (min-width: 768px) {
  .menu-icon {
     display: none;
  }
}

Обязательно увеличьте размер окна браузера до ширины, превышающей 768 пикселей, чтобы увидеть следующие изменения.

Теперь добавьте стили, чтобы позиционировать элемент nav относительно и изменить цвет его фона. Затем добавьте display:inline-flex для nav ul li, чтобы разместить ссылки рядом друг с другом.

@media (min-width: 768px) {
  nav {
    position: relative;
    top:-10px;
    background-color: transparent;
  }
  nav ul {
    max-height: 70px;
    padding: 15px 0;
    text-align: right;
  }
  nav ul li {
    display: inline-flex;
    padding-left: 20px;
  }
}

Теперь вы знаете, как создать адаптивное выпадающее меню навигации, которое отображает пункты на навигационной панели для больших экранов. Но при этом отображает иконку гамбургера для небольших экранов.

СКАЧАТЬ ИСХОДНЫЙ КОД

Пожалуйста, оставляйте свои отзывы по текущей теме статьи. За комментарии, лайки, отклики, подписки, дизлайки огромное вам спасибо!

Данная публикация является переводом статьи «How To Create a Responsive Dropdown Navigation Using Only CSS» , подготовленная редакцией проекта.

Как создать адаптивное выпадающее меню навигации с помощью CSS?

Создайте пустой HTML-документ и назовите его index.html. Добавьте в него базовый HTML-код.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<body>
   
</body>
</html>

Я использовала шрифт Font Awesome для иконки меню. Поэтому добавьте приведенную далее строку кода ниже тега <title>.

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css" rel="stylesheet">

Создайте файл styles.css и подключите его в HTML-документе:

<link rel="stylesheet" href="styles.css">

Добавьте следующий HTML-код в тег <body>

<header>
   <div>
       <img src="logo.png" alt="Logo">
       <nav>
           <ul>
               <li><a href="#">Home</a></li>
               <li><a href="#">About</a></li>
               <li><a href="#">Services</a></li>
               <li><a href="#">Contact</a></li>
           </ul>
       </nav>
       <i></i>
   </div>
</header>

В файл styles.css добавим несколько стилей для всех элементов:

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: sans-serif;
}

Затем примените эти стили к header.

header {
   height: 70px;
   background-color: #22292F;
   padding: 10px 0;
}

Теперь темная панель навигации растягивается на всю ширину окна просмотра.

Добавьте приведенные ниже стили к классу menu-wrap:

.menu-wrap {
   display: flex;
   justify-content: space-between;
   padding: 0 15px;
}

Стилизуем каждый из этих дочерних элементов один за другим.

.logo-img {
   height: 50px;
}
.menu-icon {
   font-size: 2.4em;
   color: #ffffff;
   line-height: 50px;
}

nav {
   position: absolute;
   background-color: #3D4852;
   top:70px;
   left:0;
   width: 100%;
}

Теперь добавьте стили списка и ссылок:

nav ul {
   list-style-type: none;
}
nav ul li {
   padding: 0 15px;
}
nav ul li a {
   display: inline-block;
   padding: 12px;
   /* Добавьте ниже свои пользовательские стили, чтобы изменить отображение ссылок */
   color: #DAE1E7;
   text-decoration: none;
   letter-spacing: 0.05em;
}

Также добавьте для ссылок стили при наведении и фокуса:

nav ul li a:hover, nav ul li a:focus {
   color: #eb6f4a;
}

Теперь в браузере отображается следующее:

nav ul li a:hover, nav ul li a:focus {
   color: #eb6f4a;
}

В файле index.html добавьте элемент checkbox перед элементом nav:

<input type="checkbox">

В этом коде for=”checkbox” обеспечивает, чтобы чекбокс был установлен / снят при каждом нажатии на эту метку.

Сначала нужно скрыть чекбокс. Для этого в файл styles.css добавьте следующий код:

#checkbox {
   display: none;
}

Это сердце кода:

#checkbox:checked ~ nav ul {
   max-height: 200px;
   padding: 15px 0;
   transition: all 0.5s;
}

Иконка гамбургера не должна отображаться на больших экранах, на которых достаточно места для вывода ссылок.

@media (min-width: 768px) {
}

В нем сначала спрячьте иконку меню.

@media (min-width: 768px) {
  .menu-icon {
     display: none;
  }
}

@media (min-width: 768px) {
  nav {
    position: relative;
    top:-10px;
    background-color: transparent;
  }
  nav ul {
    max-height: 70px;
    padding: 15px 0;
    text-align: right;
  }
  nav ul li {
    display: inline-flex;
    padding-left: 20px;
  }
}

СКАЧАТЬ ИСХОДНЫЙ КОД

Как создать адаптивное выпадающее меню навигации с помощью CSS?

Создайте пустой HTML-документ и назовите его index.html. Добавьте в него базовый HTML-код.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<body>
   
</body>
</html>

Я использовала шрифт Font Awesome для иконки меню. Поэтому добавьте приведенную далее строку кода ниже тега <title>.

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css" rel="stylesheet">

Создайте файл styles.css и подключите его в HTML-документе:

<link rel="stylesheet" href="styles.css">

Добавьте следующий HTML-код в тег <body>

<header>
   <div>
       <img src="logo.png" alt="Logo">
       <nav>
           <ul>
               <li><a href="#">Home</a></li>
               <li><a href="#">About</a></li>
               <li><a href="#">Services</a></li>
               <li><a href="#">Contact</a></li>
           </ul>
       </nav>
       <i></i>
   </div>
</header>

В файл styles.css добавим несколько стилей для всех элементов:

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: sans-serif;
}

Затем примените эти стили к header.

header {
   height: 70px;
   background-color: #22292F;
   padding: 10px 0;
}

Теперь темная панель навигации растягивается на всю ширину окна просмотра.

Добавьте приведенные ниже стили к классу menu-wrap:

.menu-wrap {
   display: flex;
   justify-content: space-between;
   padding: 0 15px;
}

Стилизуем каждый из этих дочерних элементов один за другим.

.logo-img {
   height: 50px;
}
.menu-icon {
   font-size: 2.4em;
   color: #ffffff;
   line-height: 50px;
}

nav {
   position: absolute;
   background-color: #3D4852;
   top:70px;
   left:0;
   width: 100%;
}

Теперь добавьте стили списка и ссылок:

nav ul {
   list-style-type: none;
}
nav ul li {
   padding: 0 15px;
}
nav ul li a {
   display: inline-block;
   padding: 12px;
   /* Добавьте ниже свои пользовательские стили, чтобы изменить отображение ссылок */
   color: #DAE1E7;
   text-decoration: none;
   letter-spacing: 0.05em;
}

Также добавьте для ссылок стили при наведении и фокуса:

nav ul li a:hover, nav ul li a:focus {
   color: #eb6f4a;
}

Теперь в браузере отображается следующее:

nav ul li a:hover, nav ul li a:focus {
   color: #eb6f4a;
}

В файле index.html добавьте элемент checkbox перед элементом nav:

<input type="checkbox">

В этом коде for=”checkbox” обеспечивает, чтобы чекбокс был установлен / снят при каждом нажатии на эту метку.

Сначала нужно скрыть чекбокс. Для этого в файл styles.css добавьте следующий код:

#checkbox {
   display: none;
}

Это сердце кода:

#checkbox:checked ~ nav ul {
   max-height: 200px;
   padding: 15px 0;
   transition: all 0.5s;
}

Иконка гамбургера не должна отображаться на больших экранах, на которых достаточно места для вывода ссылок.

@media (min-width: 768px) {
}

В нем сначала спрячьте иконку меню.

@media (min-width: 768px) {
  .menu-icon {
     display: none;
  }
}

@media (min-width: 768px) {
  nav {
    position: relative;
    top:-10px;
    background-color: transparent;
  }
  nav ul {
    max-height: 70px;
    padding: 15px 0;
    text-align: right;
  }
  nav ul li {
    display: inline-flex;
    padding-left: 20px;
  }
}

СКАЧАТЬ ИСХОДНЫЙ КОД

Решения для адаптивных многоуровневых выпадающих меню на основе CSS без зависимостей JS?

Я смотрел на доступные отзывчивые выпадающие меню/навигационные панели, но, похоже, ничего не работает правильно. В первую очередь мне нужно меню на основе CSS, которое не полагается на JavaScript Хака.

Почему бы не использовать решения на основе JS? JS не работают на прокси-браузерах, таких как Opera Mini, большинство нашей аудитории использует их, а браузеры Blackberry не показывают такой хорошей работы с JS.

Многие люди выступают за использование избранных меню для мобильной навигации. Интересное решение, но оно опять же зависит от JS и очень утомительно для вложенных многоуровневых меню.

Итак, с какими навигационными системами вы столкнулись, которые могли бы работать для вас?

css

navigation

Поделиться

Источник

bcosynot

26 сентября 2012 в 07:59

6 ответов

Для многоуровневого выпадающего меню со скриптом out java я создаю пример здесь .

HTML:

<ul>
    <li>
        Menu 1
        <ul>
            <li>Menu 1.1</li>
            <li>
                Menu 1.2
                <ul>
                    <li>Menu 1.2.1</li>
                    <li>
                        Menu 1.2.2
                        <ul>
                            <li>Menu 1.2.2.1</li>
                            <li>Menu 1.2.2.2</li>
                        </ul>
                    </li>
                    <li>Menu 1.2.3</li>
                    <li>Menu 1.2.4</li>
                </ul>
            </li>
            <li>Menu 1.3</li>
        </ul>
    </li>
    <li>Menu 1</li>
    <li>Menu 1</li>
    <li>Menu 1</li>
    <li>Menu 1</li>
</ul>

CSS:

ul{
}
ul li{
    display:inline-block;
    position:relative;
}
ul li> ul{
    display:none;
    position:absolute;
    left:95%;
    top:15px;
}
ul li> ul li{
    display:block;
}
ul li:hover> ul{
    display:block;
}

Поделиться

sureshunivers

03 октября 2012 в 09:53

Я собираюсь сразу сказать, что это решение/шаблон не является выпадающим решением. Но это очень классный способ переосмыслить навигацию для адаптивного дизайна. Я также не знаю в полной мере ваших потребностей в навигации, так что это может быть недостаточно сложным для вас.

Взгляните на содержание сайта журнала: http://contentsmagazine.com/

Обратите внимание на основную навигацию под логотипом. При просмотре в меньшем окне просмотра (измените размер браузера) вы увидите ссылку ‘explore’. Эта ссылка, если ее нажать, приведет вас к навигации.

Вот в чем дело: это всего лишь простая якорная ссылка .

Шаблон таков: с точки зрения порядка источника страницы, ваша навигация на самом деле находится в нижней части страницы. (И с точки зрения семантики это имеет большой смысл для boot.) В верхней части страницы есть простая якорная ссылка, которая переходит к навигации (что также является лучшей практикой для обеспечения доступности).

Итак, думая о мобильном устройстве, сначала страница загружается с навигацией в нижней части страницы, но пользователь может нажать на якорную ссылку, чтобы перейти к ней. Поскольку это якорное звено, прыжок происходит мгновенно, и на самом деле это почти похоже на падение вниз .

Затем, по мере увеличения окна просмотра, используя только CSS , навигация перемещается (во всяком случае, презентационно) в верхнюю часть страницы и располагается под логотипом. Это достигается с помощью простого абсолютного позиционирования.

Поделиться

chipcullen

02 октября 2012 в 13:58

Каково обоснование выбора полного меню на основе CSS и меню на основе Javascript/CSS?
Какие пункты вы подтверждаете при рассмотрении нового меню для вашего сайта? Почему я должен выбрать полное меню на основе CSS? Почему я должен выбрать меню на основе Javascript/CSS ? какая выгода в выборе любого из них? Является ли CSS меню старым ? или он ограничен в возможностях! Я не думаю,…
Коды выпадающего меню JS & CSS, влияющие на полные коды веб-сайтов
Я использую несколько выпадающих меню colomn, которые имеют JS и css и эти скрипты. Когда я установил это меню, все на моем сайте изменилось. Я знаю это только из-за сценариев. Размер всех кнопок увеличивается, размер всего текста увеличивается, какой-то предыдущий скрипт java не работает….

У вас есть только один вариант для выпадающего меню pure-CSS, которое работает с устройствами iOS: используйте теги привязки и переключайте display: none/block ( короткая статья о поведении iOS Safari при наведении ).

HTML :

<ul>
    <li><a href="#">Menu Item 1</a>
         <ul>
             <li>SubLink1.1</li>
             <li>SubLink1.2</li>
             <li>SubLink1.3</li>
             <li>SubLink1.4</li>
         </ul>
    </li>
    <li><a href="#">Menu Item 2</a>
         <ul>
             <li>SubLink2.1</li>
             <li>SubLink2.2</li>
             <li><a href="#">SubMenu3 &gt;&gt;</a>
                 <ul>
                     <li><a href="#">Nested Link 2.3.1 &gt;&gt;</a>
                     <ul>
                         <li>Nested Link 2.3.1.1</li>
                         <li>Nested Link 2.3.1.2</li>
                     </ul>
                     </li>
                     <li>Nested Link 2.3.2</li>
                 </ul>
             </li>
         </ul>
    </li>
    <li><a href="#">Menu Item 3</a>
         <ul>
             <li><a href="#">SubMenu3.1 &gt;&gt;</a>
                 <ul>
                     <li>Nested Link 3.1.1</li>
                     <li>Nested Link 3.1.2</li>
                     <li>Nested Link 3.1.3</li>
                     <li>Nested Link 3.1.4</li>
                     <li>Nested Link 3.1.5</li>
                     <li>Nested Link 3.1.6</li>
                 </ul>
             </li>
             <li>SubMenu3.2</li>
         </ul>
    </li>
</ul>

CSS :

li>ul { display: none; }
li:hover>ul{
    display: block;
}

Я проверил это на iPhone 4 iOS6, и он отлично работает. Также тестировался на Kindle Fire. У меня нет доступа к телефону android для тестирования, поэтому вы хотите проверить эти устройства.

JS Fiddle: http://jsfiddle.net/aGYnU/2/

Сделать его отзывчивым :

Поиграйте немного со стилями. Измените положение. Используйте значения em или percentage% для измерений. Возможно, вам также потребуется использовать значения em для размеров шрифтов в меню (или запросы media для установки размера шрифта на основе размера окна просмотра).

Функциональность должна продолжать работать.

Поделиться

Chi-chi

06 октября 2012 в 07:55

Я тоже пытался решить эту проблему. И я не думаю, что решение, которое покрывает все мои потребности, вообще возможно. Но это, вероятно, будет достаточно хорошо для большинства людей: http://jsfiddle.net/selfthinker/T7dDm/

HTML:

<ul>
  <li><span>Menu</span>
    <ul>
      <li><a href="#">Menu item</a></li>
      <li><a href="#">Another menu item</a></li>
    </ul>
  </li>
</ul>

CSS:

li.dropdown > span {
    cursor: pointer;
    /* style the "Menu" to make it appear clickable (e.g. replace it with a house icon?) */
    font-size: 2em;
    font-weight: bold;
    color: #00c;
}
li.dropdown {
    position: relative;
}
li.dropdown:hover > ul,
li.dropdown:active > ul,
li.dropdown:focus > ul {
    display: block;
}
li.dropdown > ul {
    display: none;
    position: absolute;
    top: 1.5em;
    left: 0;
    /* and style away: */
    background-color: #ccc;
    font-size: 1.5em;
}

Я протестировал это на новых iPad в Safari и Opera Mini, на Android (2.2.2, HTC Desire) в обычном браузере и Opera Mini и на нескольких настольных браузерах. И это в основном работает везде. Это оставшиеся вопросы :

Это недоступно с клавиатуры, т. Е. вы не можете переходить по пунктам меню. Вы можете сделать так, чтобы само выпадающее меню отображалось на вкладках, но я не знаю способа (без JavaScript), который позволяет вам получить доступ к элементам внутри. Это самая большая проблема для меня.
В Safari на iPad и всех Opera мини меню больше не закроется, как только вы нажмете на него. Вам нужно либо перезагрузить компьютер, либо перейти по ссылке. (В браузере Android вы можете закрыть меню, просто нажав в любом другом месте экрана.) Может быть, есть решение этой проблемы?
В Opera Mini вся страница перезагружается после нажатия на триггер меню, но после этого меню отображается нормально.

Поделиться

selfthinker

08 октября 2012 в 12:02

Мобильные браузеры часто показывают/скрывают любой контент :наведите курсор при нажатии, если не ссылку. Используйте этот код:

HTML:

<ul>
<li>I am visible, and can be tapped/hovered.
     <ul>
          <li>Menu item 1</li>
          <li>Menu item 2</li>
     </ul>
</li>
</ul>

CSS: (без укладки)

#showhide{
     position:relative;
}
#menu{
     position: absolute;
     left: -999px
}
#showhide :hover #menu{
     left: 0px;
}

Смотрите, это JSFiddle: http://jsfiddle.net/VVqBU/

Поделиться

Mooseman

02 октября 2012 в 13:57

Сделал пример с дивами и якорями. Надеюсь, это поможет!

http://jsfiddle.net/UufP5/9/

html :

 <div>
<div>
    <div>
        menu 1
    </div>
    <div>
        <a href="#">submenu1</a>
        <a href="#">submenu2</a>
        <a href="#">submenu3</a>
        <a href="#">submenu4</a>
        <a href="#">submenu5</a>
        <a href="#">submenu6</a>
    </div>
</div>
<div>
    <div>
        menu 2
    </div>
    <div>
        <a href="#">submenu1</a>
        <a href="#">submenu2</a>
        <a href="#">submenu3</a>
        <a href="#">submenu4</a>
    </div>                
</div>
<div>
    <div>
        menu 3
    </div>
    <div>
        <a href="#">submenu1</a>
    </div>           
</div>

css:

 .mymenu{
font-size: 18px;
position:absolute;
z-index:1;
}
.menu{
    background: #222;
    color: #f9f9f9;
    height: 1em;
    overflow:hidden;
    display:inline-block;
    float:left;
    padding: 0.3em;
}

.menu:hover{
    height: auto;
}

.menu a{
    display:block;
    color: #abc;
}

Поделиться

OctoD

09 октября 2012 в 09:43

Адаптивное многоуровневое меню

Сегодня мы хотим поделиться с вами экспериментальным выпадающим меню. Основная идея состоит в том, чтобы сэкономить место на странице для меню, которое имеет много пунктов и вложенных уровней. Каждый под-уровень в этом меню будет показан в своем собственном блоке, при этом «родительский» уровень будет исчезать. Это будет реализовано при помощи css-анимации. Меню будет «резиновым», таким образом оно может быть легко использовано в адаптивных шаблонах.

Пожалуйста, обратите внимание: это меню будет корректно работать только в браузерах, которые поддерживают соответствующие свойства CSS.

Структура меню представляет собой неупорядоченный список, который может иметь произвольное количество вложенных списков:

<div>
<button>Открыть меню</button>
<ul>
<li>
<a href=»#»>Пункт 1</a>
<ul>
<li><a href=»#»>back</a></li>
<li><a href=»#»>Подпункт 1</a></li>
<li><a href=»#»>Подпункт 2</a></li>
<li><a href=»#»>Подпункт 3</a></li>
<li>
<a href=»#»>Подпункт 4</a>
<ul>
<li><a href=»#»>back</a></li>
<li><a href=»#»>Подподпункт 1</a></li>
<li><a href=»#»>Подподпункт 2</a></li>
<li><a href=»#»>Подподпункт 3</a></li>
</ul>
</li>
<li><!— … —></li>
<!— … —>
</ul>
</li>
<li><!— … —></li>
<li><!— … —></li>
<!— … —>
</ul>
</div><!— /dl-menuwrapper —>

Анимация определеятся для соответствующих классов:

.dl-menu.dl-animate-out-1 {
animation: MenuAnimOut1 0.4s linear forwards;
}

@keyframes MenuAnimOut1 {
50% {
transform: translateZ(-250px) rotateY(30deg);
}
75% {
transform: translateZ(-372.5px) rotateY(15deg);
opacity: .5;
}
100% {
transform: translateZ(-500px) rotateY(0deg);
opacity: 0;
}
}

.dl-menu.dl-animate-in-1 {
animation: MenuAnimIn1 0.3s linear forwards;
}

@keyframes MenuAnimIn1 {
0% {
transform: translateZ(-500px) rotateY(0deg);
opacity: 0;
}
20% {
transform: translateZ(-250px) rotateY(30deg);
opacity: 0.5;
}
100% {
transform: translateZ(0px) rotateY(0deg);
opacity: 1;
}
}

А плагин называется следующим образом:

$( ‘#dl-menu’ ).dlmenu({
animationClasses : { in : ‘animation-class-name’, out : ‘animation-class-name’ }
});

Мы надеемся, что вам нравится этот небольшой эксперимент и Вы найдете его полезным для себя!

Демонстрация

Скачать исходные файлы

Перевод статьи с http://tympanus.net

Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом

You have no rights to post comments

Адаптивное мега-меню на jQuery

.menu-container {

width: 100%;

margin: 20px auto;

background: #337AB7;

}

.menu-mobile:after {

content: «\f0c9»;

font-family: «FontAwesome»;

font-size: 38px;

line-height: 38px;

padding: 0;

color: #FFF;

float: right;

position: relative;

transform: translateY(-25%);

}

.menu-dropdown-icon:before {

content: «\f078»;

font-family: «FontAwesome»;

display: none;

cursor: pointer;

float: right;

padding: 10px 20px;

margin: 10px;

background: #337AB7;

color: #FFF;

font-size: 20px;

}

.menu > ul {

margin: 0 auto;

width: 100%;

list-style: none;

padding: 0;

position: relative;

box-sizing: border-box;

}

.menu > ul:before,

.menu > ul:after {

content: «»;

display: table;

}

.menu > ul:after {

clear: both;

}

.menu > ul > li {

float: left;

background: #337AB7;

padding: 0;

margin: 0;

transition: .2s ease-in-out;

}

.menu > ul > li a,

.menu-mobile {

text-decoration: none;

padding: 20px 30px;

display: block;

color: #FFF;

font-size: 20px;

line-height: 20px;

font-family: ‘Roboto Condensed’, sans-serif;

transition: .2s ease-in-out;

}

.menu-mobile {

display: none;

}

.menu > ul > li:hover {

background: #BFE2FF;

}

.menu > ul > li:hover a {

color: #000;

}

.menu > ul > li > ul {

display: none;

width: 100%;

background: #BFE2FF;

padding: 20px;

position: absolute;

z-index: 99;

left: 0;

margin: 0;

list-style: none;

box-sizing: border-box;

}

.menu > ul > li > ul:before,

.menu > ul > li > ul:after {

content: «»;

display: table;

}

.menu > ul > li > ul:after {

clear: both;

}

.menu > ul > li > ul > li {

margin: 0;

padding-bottom: 0;

list-style: none;

width: 25%;

background: none;

float: left;

}

.menu > ul > li > ul > li a {

padding: 10px;

display: block;

border-bottom: 1px solid #337AB7;

}

.menu > ul > li > ul > li a:hover {

color: #337AB7;

border-bottom: 1px solid #000;

}

.menu > ul > li > ul > li > ul {

display: block;

padding: 0;

margin: 10px 0 0;

list-style: none;

box-sizing: border-box;

}

.menu > ul > li > ul > li > ul:before,

.menu > ul > li > ul > li > ul:after {

content: «»;

display: table;

}

.menu > ul > li > ul > li > ul:after {

clear: both;

}

.menu > ul > li > ul > li > ul > li {

float: left;

width: 100%;

margin: 0;

}

.menu > ul > li > ul > li > ul > li a {

border: 0;

padding: 10px 12px;

font-size: 18px;

}

.menu > ul > li > ul > li > ul > li a:hover {

border: 0;

}

.menu > ul > li > ul.normal-sub {

width: 300px;

left: auto;

padding: 20px;

}

.menu > ul > li > ul.normal-sub > li {

width: 100%;

}

.menu > ul > li > ul.normal-sub > li a {

border: 0;

padding: 10px;

}

@media only screen and (max-width: 768px) {

.menu-container {

width: 100%;

}

.menu-mobile {

display: block;

}

.menu-dropdown-icon:before {

display: block;

}

.menu > ul {

display: none;

}

.menu > ul > li {

width: 100%;

float: none;

display: block;

background: #BFE2FF;

border-top: 2px solid #FFF;

border-bottom: 2px solid #FFF;

}

.menu > ul > li a {

padding: 20px;

width: 100%;

display: block;

color: #000;

}

.menu > ul > li > ul {

position: relative;

}

.menu > ul > li > ul.normal-sub {

width: 100%;

}

.menu > ul > li > ul > li {

float: none;

width: 100%;

}

.menu > ul > li > ul:not(.normal-sub) > li {

margin-top: 20px;

}

.menu > ul > li > ul > li:first-child {

margin: 0;

}

.menu > ul > li > ul > li > ul {

position: relative;

}

.menu > ul > li > ul > li > ul > li {

float: none;

}

.menu .show-on-mobile {

display: block;

}

Горизонтальное выпадающее меню CSS: особенности, пошаговая инструкция

Меню – это тот элемент, с которым пользователь встречается при входе на сайт и видит его, перемещаясь по страницам. Главное меню располагается в шапке сайта, а дополнительное – в нижнем блоке страницы. Там содержится полезная или второстепенная информация, которая для удобства часто оформляется в виде меню. Зачастую на всех страницах сайта используется одинаковое оформление навигационного элемента.

Когда какие-то пункты содержат дополнительные разделы, создается несколько уровней. Это работает так: при наведении мыши на одну из секций появляется дополнительный список с подразделами. При разработке необходимо позаботиться, чтобы при просмотре страницы на маленьких экранах появлялось адаптивное меню вместо обычного.

HTML-разметка

Перед тем, как сверстать адаптивное выпадающее меню на CSS, нужно создать скелет. Задается с помощью языка разметки HTML и находится в файле с расширением .html. Начинается с <!DOCTYPE>, затем обозначается начало и конец документа тегами <html> и </html> соответственно. Внутри документа задается тег head, где указывается мета-информация о сайте:

заголовок документа;
краткое описание;
кодировка;
файлы со стилями и скриптами.

После закрывающегося тега </head> следует тело документа, оформленное как <body>. Здесь находятся логические блоки сайта, они интерпретируются браузером и выводятся на экран в виде визуальных элементов.

Базовая разметка обычно состоит из тегов ul и li. Это семантически верное оформление, которое связано с тем, что при просмотре в браузерах, которые не поддерживают CSS, анализатор контента правильно опознает этот блок. Хотя использование стандартных div-ов также широко распространено.

Простая разметка меню без скрытых элементов и выпадающего меню на CSS выглядит таким образом:

<ul>

<li><a>Главная</a></li>

<li><a>История</a></li>

<li><a>О нас 3</a></li>

<li><a>Контакты 3</a></li>

</ul>

В теге <a> указываются ссылки на страницы, а во всех остальных – используемые селекторы.

Базовые стили

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

То, что здесь будет находиться, зависит исключительно от дизайна. Есть несколько основных моментов, которые следует разобрать. Поскольку создается меню, маркеры списка не должны отображаться. Они убираются с помощью атрибута list-style: none. Немаловажной частью является устранение подчеркивания ссылок. Для этого селекторы, которые отвечают за оформления тега <a>, должны содержать text-decoration: none.

Необходимо назначить действия при наведении мыши на кнопки. Для чего используется псевдокласс :hover? Используя его, пользователь видит, как меняется цвет пунктов или появляется выпадающий список меню на HTML CSS. Для скрытия некоторых элементов применяется display: none, а для появления – display: block или display: inline.

Горизонтальное размещение через float

После базового оформления пользователь заметит, что полученная структура – это вертикальное меню с выпадающим списком на HTML CSS. Для некоторых сайтов приемлемо расположение вертикального меню, но, как правило, используется горизонтальное.

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

Горизонтальное размещение через inline-block

По умолчанию блоки, которые задаются тегом div, выравниваются по вертикали. Ширина каждого занимает всю страницу, а при создании сестринского элемента он будет следовать вниз, начиная от предыдущего.

Когда нужно скрыть, используется display: none. Это понадобится для появления скрытых частей меню при наведении курсора мыши. Важно отметить, что блок не просто становится прозрачным, – видимые части сайта занимают его место.

Чтобы разместить дивы горизонтально друг за другом, необходимо использовать свойство inline или inline-block. Что касается последнего, его применение имеет больше преимуществ, ведь содержит свойства как строчного элемента, так и блочного.

Свойство display используется для div-ов и тегов li списка ul.

Таким образом, чтобы создать горизонтальное выпадающее меню на HTML CSS в файле стилей в селекторах li или div, указывается атрибут display со значением inline-block.

Создание выпадающих элементов

Выпадающие элементы изначально не видны на странице, они имеют свойство display: none. Позже none меняется на block или inline-block. Это происходит при клике на один из пунктов меню или во время наведения мыши. Для создания этого эффекта и связанных анимационных переходов, используется CSS.

Должно выглядеть примерно так:

#menu ul li {

position:absolute;

display: none;

}

#menu li:hover ul {

display:inline-block;

}

Следует обратить внимание на атрибут position, с помощью которого устанавливается позиционирование элемента. Блок div при заданном значении absolute отображается над другими блоками. А отсчет координат начинается от левого верхнего края родительского элемента. В данном случае родителем считается document. Это нужно изменить и сделать родителем #menu, задать position: relative. Теперь в #menu ul нужно указать координаты left и top, чтобы выпадающий список появлялся прямо под основным пунктом и не перекрывал его.

Если рядом находится несколько абсолютных блоков, надо использовать свойство z-index. При рассмотрении двух дивов с абсолютным позиционированием, когда один находится поверх другого, z-index первого должен иметь значение выше, чем у второго.

Адаптивность

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

Чтобы работать с этим атрибутом, нужно задать начальную ширину блока на большом экране свойством max-width: 100%. Уменьшая экран, происходят изменения с блоком:

@media (min-width: 768px) {

.container-small {

//меняем ширину пунктов меню, выводим иконку гамбургера

}

Эта иконка меню играет важную роль в создании адаптивного многоуровневого выпадающего горизонтального меню на CSS. Представляет собой три находящихся параллельно друг другу горизонтальные линии. Когда пользователь нажимает на них, появляются скрытые части альтернативного меню.

Использование Bootstrap

С появлением фреймворка Bootstrap верстальщикам стало намного легче создавать адаптивные элементы и строить сайт. Он позволяет прототипировать идеи с помощью готовых компонентов и мощных плагинов. Для использования базовых возможностей нужно включить скомпилированные стили Bootstrap из CDN в head сайта. Должно выглядеть так:

Для создания горизонтального меню с выпадающим списком на CSS используется компонент Navbar. Его нужно скопировать с официального сайта. По умолчанию он имеет два режима отображения: десктопный и мобильный.

Теперь осталось добавить оформление, чтобы выглядело так, как того требует дизайн.

Другой способ создания адаптивных элементов – использование Grid системы. Ее отличие от Bootstrap в том, что можно указать любое количество колонок и сделать их разной ширины.

UberMenu

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

UberMenu – это горизонтальное меню с выпадающим списком HTML CSS, разработанное под движок WordPress. Его возможности:

адаптивность;
выпадающее меню;
поддержка сенсора;
работа из коробки;
гибкие настройки;
большой список анимационных переходов;
наличие фильтров сортировок;
автоматическая интеграция в любую тему WordPress.

Есть бесплатная и платная версия с полным функционалом стоимостью 19 долларов.

Удобство использования готовых плагинов для создания выпадающее меню на CSS в том, что все браузеры будут одинаково отображать содержимое веб-страницы. Есть одна неприятная особенность – UberMenu не умеет работать с браузером IE6. Но это не страшно, ведь сегодня среда распространения «Интернет Эксплорера» составляет менее 1%.

Max Mega Menu

«Макс Мега Меню» – это отличное решение для создания выпадающего меню на CSS. Оно поддерживает возможность расположения меню в хедере и футере. С ним легко работать, он поддерживает функцию drag-and-drop. Все, что необходимо сделать для размещения кнопок меню, – мышью перенести соответствующие элементы на выбранное место.

Можно назначить любые способы, чтобы появилось скрытое субменю: навести курсор мыши на элемент или кликнув по нему. Существует много анимационных эффектов: постепенное исчезание, появление, выезжание.

Этот плагин достаточно легкий, файл javascript весит менее 2 килобайт. При создании можно использовать встроенные шрифты, иконки. Если появляются проблемы с использованием, можно ознакомиться с соответствующими мануалами.

Для начала работы достаточно добавить его в список плагинов WP.

JQuery Accordion Menu Widget

Для создания выпадающее меню на CSS можно использовать плагин JQuery Accordion Menu Widget. Он доступен для скачивания из репозитория WordPress или с официального сайта. Работает с последними версиями CMS, совместим с другими плагинами.

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

При самостоятельном создании меню пользователь встречал ситуацию, когда элементы сразу реагируют даже при случайном наведении мыши или щелчке. Чтобы избежать такого неудобства, встроена задержка hover delay. Другая полезная функция – управление скоростью появления и скрытия подменю.

Заключение

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

Можно воспользоваться готовыми вариантами, если не предусмотрены какие-то уникальные дизайнерские решения. Плагины легко подключаются к странице, их очень просто править в соответствии с требованиями.

Если есть смысл разрабатывать меню с нуля, конечно, это необходимо делать самостоятельно. При работе с фреймворками используются готовые компоненты, они сразу адаптивны. Отсутствие необходимости подстройки верстки под маленькие экраны сильно экономит время.

Адаптивное одноуровневое раскрывающееся меню с JavaScript

Последнее обновление

Автор:	syahrizaldev
Просмотров Всего:	2738 просмотров
Официальная страница:	Перейти на сайт
15 апреля 2021 г.
Лицензия:	MIT

Предварительный просмотр:

Описание:

Еще одна гибкая одноуровневая раскрывающаяся навигация, которая отлично работает как на настольных компьютерах, так и на мобильных устройствах.

В мобильном представлении вы увидите, что раскрывающееся меню свернуто в кнопку гамбургера, которая позволяет посетителю переключать навигацию так же, как меню вне холста.

Как использовать:

1. В раскрывающемся меню требуются ионные значки для значков развертывания / свертывания / гамбургера.

2. Закодируйте HTML-код для раскрывающегося меню.

 <заголовок>
  
    <раздел>
       
 Бренд  
      
       
      
        
        
            На главную  
            О компании  
          
             Услуги   
            
                Веб-дизайн  
                Веб-разработка  
                Маркетинг бренда  
                SEO и оптимизация  
            
          
          
             Планирование   
            
                Базовый план  
                Стандартный план  
                Премиум-план  
                Профессиональный план  
            
          
          
             Статья   
            
                Статья первая  
                Статья вторая  
                Статья третья  
            
          
            Связаться

Как создать адаптивное выпадающее меню навигации с помощью CSS?

Как создать адаптивное выпадающее меню навигации с помощью CSS?

Как создать адаптивное выпадающее меню навигации с помощью CSS?

Решения для адаптивных многоуровневых выпадающих меню на основе CSS без зависимостей JS?

6 ответов

Похожие вопросы:

Адаптивное многоуровневое меню

Демонстрация

Адаптивное мега-меню на jQuery

Горизонтальное выпадающее меню CSS: особенности, пошаговая инструкция

HTML-разметка

Базовые стили

Горизонтальное размещение через float

Горизонтальное размещение через inline-block

Создание выпадающих элементов

Адаптивность

Использование Bootstrap

UberMenu

Max Mega Menu

JQuery Accordion Menu Widget

Заключение

Адаптивное одноуровневое раскрывающееся меню с JavaScript

Предварительный просмотр:

Описание:

Как использовать:

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

Your Designer Toolbox

Mobile First

Настройка

HTML

CSS

«Взломать флажок»

HTML

CSS

Для больших экранов

17 Выпадающих меню CSS

Автор

О коде

Расплавленное меню

Автор

О коде

Раскрывающееся меню HTML и CSS

Автор

О коде

Меню градиента

Автор

О коде

Главное меню

О коде

Меню CSS

Автор

О коде

Выпадающее меню CSS

О коде

Горизонтальное раскрывающееся меню

О коде

Раскрывающееся меню

Автор

О коде

Необычное меню

Автор

О коде

Рекурсивная навигация при наведении

Автор

О коде

Классные эффекты выпадающего меню

Автор

О коде

Раскрывающееся меню

Автор

О коде

Выпадающее меню на простом чистом CSS

Автор

О коде

Выпадающее меню на простом чистом CSS

О коде

Выпадающие меню

Автор

О коде