Заработок в сети Интернет. Как заработать на дому в Интернете. Удаленная работа в сети.

Заработок на разработке сайтов, фриланс, своя страничка в интернете, заработать в Интернете на написании сайтов, веб мастер, вебмастер, веб программист, вебпрограммист.

Заработок в Интернет.
Удаленная работа на дому.
Все о надомной работе.

Раскрывающееся меню css: Горизонтальное выпадающее меню

Добавлено автор alexxlab

Содержание

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

Выпадающее меню на HTML / CSS без использования JavaScript

Очень часто необходимо сделать на сайте выпадающее при наведении меню. Большинство веб-девелоперов используют для этого JavaScript / Jquery. Это конечно хорошо, но такого роди задачи легко решаются с помощью HTML / CSS.

Вот простой пример HTML-кода меню:

<ul>
    <li><a href=#>Menu 1</a>
        <ul>
            <li><a href=#>Sudmenu 1</a></li>
            <li><a href=#>Sudmenu 1</a></li>
            <li><a href=#>Sudmenu 1</a></li>
        </ul>
    </li>
    <li><a href=#>Menu 2</a>
        <ul>
            <li><a href=#>Sudmenu 2</a></li>
            <li><a href=#>Sudmenu 2</a></li>
            <li><a href=#>Sudmenu 2</a></li>
        </ul>
    </li>
    <li><a href=#>Menu 3</a>
        <ul>
            <li><a href=#>Sudmenu 3</a></li>
            <li><a href=#>Sudmenu 3</a></li>
            <li><a href=#>Sudmenu 3</a></li>
        </ul>
    </li>
    <li><a href=#>Menu 4</a>
        <ul>
            <li><a href=#>Sudmenu 4</a></li>
            <li><a href=#>Sudmenu 4</a></li>
            <li><a href=#>Sudmenu 4</a></li>
        </ul>
    </li>
    <li><a href=#>Menu 5</a>
        <ul>
            <li><a href=#>Sudmenu 5</a></li>
            <li><a href=#>Sudmenu 5</a></li>
            <li><a href=#>Sudmenu 5</a></li>
        </ul>
    </li>
</ul>

Для построения меню был использован список с классом menu.

Подменю сделаны списками с классом submenu.

Теперь давайте как-нибудь минимально оформим наше меню стилями:


body {
    font: 14px 'Verdana';
    margin: 0;
    padding: 0;
}
ul {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
}
ul:after {
    display: block;
    content: ' ';
    clear: both;
    float: none;
}
ul.menu > li {
    float: left;
    position: relative;
}
ul.menu > li > a {
    display: block;
    padding: 10px;
    color: white;
    background-color: red;
    text-decoration: none;
}
ul.menu > li > a:hover {
    background-color: black;
}
ul.submenu {
    display: none;
    position: absolute;
    width: 120px;
    top: 37px;
    left: 0;
    background-color: white;
    border: 1px solid red;
}
ul.submenu > li {
    display: block;
}
ul.submenu > li > a {
    display: block;
    padding: 10px;
    color: white;
    background-color: red;
    text-decoration: none;
}
ul.submenu > li > a:hover {
    text-decoration: underline;
}

Для класса submenu было установлено свойство ‘display: none’. Это позволило на спрятать наше выпадающее меню.

Теперь добавим в CSS такой код:


ul.menu > li:hover > ul.submenu {
    display: block;
}

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

Вот и все. Просто и легко без JavaScript.

Выпадающее по клику меню на css

я однажды реализовывал подобное меню. там смысл достаточно прост: делаем обычное навигационное меню. раз меню выпадающее — делаем первый и второй уровень (допустим). первый уровень отображается всегда, а вот второй скрываем с помощью display: none;. при наведении на определённый пункт меню первого уровня через псевдокласс :hover отображаем ссылки второго уровня. тут правильно задать позиционирование для второго уровня. а также очень важно (это проблема заставила меня долго мучаться) задать для пункта, при наведении на который будет появляться подменю, padding по-больше. чтобы площадь реагирования на наведение увеличить. Для большей наглядности мой код HTML (упрощённый):

<!DOCTYPE html PUBLIC "-//W3C/DTD//XTHML 1. 0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtm1" xml:lang="en" lang="ru">
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<ul>
            <li><a href="#">О компании</a></li>
            <li><a href="#">Услуги</a>
                <ul>
                    <li><a href="#">Все виды оценки</a></li>
                    <li><a href="#">Автоэкспертиза</a></li>
                    <li><a href="#">Автострахование</a></li>
                    <li><a href="#">Юридические услуги</a></li>
                </ul><!--end sub_nav-->
            </li>
            <li><a href="#">Тарифы</a></li>
            <li><a href="#">Новости</a></li>
            <li><a href="#">Контакты</a></li>
        </ul><!--end main_nav-->
</body>
</html>

И код CSS (тоже упрощён):

#main_nav {
            position: relative;
            top: 15px;
            margin-top: 14px;
            margin-left: 280px;
            }
        #main_nav li{
            display: inline;
            padding: 0 8px;
            border-left: 1px dotted #8b6619;
            position: relative;
            z-index: 2;
            }
        #main_nav li:first-child, #main_nav ul li {
            border-left: none;
            }
        #main_nav ul {
            display: none;
            position: absolute;
            top: 19px;
            left: 0;
            z-index: 1;
            width: 155px;
            }
        #main_nav li a, #main_nav li ul li a{
            color: #8b6619;
            font-family: "Times New Roman", serif;
            font-size: 0. 9em;
            font-weight: bold;
            text-decoration: none;
            outline: none;
            padding-bottom: 17px;
            }
        #main_nav li a:hover, 
        #main_nav li ul a:hover {
            color: black;
            }
        /*--------------Подменю--------------*/
            #main_nav li:hover ul {
                display: block;
                }

Вот и всё. Спасибо за голоса!)

