Программирование на Python и Objective-C в Mac OS

Программирование на Python и Objective-C под Mac OS и для iPhone / iPod Touch

Выпадающее меню на 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?

Из этого руководства вы узнаете, как с помощью 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?

Из этого руководства вы узнаете, как с помощью 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 без зависимостей JS?

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

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

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

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

css

navigation

Поделиться

Источник


bcosynot    

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

6 ответов




5

Для многоуровневого выпадающего меню со скриптом 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



3

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

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

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

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

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

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

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

Поделиться


chipcullen    

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


  • Каково обоснование выбора полного меню на основе CSS и меню на основе Javascript/CSS?

    Какие пункты вы подтверждаете при рассмотрении нового меню для вашего сайта? Почему я должен выбрать полное меню на основе CSS? Почему я должен выбрать меню на основе Javascript/CSS ? какая выгода в выборе любого из них? Является ли CSS меню старым ? или он ограничен в возможностях! Я не думаю,…

  • Коды выпадающего меню JS & CSS, влияющие на полные коды веб-сайтов

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



3

У вас есть только один вариант для выпадающего меню 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




2

Я тоже пытался решить эту проблему. И я не думаю, что решение, которое покрывает все мои потребности, вообще возможно. Но это, вероятно, будет достаточно хорошо для большинства людей: 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 и на нескольких настольных браузерах. И это в основном работает везде. Это оставшиеся вопросы :

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

Поделиться


selfthinker    

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



1

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

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



0

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

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



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

Предотвратите обертывание div, содержащего меню CSS, без разбиения выпадающих меню

Я внедряю меню, основанное на этом: http://www.jankoatwarpspeed.com/пост/2009/01/19/создать-сайт-как топ-navigation.aspx ( Демонстрация ) Меню использует структуру UL / LI и CSS для соответствующего…

Чистое выпадающее меню css без js (если js отключен) в IE 6?

Я нашел много скриптов меню css/js на различных сайтах, они хорошо работают в FF, IE7 и safari, opera, если JS отключен, но не в IE 6 и для IE 6 небольшой файл js нужно добавить, потому что IE не…

WordPress css репликация меню — пункты меню и элементы в выпадающих списках смещены вправо

Мне нужно скопировать меню из этой установки wordpress http://bit.ly/rrWFMH на некоторые страницы, не относящиеся к wordpress php. Я перевел код меню на http://bit.ly/vcUn1s . Сначала я использовал…

Несколько выпадающих меню на основе CSS и jQuery остаются открытыми после нажатия на другое

Я настраиваю несколько выпадающих меню на основе jQuery на одной странице, основываясь на следующем учебнике: http:/ / www.jankoatwarpspeed.com /…

Javascript библиотеки для рисования многоуровневых деревьев

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

Каково обоснование выбора полного меню на основе CSS и меню на основе Javascript/CSS?

Какие пункты вы подтверждаете при рассмотрении нового меню для вашего сайта? Почему я должен выбрать полное меню на основе CSS? Почему я должен выбрать меню на основе Javascript/CSS ? какая выгода в…

Коды выпадающего меню JS & CSS, влияющие на полные коды веб-сайтов

Я использую несколько выпадающих меню colomn, которые имеют JS и css и эти скрипты. Когда я установил это меню, все на моем сайте изменилось. Я знаю это только из-за сценариев. Размер всех кнопок…

Excel: вывод на основе выбора из нескольких выпадающих меню

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

кликабельное меню css без JS

я хочу создать меню HTML5 с CSS, которое работает с щелчком мыши, а не с наведением. Я видел примеры в интернете, где это делается с JS. Я было интересно, если это возможно сделать без JS. одним из…

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

У меня есть пакет, который ссылается на множество объектов из одной и той же схемы и других схем. Я хочу найти все зависимости пакета. Я могу получить только зависимости первого уровня от…

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

Сегодня мы хотим поделиться с вами экспериментальным выпадающим меню. Основная идея состоит в том, чтобы сэкономить место на странице для меню, которое имеет много пунктов и вложенных уровней. Каждый под-уровень в этом меню будет показан в своем собственном блоке, при этом «родительский» уровень будет исчезать. Это будет реализовано при помощи 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 сайта. Должно выглядеть так:

<link rel=»stylesheet» href=»https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css» integrity=»sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4″ crossorigin=»anonymous»>

Для создания горизонтального меню с выпадающим списком на 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-код для раскрывающегося меню.

 <заголовок>
  