Создаем анимированное выпадающее меню при помощи CSS3

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

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

Онлайн-демо

HTML

Структура меню очень простая — это неупорядоченный список с ссылками. Вот фрагмент его кода:

<ul>
 <li><a href=»#»>Home</a></li>
 <li>
 <a href=»#»>Categories</a>
 <ul>
 <li><a href=»#»>CSS</a></li>
 <li><a href=»#»>Graphic design</a></li>
 <li><a href=»#»>Development tools</a></li>
 <li><a href=»#»>Web design</a></li>
 </ul>
 </li>
 <li><a href=»#»>Work</a></li>
 <li><a href=»#»>About</a></li>
 <li><a href=»#»>Contact</a></li>
</ul>

CSS

Сначала сбрасываем стили по-умолчанию:

#menu, #menu ul {
 margin: 0;
 padding: 0;
 list-style: none;
}

Первый уровень меню.

Возможности CSS3 по созданию таких вещей как градиент, тени и закругленные углы легко позволят нам реализовать следующее:

#menu {
 width: 960px;
 margin: 60px auto;
 border: 1px solid #222;
 background-color: #111;
 background-image: -moz-linear-gradient(#444, #111);
 background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
 background-image: -webkit-linear-gradient(#444, #111);
 background-image: -o-linear-gradient(#444, #111);
 background-image: -ms-linear-gradient(#444, #111);
 background-image: linear-gradient(#444, #111);
 -moz-border-radius: 6px;
 -webkit-border-radius: 6px;
 border-radius: 6px;
 -moz-box-shadow: 0 1px 1px #777;
 -webkit-box-shadow: 0 1px 1px #777;
 box-shadow: 0 1px 1px #777;
}

Clear floats.

Это метод Nicolas Gallagher, который я обычно использую:

#menu:before,
#menu:after {
 content: «»;
 display: table;
}
#menu:after {
 clear: both;
}
#menu {
 zoom:1;
}

Список элементов.

Обратите внимание на селектор #menu li:hover>a. Это, пожалуй, наиболее важный CSS трюк для этого выпадающего меню.

Итак, вот как это работает: выбираем элемент «а», который является дочерним для «li», а элемент «li» должен быть в свою очередь потомком «#menu». Подробнее о селекторах читайте здесь.

#menu li {
 float: left;
 border-right: 1px solid #222;
 -moz-box-shadow: 1px 0 0 #444;
 -webkit-box-shadow: 1px 0 0 #444;
 box-shadow: 1px 0 0 #444;
 position: relative;
}
#menu a {
 float: left;
 padding: 12px 30px;
 color: #999;
 text-transform: uppercase;
 font: bold 12px Arial, Helvetica;
 text-decoration: none;
 text-shadow: 0 1px 0 #000;
}
#menu li:hover > a {
 color: #fafafa;
}
*html #menu li a:hover { /* IE6 only */
 color: #fafafa;
}

Подпункты меню.

С помощью свойства CSS3 transitions мы можем создать анимацию изменяя такие CSS-свойства, как margin или opacity. И я использовал это для анимации подменю. Вот что в результате получилось:

#menu ul {
 margin: 20px 0 0 0;
 _margin: 0; /*IE6 only*/
 opacity: 0;
 visibility: hidden;
 position: absolute;
 top: 38px;
 left: 0;
 z-index: 9999;
 background: #444;
 background: -moz-linear-gradient(#444, #111);
 background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
 background: -webkit-linear-gradient(#444, #111);
 background: -o-linear-gradient(#444, #111);
 background: -ms-linear-gradient(#444, #111);
 background: linear-gradient(#444, #111);
 -moz-box-shadow: 0 -1px rgba(255,255,255,.3);
 -webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);
 box-shadow: 0 -1px 0 rgba(255,255,255,.3);
 -moz-border-radius: 3px;
 -webkit-border-radius: 3px;
 border-radius: 3px;
 -webkit-transition: all .2s ease-in-out;
 -moz-transition: all .2s ease-in-out;
 -ms-transition: all . 2s ease-in-out;
 -o-transition: all .2s ease-in-out;
 transition: all .2s ease-in-out;
}
#menu li:hover > ul {
 opacity: 1;
 visibility: visible;
 margin: 0;
}
#menu ul ul {
 top: 0;
 left: 150px;
 margin: 0 0 0 20px;
 _margin: 0; /*IE6 only*/
 -moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);
 -webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);
 box-shadow: -1px 0 0 rgba(255,255,255,.3);
}
#menu ul li {
 float: none;
 display: block;
 border: 0;
 _line-height: 0; /*IE6 only*/
 -moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
 -webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
 box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}
#menu ul li:last-child {
 -moz-box-shadow: none;
 -webkit-box-shadow: none;
 box-shadow: none;
}
#menu ul a {
 padding: 10px;
 width: 130px;
 _height: 10px; /*IE6 only*/
 display: block;
 white-space: nowrap;
 float: none;
 text-transform: none;
}
#menu ul a:hover {
 background-color: #0186ba;
 background-image: -moz-linear-gradient(#04acec,  #0186ba);
 background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
 background-image: -webkit-linear-gradient(#04acec, #0186ba);
 background-image: -o-linear-gradient(#04acec, #0186ba);
 background-image: -ms-linear-gradient(#04acec, #0186ba);
 background-image: linear-gradient(#04acec, #0186ba);
}

Стили для первого и последнего элемента меню.

#menu ul li:first-child > a {
 -moz-border-radius: 3px 3px 0 0;
 -webkit-border-radius: 3px 3px 0 0;
 border-radius: 3px 3px 0 0;
}
#menu ul li:first-child > a:after {
 content: »;
 position: absolute;
 left: 40px;
 top: -6px;
 border-left: 6px solid transparent;
 border-right: 6px solid transparent;
 border-bottom: 6px solid #444;
}
#menu ul ul li:first-child a:after {
 left: -6px;
 top: 50%;
 margin-top: -6px;
 border-left: 0;
 border-bottom: 6px solid transparent;
 border-top: 6px solid transparent;
 border-right: 6px solid #3b3b3b;
}
#menu ul li:first-child a:hover:after {
 border-bottom-color: #04acec;
}