3.Загрузите в документ основной код JavaScript и таблицу стилей. Вот и все.

 
 

Теги: раскрывающееся меню, меню вне холста, адаптивное меню

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

Это руководство поможет вам посредством создания гибкой раскрывающейся навигации с использованием только CSS, с помощью CSS flexbox и «взлома флажков».Для дальнейшего изучения необходимы базовые знания HTML и CSS.

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

Приступим.

Your Designer Toolbox

Неограниченные загрузки: 500 000+ веб-шаблонов, наборов значков, тем и материалов для дизайна

СКАЧАТЬ

Mobile First

Мы будем следовать подходу «сначала мобильные», который предполагает проектирование веб-сайта, начиная с мобильной версии, а затем переходя к дизайну для больших экранов. Узнайте больше о том, почему подход, ориентированный на мобильные устройства, важен в 2020 году.

Настройка

Создайте пустой документ HTML и назовите его index.html. Добавьте базовый скелет HTML. Если вы используете Visual Studio Code, все, что вам нужно сделать, это ввести «!» и нажмите Enter. У вас получится вот это.

 


   
   
    Документ 


  


 

Я использовал «Font Awesome» для значка меню гамбургера в правом верхнем углу.Поэтому добавьте следующую строку под тегом заголовка, чтобы иметь возможность использовать этот шрифт.

  

Создайте свою таблицу стилей и назовите ее styles.css . Свяжите таблицу стилей с вашим HTML-документом под ссылкой Font Awesome CDN, используя

  

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

HTML

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

 <заголовок>
   
Логотип

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

CSS

В вашем styles.css начните с некоторых общих стилей для всех элементов:

 * {
   маржа: 0;
   отступ: 0;
   размер коробки: рамка-рамка;
   семейство шрифтов: без засечек;
}
 

Добавьте эти стили в элемент заголовка.

 header {
   высота: 70 пикселей;
   цвет фона: # 22292F;
   отступ: 10 пикселей 0;
}
 

Теперь вы увидите темную панель навигации, занимающую всю ширину браузера.

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

Теперь добавьте эти стили в класс обтекания меню:

 .menu-wrap {
   дисплей: гибкий;
   justify-content: пробел между;
   отступ: 0 15 пикселей;
}
 

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

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

 .logo-img {
   высота: 50 пикселей;
}
.menu-icon {
   размер шрифта: 2.4em;
   цвет: #ffffff;
   высота строки: 50 пикселей;
}
 

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

 nav {
   позиция: абсолютная;
   цвет фона: # 3D4852;
   верх: 70 пикселей;
   слева: 0;
   ширина: 100%;
}
 

Теперь стилизуйте список и ссылки:

 nav ul {
   тип-стиль-список: нет;
}
nav ul li {
   отступ: 0 15 пикселей;
}
nav ul li a {
   дисплей: встроенный блок;
   отступ: 12 пикселей;
   / * Добавьте свои собственные стили ниже, чтобы изменить внешний вид ссылок * /
   цвет: # DAE1E7;
   текстовое оформление: нет;
   межбуквенный интервал: 0.05em;
}
 

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

 nav ul li a: hover, nav ul li a: focus {
   цвет: # eb6f4a;
}
 

Теперь вы должны увидеть это:

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

 nav ul li a: hover, nav ul li a: focus {
   цвет: # eb6f4a;
}
 

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

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

Что это за «взлом с флажком»? Это самая важная часть этого урока. Прочитай внимательно.

Теперь нам нужно переключить отображение меню, используя только CSS — без JavaScript. Лучший способ сделать это — использовать скрытый элемент флажка.Мы используем значок гамбургера в качестве метки для этого элемента флажка. Как только метка нажата, флажок устанавливается, и, следовательно, мы можем использовать селектор псевдокласса «: checked» для отображения меню!

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

HTML

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

  

ПРИМЕЧАНИЕ. Очень важно добавить его до nav , а не после.Потому что в CSS есть селектор для следующего брата, но не для предыдущего. Вы скоро это поймете.

Также окружите значок меню меткой

 
 

Здесь for = ”checkbox” гарантирует, что флажок будет отмечен / снят каждый раз при нажатии на эту метку.

CSS

Нам нужно сначала скрыть флажок. В стилях.css , добавьте это:

 #checkbox {
   дисплей: нет;
}
 

Вот самое сердце кода:

 #checkbox: checked ~ nav ul {
   максимальная высота: 200 пикселей;
   отступ: 15 пикселей 0;
   переход: все 0,5 с;
}
 

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

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