#menu ul ul li:first-child a:hover:after {
 border-right-color: #0299d3;
 border-bottom-color: transparent;
}
#menu ul li:last-child > a {
 -moz-border-radius: 0 0 3px 3px;
 -webkit-border-radius: 0 0 3px 3px;
 border-radius: 0 0 3px 3px;
}

jQuery


Данное меню работает во всех популярных современных браузерах, но если вам нужно добавить поддержку также IE6, то без использования JavaScript не обойтись.

$(function() {
 if ($.browser.msie &amp;&amp; $.browser.version.substr(0,1)<7)
 {
 $(‘li’).has(‘ul’).mouseover(function(){
 $(this).children(‘ul’).css(‘visibility’,’visible’);
 }).mouseout(function(){
 $(this).children(‘ul’).css(‘visibility’,’hidden’);
 })
 }
});

Онлайн-демо

Данное меню протестировано в Firefox 8, Chrome 15, Opera 11.52, Safari и IE7.

Скачать исходники.

Перевод


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

Плавно открывающееся меню с помощью CSS

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





Первым делом, давайте напишем HTML код нашего меню. Меню будет простейшим. Для примера у него будет 2 пункта у каждого из которых будет выпадающий список с подпунктами.


<nav>
	<ul>
		<li>
		<a href="#">пункт 1</a>
			<ul>
				<li><a href="#">Выпадающий пункт 1</a></li>
				<li><a href="#">Выпадающий пункт 2</a></li>
				<li><a href="#">Выпадающий пункт 3</a></li>
			</ul>
		</li>
		<li>
		<a href="#">пункт 2</a>
			<ul>
				<li><a href="#">Выпадающий пункт 1</a></li>
				<li><a href="#">Выпадающий пункт 2</a></li>
				<li><a href="#">Выпадающий пункт 3</a></li>
			</ul>
		</li>

	</ul>
</nav>

Думаю тут все понятно, самое простое 2-х уровневое меню. Как и говорил, меню имеет два главных пункта, можете добавить сколько угодно, если нужно. Дальше нужно просто добавить стили, которые и сделают всю магию 🙂


#slow_nav > ul{
	width: 500px;
	margin:25px auto 0;
}

#slow_nav > ul > li{
	list-style: none;
	display: inline-block;
	position:relative;
	padding:0;
}

#slow_nav a{text-decoration:none;}

#slow_nav > ul > li > a{
	font-size:18px;
	padding:5px;
	background-color:#333;
	color:#fff;
}

#slow_nav li ul{
	position:absolute;
	list-style:none;
	text-align:center;
	top:15px;
	font-size:15px;
	left:0;
	margin:0;
	padding:0;

/* Данные строки нужны для правильной работы анимации */
	max-height:0px;
	overflow:hidden;
	-webkit-transition:max-height 0.4s linear;
	-moz-transition:max-height 0.4s linear;
	transition:max-height 0.4s linear;
/* конец */
}

#slow_nav li:hover ul{
	max-height:300px;
}

#slow_nav li ul li{
	background-color:#333;
	border-bottom:1px solid #888;
}

#slow_nav li ul li:last-child{
	border-bottom:none;
}

#slow_nav li ul li a{
	padding:5px 12px;
	color:#fff;
	display:block;
}

#slow_nav li ul li:hover{
	background-color:#444;
}

#slow_nav li ul li:first-child{
	margin-top:25px;
	position:relative;
}

#slow_nav li ul li:first-child:before{
	content:'';
	position:absolute;
	width:1px;
	height:1px;
	border:5px solid transparent;
	border-bottom-color:#333;
	left:10px;
	top:-10px;
}

Код CSS не маленький., но по своей сути не сложный. Если Вы владеете навыками верстки, то запросто разберетесь что и как. Я лишь остановлюсь на некоторых моментах, которые являются важными.

Первым делом это сама анимация. Нужный код выделен комментариев в коде — /* Данные строки нужны для правильной работы анимации */. Удалять из нельзя, в противном случаи анимация перестанет работать. В данном отрезке кода, изначально мы задаем высоту в ноль пикселей —

max-height:0px; и прописываем свойство overflow:hidden;, чтобы скрыть наше дочернее меню, то есть выпадающее. Дальше уже прописываем кроссбраузерное свойство transition, которое совершит анимацию.


-webkit-transition:max-height 0.4s linear;
-moz-transition:max-height 0.4s linear;
transition:max-height 0.4s linear;

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


#slow_nav li:hover ul{
	max-height:300px;
}

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

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

Данный способ можно применять не только к самописным меню но и к тем же динамическим меню, которые создаются системами управления сайтом, например WordPress. Для этого нужно немного подправить стили и все. То есть первый HTML код использовать не нужно, только стили. В стилях нужно заменить имя айди #slow_nav на то что будет у Вас, ну и возможно подправить еще что-то по мелочам. Подробно останавливаться не буду. Для каждого случая нужен персональный подход, так что уж извините 🙂 Я дал идею и способ, а Вам решать, применять его или нет.

На этом все, спасибо за внимание. 🙂

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

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

Здесь вы, как посетитель веб-сайта, ругаетесь на своем ноутбуке, когда некоторые веб-сайты мешают вам делать или находить вещи.

Но затем вы надеваете шляпу своего владельца сайта и — БАМ — вы совершенно другой человек! Все то, что вы раздражали на других сайтах, теперь гордо живет на ваших!

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

Итак, сегодня я хотел бы поговорить об одной из тех вещей, которые вас раздражают на других сайтах, но все же есть на ваших:

Содержание | Быстрая навигация

Раскрывающиеся вертикальные, горизонтальные меню сайта в навигации.

В частности, зачем вам от них избавляться и какие есть альтернативы.

Давайте начнем с этого:

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

Давайте рассмотрим типичные примеры выпадающих меню веб-сайтов, которые сводят ваших посетителей с ума. Они также проиллюстрируют 4 причины, по которым ваше выпадающее меню должно умереть.

4 причины, по которым ваше выпадающее меню должно умереть (и что делать вместо этого).

Причина № 1: Ваши посетители могут пропускать важные страницы.

Представьте, вы попали на этот сайт фрилансера.

Вы хотите узнать о них больше и навести курсор на этот ярлык навигации. Каковы шансы, что вы нажмете на ярлык «Моя история»?

Как меню вредит вашему сайту?

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

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

Какая альтернатива выпадающим меню?

Если ваше выпадающее меню состоит из 1-2 пунктов:

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

Причина № 2: Вы заставляете своих посетителей работать на это и вы создали тонкий контент.

По шкале от 0 до 10, насколько вам нравится нажимать «Наша миссия» или «Наши ценности»?

Представь, ты попал на этот сайт.

Какова вероятность того, что вы хотите узнать об их ценностях, миссии и одобрениях?

Но проблема здесь не только в не относящихся к делу подзаголовках. Это намного хуже.

Как выпадающее меню вредит вашему сайту?

1. Вы просите своих посетителей проделать большую работу, чтобы узнать что-то простое,

… что означает, что они не собираются это делать.

Ваши посетители просто хотят узнать о вас больше, щелкнуть где-нибудь и просто прокрутить вниз, читая.

Но неа, ты решил заставить их работать на это!

2. Вы создали страницы с тонким содержанием.

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

В этом конкретном примере «О нас» ценности и страницы миссий имеют в среднем по 150 слов каждая. 3 страницы, содержащие всего 150 слов, которые не помогают вашим посетителям.

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

Поговорите с посетителями вашего сайта как нормальный человек! Или вы так говорите в реальной жизни, когда люди спрашивают вас о вашем бизнесе?

Какая альтернатива горизонтальным и вертикальным меню сайта?

Напишите одну твердую страницу «О программе», где ваши посетители смогут найти все, что вы хотели бы, чтобы они знали, просто прокрутив вниз. Таким образом, шансы, что они на самом деле все прочитают, намного выше.

Но, допустим, у вас нет выпадающего меню для раздела «О нас».

А как насчет услуг?

Причина № 3: Вам трудно найти соответствующую информацию.

Представь, ты попал на этот сайт.

Вы хотите узнать об их услугах, наведите курсор на меню «Услуги», и эта красота исчезнет.

Ваш следующий ход?

Вероятно, нажав на ярлык «Услуги», в надежде попасть на страницу, где вы перечислите перечисленные услуги вместе с дополнительным текстом.

Попался! Нет такой вещи. Это просто текст.

Итак, вам нужно СЕЙЧАС решить, о каких услугах вы хотели бы узнать.

Не быстрое решение, особенно потому, что в 4 из 6 сервисов есть слово «маркетинг».

Но хорошо, вы нажимаете «Маркетинговый аудит» и начинаете читать.

Хотите узнать о других услугах?

Приготовься прокручивать, парить, выбирать и нажимать, мой друг.

Хотите вернуться к первому интересному сервису?

Какой выпадающий элемент был снова? Нет, не этот. Попробуйте еще раз!

Как это вредит вашему сайту?

Ваши посетители могут пропустить услугу, которая им действительно нужна (и вы можете потерять деньги).

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

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

Они не могут сосредоточиться так!

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

И это было только на рабочем столе! На мобильном телефоне, если вы не правильно реализуете макет выпадающего меню и не сразу видите элементы подменю, у ваших бедных посетителей сайта будет бесконечный список ссылок:

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

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

Ряд вариантов:

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

… Без выпадающего списка под меткой навигации по сервисам, которая ссылается на это:

Причина № 4: Вы сводите посетителей вашего сайта с ума.

Какая альтернатива?

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

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

Что-то вроде этого:

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

  1. Если у вас есть только один выпадающий элемент:
    • либо поместите его как элемент навигации верхнего уровня
    • или удали это.
  2. Если это имеет смысл, объедините информацию на отдельных страницах из раскрывающегося меню и сделайте из нее одну страницу (например, если у вас есть раскрывающееся меню в разделе «О программе» на верхнем элементе навигации).
  3. Если у вас есть раскрывающееся меню Службы:
    • либо используйте только пункт «Услуги» верхнего уровня, который ведет на выделенную страницу «Услуги»
    • или, если вы предлагаете только 1-2 услуги, удалите элемент навигации «Службы» и создайте ссылку на соответствующие службы прямо из навигации верхнего уровня.
  4. Если у вас нет выбора, кроме как предложить своим посетителям множество вариантов навигации, используйте мега-меню.

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

Заключительные слова мудрости.

Будьте внимательным к посетителям сайта.

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

Тогда подумайте о своем сайте. Скорее всего, вы делаете те же ошибки.

✔️ Что такое выпадающее меню?

Это меню в верхней навигации сайта которое показывает подкатегории.

✔️ В чем недостатки выпадающего меню?

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

✔️ Стоит ли отказаться от выпадающего меню?

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

✔️ Что делать если уже есть выпадающее меню?

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

✔️ Как сделать горизонтальный выпадающий список?

Установите раскрывающийся список, включив раскрывающееся меню атрибута data-dropdown и class в контейнер меню. Внутри тега li элемента ul вы можете создать еще один новый тег ul для создания множества уровней раскрывающегося списка.

✔️ Как создать горизонтальное раскрывающееся меню в HTML?