СКАЧАТЬ

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

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

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

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

Внутри него сначала скройте значок меню

 @media (min-width: 768px) {
  .menu-icon {
     дисплей: нет;
  }
}
 

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

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

 @media (min-width: 768px) {
  nav {
    положение: относительное;
    верх: -10 пикселей;
    цвет фона: прозрачный;
  }
  nav ul {
    максимальная высота: 70 пикселей;
    отступ: 15 пикселей 0;
    выравнивание текста: вправо;
  }
  nav ul li {
    дисплей: встроенный гибкий;
    отступ слева: 20 пикселей;
  }
}
 

Вот и все.

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

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

СКАЧАТЬ ИСТОЧНИК КОД

Это сообщение может содержать партнерские ссылки. См. Раскрытие партнерских ссылок здесь .

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

Коллекция отобранных вручную бесплатных выпадающих меню HTML и CSS примеров кода. Обновление коллекции за октябрь 2018 г. 3 новинки.

  1. Меню CSS
  2. Выпадающее меню начальной загрузки
Автор
О коде

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

Он сочетает в себе раскрывающееся меню CSS и просачивающиеся эффекты жидкого пламени.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Отзыв: нет

Зависимости: —

Автор
О коде

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

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Зависимости: —

Автор
О коде

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

Раскрывающееся меню адаптивного градиента.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Зависимости: font-awesome.css

Автор
О коде

Главное меню

Горизонтальное меню с выпадающими эффектами в HTML и CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: ionicons.CSS

О коде

Меню CSS

Нет JS — обязательно загляните в мобильное меню.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Автор
О коде

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

HTML и CSS выпадающее меню с приятным эффектом.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Зависимости: —

О коде

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

Горизонтальное выпадающее меню на чистом CSS с красивыми переходами и красивой палитрой.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: ionicons.css

О коде

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

Классное раскрывающееся меню HTML и CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: font-awesome.css

Автор
О коде

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

Необычное выпадающее меню в HTML и CSS. На основе https://dribbble.com/shots/1075480-Ui-Kit-Hotel

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: font-awesome.CSS

Автор
О коде

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

Только CSS-рекурсивная навигация при наведении.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Автор
О коде

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

Cool выпадающее меню чистые эффекты CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Автор
О коде

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

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

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Автор
О коде

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

Меню с выпадающим списком выполнено только в CSS, со строкой, следующей за наведением на строку.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Автор
О коде

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

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

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

О коде

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

Анимированные выпадающие меню CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Автор
О коде

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

Это просто еще одно раскрывающееся меню , концепция .

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Автор
О коде

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

Простое, только CSS, гибкое раскрывающееся меню.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Адаптивное мегаменю с раскрывающимся меню с использованием HTML, CSS и jQuery

Здравствуйте, друзья! Сегодня в этом посте мы узнаем, как создать адаптивное мегаменю с раскрывающимся меню с помощью HTML, CSS и jQuery.Недавно я поделился эффектами анимации при наведении курсора текста на чистый CSS. Но наша сегодняшняя тема — Адаптивное мегаменю с раскрывающимся меню с использованием HTML, CSS и jQuery.

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

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

Он может имитировать модальные окна, выпадающие меню навигации и другие экранные подсказки, не покидая текущего экрана. Итак, в этом посте я создам адаптивное мегаменю с выпадающим меню, чтобы найти вдохновение для вашего проекта веб-дизайна.А теперь я собираюсь создать привлекательное, но простое адаптивное мегаменю с раскрывающимся меню с использованием HTML5, CSS3 и Javascript.

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

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

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

Однажды мы работали над проектом по созданию упрощенного шаблона веб-страницы. Один из моих младших сотрудников попросил меня предложить легкий плагин jQuery для раскрывающегося меню. Мне было интересно услышать это и предложить ему создать меню навигации, используя только CSS. На самом деле это был очень простой проект, поэтому мы не добавляли в него никакой библиотеки JavaScript.Итак, мы только что создали раскрывающееся меню на чистом CSS, которым мы собираемся поделиться в этом уроке.

Это меню навигации состоит из логотипа, кнопки переключения (которая будет отображаться на мобильных устройствах) и раскрывающихся ссылок. В раскрывающемся списке можно разместить до 3 уровней, чтобы создать многоуровневое раскрывающееся меню. Кроме того, вы можете полностью настроить цвет фона, толщину строки меню и т. Д., Незначительно изменив код CSS.

ОК! А теперь давайте начнем процесс кодирования, чтобы создать гибкое раскрывающееся меню.

HTML для адаптивного раскрывающегося меню

Прежде всего, создайте элемент навигации HTML5 и поместите элемент div (для логотипа), элемент метки и радио-ввод с идентификатором drop. Точно так же создайте список навигационных ссылок, используя ul с именем класса «menu». Вы можете вкладывать элементы списка в многоуровневые раскрывающиеся списки. Просто следуйте приведенной ниже структуре кодирования HTML.

 
 

ОК! HTML-код вашего меню готов к его стилизации с помощью CSS.Если вы хотите добавить изображение для логотипа (вместо текста), вы можете добавить свой логотип внутри тега

.

Стили CSS

В CSS, прежде всего, мы зададим фоновый цвет контейнеру навигации и зададим стиль контейнеру логотипа. Вы можете установить собственный цвет для фона (по умолчанию — # 254441). Аналогичным образом, если вы добавили изображение для логотипа, настройте размер логотипа с помощью #logo img {width: 120px; height: auto} Код CSS.

 nav {
маржа: 0;
отступ: 0;
цвет фона: # 254441;
}

#logo {
дисплей: блок;
отступ: 0 30 пикселей;
плыть налево;
размер шрифта: 22 пикселя;
    font-weight: 700;
высота строки: 60 пикселей;
    цвет: #fff;
}
 

Поскольку у нас будут «ul» и «li» «float: left», нам нужно добавить свойство очистки CSS после контейнера.

 nav: after {
содержание:"";
дисплей: таблица;
ясно: оба;
}
 

Теперь мы удалим значения padding, margin и «list-style» по умолчанию из «ul» и добавим «position: reltive». Кроме того, мы установим встроенную позицию для элементов навигации.

 nav ul {
float: right;
отступ: 0;
маржа: 0;
стиль списка: нет;
положение: относительное;
}

nav ul li {
маржа: 0px;
дисплей: встроенный блок;
плыть налево;
цвет фона: # 254441;
}

 

Определите некоторые стили CSS для ссылок навигации.Если вы хотите настроить эти ссылки, вы можете установить собственные значения для цвета (то есть #FFF), заполнения и т. Д.

 nav a {
дисплей: блок;
отступ: 14 пикселей 20 пикселей;
цвет: #FFF;
размер шрифта: 17 пикселей;
текстовое оформление: нет;
}


nav ul li ul li: hover {фон: # 000000; }

/ * Изменение цвета фона при наведении * /
nav a: hover {
цвет фона: # 000000;
}

 

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

 нав ул ул {
дисплей: нет;
позиция: абсолютная;
/ * должно быть таким же числом, как "line-height" для "nav a" * /
верх: 60 пикселей;
}

/ * Отображение раскрывающихся списков при наведении * /
nav ul li: hover> ul {
дисплей: наследовать;
}
 

Следующий CSS устанавливает стили для раскрывающихся уровней.В конце каждого раскрывающегося списка будет отображаться знак плюса (+), обозначающий раскрывающийся список. Если вы хотите изменить этот символ (или использовать значок), обновите значение содержимого : '+'; из двух последних строк.

 / * Раскрывающийся список Fisrt Tier * /
nav ul ul li {
ширина: 170 пикселей;
float: нет;
отображение: элемент списка;
положение: относительное;
}

/ * Второй, третий и более уровни
 * Мы перемещаем выпадающие списки 2-го и 3-го ярусов влево.
 * на величину ширины первого яруса.
* /
nav ul ul ul li {
положение: относительное;
верх: -60 пикселей;
/ * должно быть таким же числом, как «ширина» «nav ul ul li» * /
слева: 170 пикселей;
}


/ * Измените '+', чтобы изменить символ раскрывающегося списка * /
li> a: после {содержимого: '+'; }
li> a: only-child: after {content: ''; }
 

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

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

#logo {
дисплей: блок;
отступ: 0;
ширина: 100%;
выравнивание текста: центр;
float: нет;
}

nav {
маржа: 0;
}

/ * Скрыть меню навигации по умолчанию * /
/ * Также скрываем * /
. = drop]: проверено + ul {
дисплей: блок;
}

/ * Изменить ширину пункта меню на 100% * /
nav ul li {
дисплей: блок;
ширина: 100%;
}

nav ul.переключать,
nav ul ul a {
отступ: 0 40 пикселей;
}

nav ul ul ul a {
отступ: 0 80 пикселей;
}