Используйте любой элемент, чтобы открыть раскрывающееся меню, например элемент button, a или p. Используйте элемент контейнера (например, div), чтобы создать раскрывающееся меню и добавить в него раскрывающиеся ссылки. Оберните элемент div вокруг кнопки и div, чтобы правильно расположить раскрывающееся меню с помощью CSS.

✔️ Как изменить горизонтальное меню на вертикальное в редакторе Wix?

Изменение меню сайта с горизонтального на вертикальное в редакторе Wix.
Щелкните свое меню в редакторе.
Нажмите клавишу Delete на клавиатуре.
Щелкните Добавить в левой части редактора.
Щелкните по меню.
Перетащите новое меню на свою страницу.

✔️ Как создать вертикальное раскрывающееся меню в CSS?

Добавьте таблицу стилей и форму или HTML-страницу. Затем на странице HTML или веб-форме . NET добавьте «Div» и назовите его «divMenu».

✔️ Как создать раскрывающееся меню?

На новом листе введите записи, которые должны появиться в раскрывающемся списке. Выберите ячейку на листе, в которой вы хотите открыть раскрывающийся список. Перейдите на вкладку «Данные» на ленте, затем «Проверка данных». На вкладке Параметры в поле Разрешить щелкните Список. Щелкните в поле Источник, затем выберите диапазон списка.

Получить экспертную критику вашего сайта в компании TopUser.Pro

css раскрывающееся вертикальное меню | Все о Windows 10

На чтение 5 мин. Просмотров 39 Опубликовано

Вертикальное плавно раскрывающееся меню аккордеон для сайта с подпунктами основного раздела на HTML5 + CSS3 + JS

Вертикальное раскрывающееся меню HTML + CSS + JS

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

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

Все подпункты меню свернуты Все подпункты меню развернуты Второй подпункт меню развернут. Нумерация идентификаторов начинается с 0 Два подпункта меню развернуты

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

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

Навигация по странице:

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

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

А что же делать с мобильными браузерами? — или на планшетах спросите вы.

К счастью, разработчики мобильных браузеров предусмотрели (к сожалению не везде) возможность срабатывания псевдокласса :hover при первом нажатии на ссылку, если оно описано в CSS. Благодаря этим стараниям, большинство пользователей сможет увидеть ваше вертикальное выпадающее меню CSS.

Пара слов о преимуществе выпадающих меню:

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

Вертикальное выпадающее меню вправо

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

Написание менюшки мы начнем с html кода и сделаем его универсальным на списках, вариант ответа идентичный тому, что возвращает wordpress.

Html для вертикального меню

Думаю в плане понимания html у вас не возникнет никаких сложностей, типичные списки с тегами ul и li. Смотрим код:

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

Вертикальное выпадающее меню CSS

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

Вот эта строчка CSS

Посмотреть что у нас получилось в этом примере можно на скине:

Как работает вертикальное выпадающее меню css вы можете увидеть в режиме демо ниже, или скачав пример:

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

Это еще не конец, идем дальше.

Предположим, что вам нужно сделать выпадающее меню при наведении с выпадашкой влево. На основе примера выпадашки вправо мы сейчас ее и реализуем.

Вертикальное выпадающее меню влево на CSS

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

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

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

Вот и все. У нас получилось вот такое меню. Слева кликабельный скин, справа демо и ссылка на скачивание примера:

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

, который в свою очередь занимает всю ширину его блока-контейнера.

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

1. Вертикальное меню с заголовком

Простой элегантный вариант оформления. Подходит для стилизации категорий на сайте. При наведении элемент списка меняет цвет ссылки.

2. Вертикальное меню в стиле «схема метро»

Интересное решение для оформления вертикального меню, предусмотрено добавление вложенных меню. «Ветка метро» — левая граница списка, маркеры генерируются перед каждой ссылкой.

3. Вертикальное меню с эффектами при наведении

Иконка и фоновая заливка, проявляющиеся при наведении на элемент списка, помогут разнообразить дизайн элементов вертикального меню.

4. Вертикальное меню с иконками

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

5. Вертикальное меню с картинками

Данный пример можно использовать для оформления блоков с новинками, похожими товарами, и т.п. сайте интернет-магазина.

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 Меню

No 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

Автор
  • sean_codes
О коде

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

Только 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

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

Как создать раскрывающееся меню в CSS

Что такое выпадающие списки?

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

Примеры:

Затем вы должны настроить классы в CSS следующим образом:

  .dropdown {
  положение: относительное;
  дисплей: встроенный блок;
}

.dropbtn {
  цвет фона: красный;
  отступ: 10 пикселей;
}

.dropdown-content {
  дисплей: нет;
  позиция: абсолютная;
}

.dropdown: hover .dropdown-content {
  дисплей: блок;
}

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

Пример 

    
  # myNav1 {
    высота: 0;
    ширина: 50%;
    положение: фиксированное;
    z-индекс: 6;
    верх: 0;
    слева: 0;
    цвет фона: #ffff;
    переполнение: скрыто;
    переход: 0.3с;
    непрозрачность: 0,85;
}

# myNav2 {
    высота: 0;
    ширина: 50%;
    положение: фиксированное;
    z-индекс: 6;
    внизу: 0;
    справа: 0;
    цвет фона: #ffff;
    переполнение: скрыто;
    переход: 0,3 с;
    непрозрачность: 0,85;
}

.overlay-content {
    положение: относительное;
    ширина: 100%;
    выравнивание текста: центр;
    маржа сверху: 30 пикселей;
}

# myNav1-content {
    верх: 12%;
    осталось: 5%;
    дисплей: нет;
}

# myNav2-content {
    верх: 12%;
    справа: 10%;
    дисплей: нет;
}

Дополнительная информация о раскрывающихся списках CSS:

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

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

В этом методе исследуется использование:

  • Анимация с переходом CSS и преобразованием
  • Использование : focus-within псевдокласс
  • CSS-сетка для позиционирования
  • техника динамического центрирования
  • Рекомендации по доступности раскрывающихся меню