nav a: hover,
 nav ul ul ul a {
цвет фона: # 000000;
}
  
nav ul li ul li. переключение,
nav ul ul a,
  nav ul ul ul a {
отступ: 14 пикселей 20 пикселей;
цвет: #FFF;
размер шрифта: 17 пикселей;
}
  
  
nav ul li ul li. переключение,
nav ul ul a {
цвет фона: # 212121;
}

/ * Скрыть выпадающие списки по умолчанию * /
nav ul ul {
float: нет;
положение: статическое;
цвет: #ffffff;
/ * должно быть таким же числом, как "line-height" для "nav a" * /
}

/ * Скрыть меню при наведении * /
nav ul ul li: hover> ul,
nav ul li: hover> ul {
дисплей: нет;
}

/ * Раскрывающийся список Fisrt Tier * /
nav ul ul li {
дисплей: блок;
ширина: 100%;
}

nav ul ul ul li {
положение: статическое;
/ * должно быть таким же числом, как «ширина» «nav ul ul li» * /

}

}

@media all and (max-width: 330px) {

nav ul li {
дисплей: блок;
ширина: 94%;
}

}
 

Вот и все! Надеюсь, вам понравится это раскрывающееся меню, адаптивное к чистому CSS, и вы найдете это руководство полезным.Если у вас есть какие-либо вопросы или предложения, связанные с этим меню, не стесняйтесь оставлять комментарии ниже.

35+ выпадающих меню CSS — бесплатный код + демонстрации

1. Меню Molten

Вот новое горячее меню, которое стоит попробовать. Он сочетает в себе раскрывающееся меню CSS и просачивающиеся эффекты жидкого пламени.

Автор: Зеландия (бабочки)

Дата создания: 11 декабря 2018 г.

Сделано с помощью: HTML, CSS

Теги: cpc-fire, codepenchallenge

2.Выпадающее меню Dark HTML CSS

Простое меню с aria и псевдоселектором ‘: focus-within’ для подменю вкладок.

Автор: Марко Бесаньи (marcobesagni)

Дата создания: 29 июня 2018 г.

Сделано с помощью: HTML, Sass

Теги: codepenchallenge, cpc-menus, focus-within, challenge , css

3. Меню цветного градиента

Меню адаптивного градиента для CodePen Challenge

Автор: Halida Astatin (halidaa)

Дата создания: 29 июня 2018 г.

Сделано с помощью: HTML, Меньше

Теги: codepenchallenge, cpc-menus, cssvariable, navigation, gradient

4.Раскрывающееся меню главного меню

Автор: Мохамед Айман (Mohamed-Ayman)

Дата создания: 28 июня 2018 г.

Сделано с помощью: HTML, SCSS

5. Вертикальное меню CSS с адаптацией цвета

Простое вертикальное анимированное гамбургер-меню на CSS, которое адаптируется к цвету фона с помощью режима смешивания.

Автор: Инес Монтани (ines)

Дата создания: 20 февраля 2016 г.

Сделано с помощью: Pug, Sass, JS

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

JS Pre -процессор: Нет

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

Теги: css, css3, ui, menu

6.Простое раскрывающееся меню PureCss со следующим субнавом

Меню с раскрывающимся списком, созданным только в css, со строкой, следующей за наведением курсора на строку

Автор: Роберт Боргези (dghez)

Дата создания: 17 февраля, 2015

Сделано с: HTML, SCSS

Теги: меню, выпадающее, css, анимация, перевод

7. Раскрывающееся меню заголовка

Автор: Ахмед Наср (ahmedhosna95)

Создано: 27 июня 2018 г.

Сделано с помощью: HTML, SCSS

Теги: codepenchallenge

8.Концепция зигзагообразного выпадающего меню

Это просто еще одна концепция выпадающего меню.

Автор: Catalin Rosu (catalinred)

Дата создания: 2 сентября 2013 г.

Сделано с помощью: HTML, CSS, JS

Теги: css3

9. Fancy Dropdown Menu

Это моя первая задача с кодовым пером. Подменю вращается с помощью преобразования.

Автор: Хесус Родригес (J_Enrique)

Дата создания: 25 июня 2018 г.

Сделано с помощью: HTML, SCSS, JS

Теги: codepenchallenge, cpc-menus, no-js , отличный шрифт, css

10.Рекурсивная навигация при наведении курсора (только CSS)

Автор: sean_codes (sean_codes)

Дата создания: 10 января 2018 г.