Если вы когда-нибудь вырывались из головы, имея дело с концепцией «намерения наведения», то это обновление для вас!

Прежде чем мы зайдем слишком далеко, хотя наша методика на 100% использует только CSS, необходимо добавить некоторый Javascript для более полного доступа.Также существует полифилл, необходимый для ключевой функции, чтобы эта функция работала — : focus-within — для наиболее надежной поддержки. Но мы все еще значительно улучшились по сравнению с тем временем, когда нам требовались один или несколько подключаемых модулей jQuery для создания визуальных эффектов.

Обновление специальных возможностей — 18.08.20 : Огромное спасибо Майклу Фэирчайлду из Deque (и создателю превосходного ресурса a11ysupport.io) за тестирование оригинального решения с использованием различных вспомогательных технологий. Метод только с CSS требует некоторого Javascript для полного соответствия WCAG 2.1. В частности, необходимо использовать javascript, чтобы предлагать способ закрытия меню без использования мыши или вкладки (например, клавиша выхода) для соответствия критерию успеха 1.4.13. Майкл указал на эту демонстрацию WAI-ARIA Authoring Practices, которая предоставляет дополнительную информацию о необходимых функциях Javascript. Это настоятельно рекомендуемые дополнения для вашего окончательного производственного решения.

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

Базовая навигация HTML #

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

Привет! Доступна ранняя регистрация на мой предстоящий июльский семинар с Smashing Conference — Level-Up With Modern CSS

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

Прямо за воротами мы реализовали несколько функций специально для обеспечения доступности:

  1. aria-label на
  2. Использование кнопки как фокусируемого, обнаруживаемого элемента для открытия раскрывающегося списка
  3. aria-controls на .dropdown__title , который ссылается на идентификатор .dropdown__menu , чтобы связать его с меню для вспомогательных технологий
  4. aria-extended на кнопке , которую в вашем окончательном решении необходимо переключать через Javascript, как указано в демонстрации, упомянутой в начале этой статьи

Как отметил Майкл, использование элемента button также позволяет пользователям Dragon Naturally Speaking сказать что-то вроде «нажмите кнопку», чтобы открыть меню.

Наш (в основном) начальный вид по умолчанию выглядит следующим образом:

Начальные стили навигации #

Сначала мы дадим несколько стилей контейнера для nav и определим его как контейнер сетки. Затем мы удалим стили списка по умолчанию из nav ul и nav ul li .

  nav {
 background-color: #eee; 
 набивка: 0 1бэр; 
 дисплей: сетка; 
 мест размещения: центр; 
 ul {
 стиль списка: нет; 
 маржа: 0; 
 отступ: 0; 
 дисплей: сетка; 
 
 li {
 заполнение: 0; 
} 
} 
 
}

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

  nav {
> ul {
 grid-auto-flow: столбец; 
 
> li {
 маржа: 0 0.5рем; 
} 
} 
}

Используя селектор дочернего комбинатора > , мы определили, что верхний уровень ul , который является прямым потомком nav , должен переключить его grid-auto-flow на столбец , который эффективно обновляет его до быть вдоль оси x . Затем мы добавляем маржу к элементам верхнего уровня li для большей четкости. Теперь будущие выпадающие элементы появляются под меню «Сладости» и более четко являются его дочерними элементами:

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

  
 .dropdown__title {
 цвет фона: прозрачный; 
 граница: отсутствует; 
 семейство шрифтов: наследование; 
} 
 nav {
> ul {
 
> li {
 a, 
 .dropdown__title {
 text-decoration: none; 
 выравнивание текста: по центру; 
 дисплей: встроенный блок; 
 цвет: синий; 
 размер шрифта: 1.125rem; 
} 
 
 
> a, 
 .dropdown__title {
 padding: 1rem 0.5rem; 
} 
 
} 
} 
}

Базовые стили выпадающего списка #

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

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

 .раскрывающийся список {
 позиция: относительная; 
 .dropdown__menu {
 цвет фона: #fff; 
 радиус границы: 4 пикселя; 
 box-shadow: 0 0,15em 0,25em rgba (черный, 0,25); 
 отступ: 0.5em 0; 
 Мин-ширина: 15 каналов; 
 
 a {
 цвет: # 444; 
 дисплей: блочный; 
 отступ: 0,5 м; 
} 
} 
}

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

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

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

Мы собираемся применить трюк с центрированием, чтобы выровнять центральное меню с элементом списка:

  .dropdown__menu {
 позиция: абсолютная; 
 
 
 верх: выч (100% - 0.25 бэр); 
 осталось: 50%; 
 преобразование: translateX (-50%); 
}

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

Стили раскрытия раскрывающегося списка #

Есть два основных триггера, которые мы хотим использовать для открытия меню: : hover и : focus .

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

: фокус в пределах #

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

Из MDN я выделил курсивом часть, от которой мы будем извлекать выгоду:

Псевдокласс : focus-within CSS представляет элемент, получивший фокус или содержащий элемент, получивший фокус .Другими словами, он представляет собой элемент, который сам соответствует псевдоклассу : focus или имеет потомка, которому соответствует : focus .

Скрыть раскрывающийся список по умолчанию #

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

Вашим первым инстинктом может быть display: none , но это не позволяет нам изящно анимировать переход.

Затем вы можете попробовать просто opacity: 0 , который явно скрывает его, но оставляет после себя «призрачные ссылки», потому что элемент все еще имеет вычисленную высоту.

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

  .dropdown__menu {
 преобразование: rotateX (-90deg) translateX (-50%); 
 трансформация-начало: верхний центр; 
 непрозрачность: 0,3; 
}

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

И мы обновляем наше свойство transform , чтобы включить rotateX (-90deg) , который поворачивает меню в трехмерном пространстве на 90 градусов «назад».Это эффективно убирает высоту и создаст интересный переход на откосе. Также вы заметите свойство transform-origin , которое мы добавляем для обновления точки, вокруг которой применяется преобразование, по сравнению с горизонтальным и вертикальным центром по умолчанию.

Кроме того, для соответствия критерию успеха 1.3.2 ссылки должны быть скрыты от пользователей программ чтения с экрана до тех пор, пока они не отобразятся визуально. Мы обеспечиваем такое поведение, добавляя visibility: hidden (еще раз спасибо Майклу за этот совет!).

Прежде чем мы сделаем раскрытие, нам нужно добавить свойство transition . Мы добавляем его к основному правилу .dropdown__menu , чтобы оно применялось как при включении, так и при выключении фокуса / наведения, иначе говоря, «вперед» и «назад».

  .dropdown__menu {
 переход: 280 мсек без задержки; 
}

Раскрытие раскрывающегося списка #

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

 .раскрывающееся меню {
 &: hover, 
 &: focus-within {
 
 .dropdown__menu {
 opacity: 1; 
 преобразование: rotateX (0) translateX (-50%); 
 видимость: видимая; 
} 
 
} 
 
}

Сначала мы инвертируем visibilty (иначе другие свойства не работали бы), а затем мы инвертировали rotateX , сбрасывая на 0, а затем доводим непрозрачность до 1 для полная видимость.

Вот результат:

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

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

Обработка намерения зависания #

Если вы какое-то время занимались этим Интернетом, я надеюсь, что следующее заставит вас пойти 000

Когда я впервые начал бороться с выпадающими меню, я создавал их в первую очередь для IE7.В большом проекте несколько членов команды спросили что-то вроде «можно ли отключить отображение меню, если я просто прокручиваю меню или наводю на него указатель мыши?». Решением, которое я наконец нашел после долгого поиска в Google (включая попытки придумать правильную фразу, чтобы получить то, что я искал), был плагин hoverIntent jQuery.

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

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

  .dropdown__menu {
 // ... существующие стили 
 переход: 280 мс все 120 мс замедление; 
}

Посмотреть результаты:

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

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

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

Чтобы добавить это, мы обновим стили .dropdown__title . Мы определим его как контейнер inline-flex , а затем создадим элемент : after , который использует трюк с границей для создания стрелки вниз. Мы используем тире translateY () , чтобы оптически выровнять его с нашим текстом:

 .раскрывающийся список {
 .dropdown__title {
 display: inline-flex; 
 align-items: center; 
 
 &: после {
 content: ""; 
 бордюр: 0,35 брем твердый прозрачный; 
 border-top-color: rgba (синий, 0,45); 
 левое поле: 0,25em; 
 преобразование: translateY (0,15em); 
} 
} 
 
}

Вот еще одно место, где вам, возможно, придется улучшить с помощью Javascript.

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

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

Окончательный результат #

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

Стефани Эклс (@ 5t3ph)

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

с подменю

Хотите создать раскрывающееся меню, используя только HTML и CSS? Решение: Выпадающее меню на чистом CSS с подменю, простое меню HTML CSS с несколькими подменю.

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

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

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

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

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

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

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