Сделано с помощью: HTML, CSS, JS

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

Но довольно бесполезно в реальном мире 🙂

Автор: Руслан Пивоваров (mrspok407)

Дата создания: 31 июля 2016 г.

Сделано с помощью: Pug, SCSS, JS

CSS Препроцессор: SCSS

JS Препроцессор: Нет

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

Теги: меню , раскрывающееся меню, pure-css

12.Простое раскрывающееся меню на чистом CSS

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

Автор: Коннор Брассингтон (connorbrassington)

Дата создания: 15 ноября 2014 г.

Сделано с: Pug, SCSS

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

JS Pre-processor : Нет

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

Теги: pure-css, dropdown, menu, beginner, design

13.Простое раскрывающееся меню PureCss со следующим субнавом

Меню с раскрывающимся списком, созданным только в css, со строкой, следующей за наведением курсора на строку

Автор: Роберт Боргези (dghez)

Дата создания: 17 февраля, 2015

Сделано с помощью: HTML, SCSS

Теги: меню, раскрывающееся меню, css, анимация, перевод

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

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

Автор: Коннор Брассингтон (connorbrassington)

Дата создания: 15 ноября 2014 г.

Сделано с: Pug, SCSS

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

JS Pre-processor : Нет

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

Теги: pure-css, dropdown, menu, beginner, design

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

Анимированные, выпадающие меню CSS

Автор: Кевин (kkrueger)

Дата создания: 24 апреля 2014 г.

Сделано с помощью: HTML, SCSS

Теги: раскрывающийся список, nav, menu, animated, pure-css

16. Концепция выпадающего меню зигзага

Это просто еще одна концепция выпадающего меню.

Автор: Catalin Rosu (catalinred)

Дата создания: 2 сентября 2013 г.

Сделано с помощью: HTML, CSS, JS

Теги: css3

17.Простой, только CSS, Адаптивное меню

Автор: Джон Урбанк (jurbank)

Дата создания: 4 сентября 2012 г.

Сделано с помощью: HTML, CSS

Теги: farm-animals, css , отзывчивый, меню

18. Выпадающее меню Swanky на чистом CSS, версия 2.0

Раскрывающееся меню на чистом CSS. Хорошее небольшое дополнение к любому пользовательскому интерфейсу, отличному от javascript. Использует ярлыки для переключения анимации.

Автор: Джейми Коултер (jcoulterdesign)

Дата создания: 19 апреля 2015 г.

Сделано с помощью: Haml, SCSS, JS

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

JS Pre -процессор: Нет

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

Теги: css, выпадающее меню, ui, ux

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

Адаптивное раскрывающееся меню. http://osvaldas.info/drop-down-navigation-responsive-and-touch-friendly/

Автор: Бойд Мэсси (massiebn)

Дата создания: 22 апреля 2014 г.

Сделано с : HTML, CSS

Теги: отзывчивый, навигация

20. 3D вложенная навигация

Автор: Devilish Alchemist (devilishalchemist)

Дата создания: 16 декабря 2014 г.

Сделано с: HTML, SCSS

21.Вложенная выпадающая навигация только для CSS

На основе фрагмента кода, который я сделал для навигации по портфолио @ jzl на http://jeselleobina.com/portfolio. Следите за обновлениями, чтобы увидеть полное руководство на Tuts +! Для версии, доступной для ARIA, щелкните здесь http://codepen.io/gabriellewee/pen/oWyObX

Автор: Габриэль Ви 🧧 (gabriellewee)

Дата создания: 11 мая 2017 г.

Сделано с: Haml, SCSS, JS

Препроцессор CSS: SCSS

Препроцессор JS: Нет

Препроцессор HTML: Haml

Теги: раскрывающийся список, навигация, nav, флажок, опция

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

Простой пример раскрывающегося меню, созданного только с помощью CSS3 и HTML

Автор: Андор Надь (andornagy)

Дата создания: 28 апреля 2013 г.

Сделано на: HTML, CSS

Теги: css, выпадающее меню, навигация

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

Выпадающее меню, созданное с использованием только SCSS. Что нужно сделать: сделайте это доступным! Ознакомьтесь с полной статьей в блоге thinkbot: https: // robots.thinkbot.com/you-don-t-need-javascript-for-that

Автор: Кристина Сильва (cristina-silva)

Дата создания: 29 апреля 2016 г.

Сделано с помощью: HTML , SCSS

24. Раскрывающееся меню с полным CSS3

Раскрывающееся меню только для CSS3