Вам также может понравиться:

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

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

    и
  • для создания этого меню, я многократно использовал эти теги для создания подменю.

    Для создания значков, которые появляются после каждого выпадающего списка , , я использовал значков CSS Unicode (см. Список). В этом меню все работы выполняются свойством CSS : hover .Сначала я размещаю весь список на их месте, используя свойство postion: . Сначала я просто скрываю все подменю и выпадающий список, они все будут видны при наведении курсора мыши.

    Нечего объяснять, все это очень легко понять, вы легко поймете после получения кодов . Для , создающего это раскрывающееся меню , вам нужно создать только 2 файла: один для HTML и один для CSS . Выполните следующие действия, чтобы создать его без ошибок.

    index.html

    Создайте файл HTML с именем index.html и поместите эти коды, приведенные ниже.

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

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11 12

    11

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27

    28

    32

    33

    34

    35

    36

    37

    38

    39

    40

    41

    42

    43

    44

    0005

    000

    44

    000 48

    49

    50

    51

    52

    53

    54

    55

    56

    57

    58

    59

    60

    61 9000 5

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

    < / html>

    стиль.css

    Теперь создайте файл CSS с именем « style.css » и поместите эти коды.

    / ** код от webdevtrick (https://webdevtrick.com) ** / тело { фон: # 212121; размер шрифта: 22 пикселя; высота строки: 32 пикселя; цвет: #ffffff; перенос слов: слово-слово! важно; семейство шрифтов: «Зыбучие пески», без засечек; маржа: 0; отступ: 0; } h2 { размер шрифта: 60 ​​пикселей; выравнивание текста: центр; цвет: #FFF; маржа сверху: 150 пикселей; семейство шрифтов: «Russo One», без засечек; } h2 span { цвет: # FF4649; } #container { маржа: 0 авто; } nav { маржа: 35px 0; цвет фона: # FF4649; } nav ul { отступ: 0; маржа: 0; стиль списка: нет; положение: относительное; } nav ul li { дисплей: встроенный блок; цвет фона: # FF4649; } nav a { дисплей: блок; отступ: 0 10 пикселей; цвет: #FFF; размер шрифта: 20 пикселей; высота строки: 60 пикселей; текстовое оформление: нет; } nav a: hover { цвет фона: # 333; } nav ul ul { дисплей: нет; позиция: абсолютная; верх: 60 пикселей; } nav ul li: hover> ul { дисплей: наследовать; } nav ul ul li { ширина: 230 пикселей; float: нет; отображение: элемент списка; положение: относительное; } nav ul ul ul li { положение: относительное; верх: -60 пикселей; слева: 230 пикселей; } nav ul ul li { граница: сплошной белый 1px; } li> a: after {content: ‘▼’; } li> a: only-child: after {content: »; }

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    130002 140002

    140002

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27

    28

    2

    28

    2

    33

    34

    35

    36

    37

    38

    39

    40

    41

    42

    43

    44

    45

    0005 49

    50

    51

    52

    53

    54

    55

    56

    57

    58

    59

    60

    61

    900 02 62

    63

    64

    65

    66

    67

    68

    69

    70

    71

    72

    73

    74

    		 через webdev : // webdevtrick.com) ** /

    body {

    background: # 212121;

    font-size: 22px;

    высота строки: 32 пикселя;

    цвет: #ffffff;

    перенос слов: break-word! Important;

    Семейство шрифтов

    : Quicksand, без засечек;

    маржа: 0;

    отступ: 0;

    }

    h2 {

    font-size: 60 пикселей;

    выравнивание текста: по центру;

    цвет: #FFF;

    margin-top: 150 пикселей;

    font-family: ‘Russo One’, без засечек;

    }

    интервал h2 {

    цвет: # FF4649;

    }

    #container {

    маржа: 0 авто;

    }

    nav {

    margin: 35px 0;

    цвет фона: # FF4649;

    }

    nav ul {

    заполнение: 0;

    маржа: 0;

    стиль списка: нет;

    позиция: относительная;

    }

    nav ul li {

    дисплей: встроенный блок;

    цвет фона: # FF4649;

    }

    nav a {

    дисплей: блок;

    отступ: 0 10 пикселей;

    цвет: #FFF;

    размер шрифта: 20 пикселей;

    высота строки: 60 пикселей;

    текстовое оформление: нет;

    }

    nav a: hover {

    background-color: # 333;

    }

    nav ul ul {

    дисплей: нет;

    позиция: абсолютная;

    верх: 60 пикселей;

    }

    nav ul li: hover> ul {

    display: наследовать;

    }

    nav ul ul li {

    width: 230px;

    поплавок: нет;

    дисплей: элемент списка;

    позиция: относительная;

    }

    nav ul ul ul li {

    позиция: относительная;

    верх: -60 пикселей;

    слева: 230 пикселей;

    }

    nav ul ul li {

    граница: сплошной белый 1 пиксель;

    }

    li> a: after {content: ‘▼’; }

    li> a: only-child: после {content: »; }

    Вот и все.Теперь вы успешно создали раскрывающееся меню Pure CSS с подменю . Другими словами, Простое меню HTML CSS с раскрывающимся списком . Если у вас есть какие-либо сомнения или вопросы, прокомментируйте их ниже.

    Спасибо за посещение, продолжайте посещать.

    Показать скрыть раскрывающееся меню при наведении курсора мыши с помощью CSS

    Тема: HTML / CSSPrev | След.

    Ответ: Используйте CSS

    : hover псевдокласс

    Если вы просто хотите показывать и скрывать раскрывающееся меню при наведении курсора мыши, вам не нужен JavaScript.Вы можете сделать это, просто используя свойство CSS display и псевдокласс : hover .

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

      



 Показать скрыть раскрывающийся список с помощью CSS 
<стиль>
    ul {
        отступ: 0;
        стиль списка: нет;
        фон: # f2f2f2;
    }
    ul li {
        дисплей: встроенный блок;
        положение: относительное;
        высота строки: 21px;
        выравнивание текста: слева;
    }
    ul li a {
        дисплей: блок;
        отступ: 8px 25px;
        цвет: # 333;
        текстовое оформление: нет;
    }
    ul li a: hover {
        цвет: #fff;
        фон: # 939393;
    }
    ul li ul.падать {
        минимальная ширина: 100%; / * Устанавливаем ширину раскрывающегося списка * /
        фон: # f2f2f2;
        дисплей: нет;
        позиция: абсолютная;
        z-индекс: 999;
        слева: 0;
    }
    ul li: hover ul.dropdown {
        дисплей: блок; / * Показать раскрывающийся список * /
    }
    ul li ul.dropdown li {
        дисплей: блок;
    }

    Вопросы и ответы по теме

    Вот еще несколько часто задаваемых вопросов по этой теме:

    Как создать адаптивную раскрывающуюся навигацию с использованием только 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. Ваш недавно изученный «метод с флажками» можно использовать и в других местах!

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

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

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

    Многоуровневое раскрывающееся меню с чистым CSS

    Последнее изменение: 10 сентября 2020 г.

    Показывать выпадающее многоуровневое меню только с помощью CSS и HTML очень просто и легко. В предыдущем уроке мы показали одноуровневое раскрывающееся меню с помощью jQuery. В этом руководстве мы делаем это для многоуровневого меню без jQuery или любого Javascript.

    Посмотреть демоСкачать

    HTML-код для многоуровневого меню

    Этот HTML-код с вложенным неупорядоченным списком используется для отображения меню в многоуровневом режиме.

    Многоуровневое меню CSS

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

     .parent {display: block; position: relative; float: left; line-height: 30px; background-color: # 4FA0D8; border-right: #CCC 1px solid;}
.parent a {margin: 10px; color: #FFFFFF; text-decoration: none;}
.parent: hover> ul {display: block; position: absolute;}
.child {display: none;}
.дочерний li {background-color: # E4EFF7; line-height: 30px; border-bottom: #CCC 1px solid; border-right: #CCC 1px solid; ширина: 100%;}
.child li a {color: # 000000;}
ul {стиль списка: нет; маржа: 0; отступ: 0 пикселей; min-width: 10em;}
ul ul ul {left: 100%; top: 0; margin-left: 1px;}
li: hover {background-color: # 95B4CA;}
.parent li: hover {background-color: # F0F0F0;}
.expand {font-size: 12px; float: right; margin-right: 5px;}

    Посмотреть демоСкачать

    ↑ Вернуться к началу

    .

    No related posts.

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

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