Автор: daniesy (daniesy)

Создано: 25 января 2014 г.

Сделано с помощью: HTML, SCSS

Теги: раскрывающийся список , css3, меню

25.Красивое выпадающее меню!

Автор: Lukasz (llucaso)

Дата создания: 16 июня 2017 г.

Сделано с помощью: HTML, CSS, JS

26. Адаптивное меню навигационной панели на чистом CSS с раскрывающимся списком

Создание адаптивного Меню Navbar с раскрывающимся меню с использованием Sass

Автор: Syahrizal (syahrizaldev)

Дата создания: 23 декабря 2019 г.

Сделано с помощью: HTML, SCSS

Теги: response-menu, dropdown -menu, адаптивная-navbar, navbar, navbar-menu

27.Выпадающее меню

Автор: Ойбек (Oybek_077)

Дата создания: 29 апреля 2019 г.

Сделано с помощью: HTML, SCSS

Теги: выпадающее меню, анимация

28. Супер просто Выпадающее меню CSS

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

Автор: Анастасия П (stasysiia)

Создано: 7 июня 2020 г.

Сделано с: HTML, CSS

Теги: css, html, css3, dropdown-menu

29.Вертикальное раскрывающееся меню

Простое вертикальное раскрывающееся меню CSS с чистым дизайном.

Автор: Kerem Beyazıt (kerembeyazit)

Создано: 24 ноября 2018 г.

Сделано с помощью: HTML, CSS, JS

Теги: выпадающее меню, меню, навигация, вертикальное dropdown, nav

30. Dino Drop Down

Автор: Ана Тудор (thebabydino)

Дата создания: 19 февраля 2013 г.

Сделано с помощью: HTML, CSS

31.Раскрывающийся список Темный / светлый — Чистый CSS —

Автор: Иван Гроздик (ig_design)

Дата создания: 7 июля 2020 г.

Сделано с помощью: HTML, CSS, JS

Теги: раскрывающийся список, pure-css, animation, css, checkbox

32. Контекстное меню с иконками в виде перьев

На основе https://dribbble.com/shots/11117547-Popover-components Значки с https://feathericons.com/

Автор: Håvard Brynjulfsen (havardob)

Дата создания: 3 июня 2020 г.

Сделано с помощью: HTML, SCSS, JS

Теги: меню, кнопка, список, раскрывающийся список

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

Автор: MGI Designer (MgiDesigner)

Сделано с помощью: HTML, SCSS

HTML и CSS Примеры раскрывающихся меню, которые можно использовать

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

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

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

Автор: Зеландия

Сделано с помощью: CSS, HTML

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

Рекурсивная навигация при наведении курсора (только CSS)

Автор: sean_codes

Сделано с помощью: CSS, HTML

Это раскрывающееся меню отображается при наведении курсора на главное меню.

Автор: Кевин

Сделано с помощью: CSS, HTML

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

Простое раскрывающееся меню CSS с состояниями Hover и: focus-within и Focus и ARIA

Автор: Уна Кравец

Сделано с помощью: CSS, HTML

Это простое раскрывающееся меню с минималистичным дизайном.

Автор: Rlski

Сделано с помощью: CSS, HTML

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

Создавайте визуально привлекательные и высокопроизводительные веб-сайты без написания кода

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

Примеры раскрывающегося меню для веб-сайтов и приложений

Автор: Кристина Сильва

Сделано с помощью: CSS, HTML

Это раскрывающееся меню не включает JavaScript.Из четырех пунктов меню включена только одна раскрывающаяся кнопка класса div. Этот класс кнопок создает подменю, которое содержит три поля содержимого.

Автор: Максим Агинский

Сделано с помощью: CSS, HTML

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

Автор: Amr SubZero

Сделано с помощью: CSS, HTML

Вот выпадающее меню CSS с освежающим цветом фона.Каждое подменю отображает раскрывающееся содержимое своего пункта главного меню.

Автор: Гол Хамер

Сделано с помощью: CSS, HTML

С помощью этого простого параметра легко создать раскрывающееся меню.

Автор: Джейми Колтер

Сделано с помощью: CSS, HTML

Вот отличный вариант для IU без JavaScript. Он отличается красивым цветом фона и плавным выпадающим эффектом анимации.

Автор: Джон Белла

Сделано с помощью: CSS, HTML

В этом шаблоне раскрывающегося меню CSS есть кнопка раскрывающегося списка, которая отображает раскрывающееся содержимое при наведении курсора.

Автор: Роберт Боргези

Сделано с помощью: CSS, HTML

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

Автор: Коннор Брассингтон

Сделано с помощью: CSS, HTML

Простое раскрывающееся меню CSS.После небольшой корректировки кода класса кнопки можно настроить другую кнопку меню для отображения раскрывающегося содержимого.

Автор: Керем Беязит

Сделано с помощью: CSS, HTML

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

Автор: Kitty giraudel

Сделано с помощью: CSS, HTML

Минимальное раскрывающееся меню, созданное с помощью взлома флажка. Выпадающий код класса div может нуждаться в корректировке перед использованием в ваших проектах.

Автор: Гарет МакКинли

Сделано с помощью: CSS, HTML

В этом варианте раскрывающийся код класса div может потребовать корректировки перед использованием.

Автор: Разван Тудоса

Сделано с помощью: CSS, HTML

Это раскрывающееся меню CSS, созданное с эффектом анимации складывания бумаги.

Автор: Хью Бальбоа

Сделано с помощью: HTML, CSS

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

Выпадающий список на чистом CSS [работает для сенсорного экрана мобильного устройства]

Автор: Джонат Ли

Сделано с помощью: HTML, CSS

Это раскрывающееся меню CSS хорошо подходит для устройств с сенсорным экраном. Он был протестирован на :

  1. Chrome Canary
  2. Chrome PC
  3. IE10 PC
  4. Эмулятор Android
  5. Firefox PC
  6. И смартфон Android 5

Автор: Алексей Попков

Сделано с помощью: CSS, HTML

Раскрывающееся меню во всю ширину.Подменю остаются под своими родительскими элементами.

Автор: Каролина Ханссон

Сделано с помощью: HTML, CSS

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

MainMenu #CodePenChallenge

Автор: Мохамед Айман

Сделано с помощью: HTML, CSS

Это красивое и красочное горизонтальное выпадающее меню.

Автор: Дэн Матисен

Сделано с помощью: HTML, CSS

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

Автор: Jenning

Сделано с помощью: HTML, CSS

Этот простой дизайн имеет мягкий цвет фона.

Автор: Халида Астатин

Сделано с помощью: HTML, CSS

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

Автор: Николас Галлер

Сделано с помощью: HTML, CSS

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

Автор: Dr.Web

Сделано с помощью: HTML, CSS

Этот пример идеально подходит для разработки веб-сайта.

Автор: Марио Лонкарек

Сделано с помощью: HTML, CSS

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

Автор: Андор Надь

Сделано с помощью: HTML, CSS

Это простой пример раскрывающегося меню.

Автор: Ахмад Наср

Сделано с помощью: HTML, CSS

Горизонтальное выпадающее меню CSS с красивым цветом фона и красивым анимационным эффектом.

Автор: Марко Бесаньи

Сделано с помощью: HTML, CSS

Этот стиль дизайна прост и имеет идеальный размер шрифта для каждого пункта меню.

Автор: Майк Рохас

Сделано с помощью: HTML, CSS

Это раскрывающееся меню имеет привлекательный зеленый цвет фона с белым текстом.

Автор: Руслан Пивоваров

Сделано с помощью: HTML, CSS

Этот вариант идеально подходит для веб-сайтов с классным CSS-дизайном.

Автор: Каталин Рошу

Сделано с помощью: HTML, CSS

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

Автор: Джон Урбанк

Сделано с помощью: HTML, CSS

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

Простой раскрывающийся список CSS

Автор: Доан Хопкинс

Сделано с помощью: HTML, CSS

Вот простое многоуровневое раскрывающееся меню CSS.

Автор: Сатиш Кумар

Сделано с помощью: HTML, CSS

В этом варианте отображение меню появляется в правой части экрана. Этот стиль удобен и привлекателен. Раскрывающееся меню отображается в белом поле с синими словами.

Автор: Адам Кун

Сделано с помощью: HTML, CSS

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

Автор: Guil H

Сделано с помощью: HTML, CSS

Классное выпадающее меню с настраиваемым кодом.

Автор: Эрик Мюссер

Сделано с помощью: HTML, CSS

Яркий цвет этого варианта оживит сайт вашего клиента.

Автор: Винсент Дюран

Сделано с помощью: HTML, CSS

Выпадающее меню CSS появляется, когда пользователь наводит курсор на основные элементы.

Автор: Анастасия П

Сделано с помощью: HTML, CSS

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

Завершение мыслей об этих раскрывающихся меню HTML и CSS

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

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *