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

Содержание

Большой обзор красивых многоуровневых меню с codepen / Блог компании mr. Gefest / Хабр

Хабр, привет!

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

Раньше я их выкладывал в группе продукта облачной IDE mr. Gefest, это были сборки из 5-8 решений. Но теперь у меня стало скапливаться по 15-30 скриптов в разных тематиках (кнопки, меню, подсказки и так далее).

Такие большие наборы следует показывать большему числу специалистов. Поэтому выкладываю их на Хабр. Надеюсь они будут Вам полезны.

В этом обзоре мы рассмотрим многоуровневые меню.

Flat Horizontal Navigation

Красивая навигационная панель с плавно появляющимся подменю. Код хорошо структурирован, используется js. Судя по использованным возможностям, работает в ie8+.
http://codepen. io/andytran/pen/kmAEy

Material Nav Header w/ Aligned Dropdowns

Адаптивная панель ссылок с двухколонным подменю. Все сделано на css и html. Применены css3 селекторы, которые не поддерживаются в ie8.
http://codepen.io/colewaldrip/pen/KpRwgQ

Smooth Accordion Dropdown Menu

Стильное вертикальное меню с плавно раскрывающимися элементами. Используется transition, transform js-код.
http://codepen.io/fainder/pen/AydHJ

Pure CSS Dark Inline Navigation Menu

Темная вертикальная навигационная панель с иконками из ionicons. Применяется javascript. В ie8 скорее всего будет работать без анимации.
http://codepen.io/3lv3n_snip3r/pen/XbddOO

Pure CSS3 Mega Dropdown Menu With Animation

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

Ссылка на вертикальную: http://codepen.io/rizky_k_r/full/sqcAn/

Ссылка на горизонтальную: http://codepen.io/rizky_k_r/pen/xFjqs

CSS3 Dropdown Menu

Горизонтальное меню с большими элементами и выпадающим списком ссылок. Чистый и минималистичный код без js.
http://codepen.io/ojbravo/pen/tIacg

Simple Pure CSS Dropdown Menu

Простое, но стильное горизонтальное меню. Используется font-awesome. Все работает на css и html, без js. В ie8 будет работать.
http://codepen.io/Responsive/pen/raNrEW

Bootstrap 3 mega-dropdown menu

Отличное решение для интернет-магазинов. Отображает несколько уровней категорий и большие изображения (например, товар по акции). В его основе лежит boostrap 3.
http://codepen.io/organizedchaos/full/rwlhd/

Flat Navigation

Стильная навигационная панель с плавным подменю. В старых браузерах отобразится с проблемами.
http://codepen.io/andytran/pen/YPvQQN

3D nested navigation

Горизонтальное меню с очень крутой анимацией без js!
http://codepen.io/devilishalchemist/pen/wBGVor

Responsive Mega Menu — Navigation

Горизонтальное адаптивное меню. Выглядит неплохо, но мобильная версия немного «хромает». Используется css, html и js.
http://codepen.io/samiralley/pen/xvFdc

Pure Css3 Menu

Оригинальное меню. С простым и чистым кодом без js. Применяйте для «вау» эффектов.
http://codepen.io/Sonick/pen/xJagi

Full CSS3 Dropdown Menu

Красочное выпадающее меню с одним уровнем вложенности. Используются иконки из font-awesome, html и css.
http://codepen.io/daniesy/pen/pfxFi

Css3 only dropdown menu

Достаточно неплохое горизонтальное меню с тремя уровнями вложенности. Работает без js.
http://codepen.io/riogrande/pen/ahBrb

Dropdown Menus

Минималистичное меню с оригинальным эффектом появления вложенного списка элементов. Радует, что это решение тоже без javascript.
http://codepen.io/kkrueger/pen/qfoLa

Pure CSS DropDown Menu

Примитивное, но эффективное решение. Только css и html.
http://codepen.io/andornagy/pen/xhiJH

Pull Menu — Menu Interaction Concept

Интересный концепт меню для мобильного телефона. Я такого ещё не видел. Используется html, css и javascript.
http://codepen.io/fbrz/pen/bNdMwZ

Make Simple Dropdown Menu

Чистый и простой код, без js. В ie8 точно работать будет.
http://codepen.io/nyekrip/pen/pJoYgb

Pure CSS dropdown [work for mobile touch screen]

Решение неплохое, но слишком уж много используется классов. Радует, что нет js.
http://codepen.io/jonathlee/pen/mJMzgR

Dropdown Menu

Симпатичное вертикальное меню с минимальным javascript-кодом. JQuery не используется!
http://codepen.io/MeredithU/pen/GAinq

CSS 3 Dropdown Menu

Горизонтальное меню с дополнительными подписями может хорошо украсить Ваш сайт. Код простой и понятный. Javascript не применяется.
http://codepen.io/ibeeback/pen/qdEZjR

KVdKQJ (автор очень долго думал над названием)

Красивое решение с большим количеством кода (html, css и js). Придумано 3 формата подменю. Для интернет-магазинов решение хорошо подходит.
http://codepen.io/martinridgway/pen/KVdKQJ

CSS3 Menu Dropdowns (особенное решение)!

Темное горизонтальное меню с тринадцатью (13) вариантами анимации! Обязательно советую ознакомиться, пригодится в быту.
http://codepen.io/cmcg/pen/ofFiz

П. С.

Надеюсь, Вам понравилась сборка из 23 решений. Если хотите и дальше их читать, то пройдите снизу опрос.

Всем приятной работы.

Как сделать многоуровневое выпадающее меню только с HTML и CSS (возможно, крошечное JavaScript)

Новичок в CSS и может найти только одноуровневые меню. Вот меню и список пунктов:

<ul>
    <li>
        <a href="#">Home</a>
    </li>
    <li>
        <a href="#">Forums</a>
        <ul>
            <a href="#">Basketball</a>
            <ul>
                <li>
                    <a href="#">Trading</a>
                </li>
                <li>
                    <a href="#">Personal Collections</a>
                </li>
                <li>
                    <a href="#">Box Breaks</a>
                </li>
            </ul>
        </ul>
    </li>
</ul>

Как видите, он будет многоуровневым. Теперь, когда у меня есть CSS, сначала отображаются только главная страница и форумы, а когда я навожу курсор на форумы, баскетбол-это displayed…but, как и последующие пункты меню. Я хочу, чтобы они оставались скрытыми, пока я не нависну над баскетболом. Кто-нибудь знает, как сделать это только с CSS или как можно меньше JavaScript? Спасибо. Вот код CSS, который у меня есть:

ul
{
    margin: 0;
    padding: 0;
    list-style: none;
    width: 150px;
    border-bottom: 1px solid #ccc;
}

ul li
{
    position: relative;
}

li ul
{
    position: absolute;
    left: 149px;
    top: 0;
    display: none;
}

ul li a
{
    display: block;
    text-decoration: none;
    color: #777;
    background: #bad8f8;
    padding: 2px 0 2px 10px;
    border: 1px solid #ccc;
    border-bottom: 0;
}

li:hover ul
{
    display: block;
}

/* Styles for validation helpers
-----------------------------------------------------------*/
.field-validation-error
{
    color: #ff0000;
}

.field-validation-valid
{
    display: none;
}

. input-validation-error
{
    border: 1px solid #ff0000;
    background-color: #ffeeee;
}

.validation-summary-errors
{
    font-weight: bold;
    color: #ff0000;
}

.validation-summary-valid
{
    display: none;
}

html

css

stylesheet

drop-down-menu

Поделиться

Источник

XstreamINsanity

20 января 2011 в 22:09

3 ответа

Wordpress многоуровневое выпадающее меню
Я создал собственную тему для своего сайта. Здесь я хочу создать многоуровневое выпадающее меню, и я сделал это с помощью панели мониторинга, но появляется только выпадающее меню.
Javascript многоуровневое выпадающее меню
HTML код: <ul class=nav-menu> <li id=no onmouseover=dropDown() onmouseout=reverseDropDown()> <a href=# >Birds</a> <ul class=menu> <li id=no2 ><a href=# onmouseover=dropDown2() onmouseout=reverseDropDown2()>Ratites</a> <ul class=submenu>. ..

Вот рабочая демонстрация:

http://jsfiddle.net/rcravens/aqz8q/

Я сделал две вещи.

Небольшая реструктуризация списка ul/li. Некоторые элементы были не в Ли.
Используется ‘li:hover > ul’ для выбора только прямых дочерних элементов.

Надеюсь, это поможет.

Боб

Поделиться

rcravens

20 января 2011 в 22:17

То, как вы структурировали свой css, приводит к тому, что все потомки «Basketball» наследуют его css. Вместо этого вы должны использовать child(«>») или :first-child selector. Посмотрите на разделы 5.5 и 5.6 здесь, чтобы понять, о чем я говорю: http:/ / www.w3.org/TR/CSS2 / selector. html

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

Поделиться

Bhavya

20 января 2011 в 22:23

Попробуйте добавить

ul li ul{position: absolute; top: 0; left: 0; width: 250px; height: 250px; background-color: #EEE;}

И идите оттуда 🙂

Поделиться

plebksig

20 января 2011 в 22:18

Многоуровневое горизонтальное меню на HTML и CSS

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

Делать наше меню заново нету смысла, по-этому сегодня мы просто возьмем за основу “Простое горизонтальное меню”, которое я описывал здесь. Так что вы можете просто скачать исходники нашего меню и дописать всего пару строчек.

HTML

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

<ul>
        <li><a href="#">О нас</a></li>
        <li>
                <a href="#">Статьи</a>
                <ul>
                        <li><a href="#">HTML</a></li>
                        <li><a href="#">CSS</a></li>
                        <li>
                            <a href="#">jQuery</a>
                            <ul>
                                <li><a href="#">Вступление</a></li>
                                <li><a href="#">Начальный</a></li>
                                <li><a href="#">Продвинутый</a></li>
                            </ul>
                        </li>
                </ul>
        </li>
        <li>
                <a href="#">Видео курс</a>

        </li>
        <li>
                <a href="#">Материалы</a>
        </li>
        <li>
                <a href="#">Форум</a>
        </li>
</ul>

CSS

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

#menu {
        padding: 0;
        margin: 0;
        font-family:  Verdana;
        }
#menu li {
        list-style: none;
        float: left;
        height: 30px;
        padding: 0;
        margin: 0;
        width: 150px;
        text-align: center;
        background:  #95DF8E;
        position: relative;
        padding-top: 12px;
        }
#menu li ul{
        list-style: none;
        padding: 0;
        margin: 0;
        width: 150px;
        display: none;
        position: absolute;
        left: 0;
        top: 42px;
        }
#menu li ul li{
        float: none;
        height: 30px;
        margin: 0;
        width: 150px;
        text-align: center;
        background: #95DF8E;
        }
#menu li a{
        display: block;
        width: 150px;
        height: 30px;
        color:    #006A35;
        text-decoration: none;
        }

  #menu li:hover ul{
          display: block;
          }
  #menu li:hover{
          background: #35C835;
          }
  #menu li ul li ul{
    left:150px;
    top: 0;
  }
  #menu li ul li ul li{display: none;}
  #menu li ul li:hover ul li{display: block;}

Готово

Вот и все – наше превращение закончено. Но не увлекайтесь – больше не значит лучше. Подсказка: если в вашем меню не все пункты меню разворачиваются – пометьте те, которые могут развернутся(например, знаком “+”, или картинкой на фоне)

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

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

Многоуровневое меню | PROG-TIME

Сегодня мы научимся создавать многоуровневое меню и подробно разберём как это делается. Многоуровневое меню — это меню которое имеет выпадающие окна с дополнительными пунктами меню. Этот пример подойдёт только для людей которые знают азы HTML и CSS. В противном случае вы просто не поймёте транскрипцию.

Многоуровневое меню начинаем с HTML.

Для начала пишем стандартный шаблон. Как правильно писать базовый HTML, можно посмотреть здесь http://prog-time.ru/2017/12/13/bazovyj-kod-html/

В тег <body> мы вписываем структуру меню.

Само меню, целиком, находится внутри тега <nav>. Для этого также можно использовать и тег <div>.

Вся структура состоит из цепочки тегов. Меню начинается с тега <ul>, который задаёт список. Этот тег как бы делит меню на блоки, и без него не получится сделать дополнительное подменю. В дальнейшем в таблице стилей CSS, можно будет задать стили и положение этого меню.

Внутри тега <li> можно написать тег <a>с атрибутом href="http://Название_Страницы",чтобы указать куда ведёт эта ссылка. Так же на момент редактирования можно поставить атрибут с таким значением href="#". При этом ссылка будет работать, но не будет не куда вести.

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


<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="UTF-8">
	<title>Выпадающее меню</title>
	<link rel="stylesheet" href="css/style.css">
</head>
<body>
	<nav>
	    <ul>
		<li><a href="#">Главная</a></li>
		<li><a href="#">Товары</a>
			<ul>
			    <li><a href="#">Машины</a></li>
			    <li><a href="#">Мотоциклы</a>
				<ul>
				    <li><a href="#">Yamaha</a>
				        <ul>
					    <li><a href="#">2017</a></li>
					</ul>
				    </li>
				    <li><a href="#">Kawasaki</a></li>
					</ul>
				    </li>
				    <li><a href="#">Катера</a></li>
					</ul>
			    </li>
		<li><a href="#">Контакты</a></li>
	   </ul>
	</nav>
</body>
</html>

В данном случае у нас получился вот такой результат

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

* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

.container {
	width: 1140px;
	margin: 0 auto;
}

/*Menu*/

.toggleMenu {
	display: none;
}

.drop-menu ul {
	list-style: none;
	background-color: #f8f8f8;
	border: 1px solid #e7e7e7;
}

.drop-menu > ul {
	display: flex;	
}

.drop-menu a {
	padding: 15px;
	display: block;
	text-decoration: none;
	color: #777;
}

.drop-menu a:hover {
	background-color: #e7e7e7;
	color: #555;
}

.drop-menu > ul li {
	position: relative;
}

.drop-menu li ul {
	position: absolute;
	display: none;
	min-width: 150px;
}

.drop-menu li > ul li ul {
	position: absolute;
	right: -150px;
	top: 0;
}

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

.drop-menu .drop > a:after {
	margin-left: 7px;
    content: "\f0da";
    font-family: FontAwesome;
}

.drop-menu > ul > .drop > a:after {
	margin-left: 7px;
    content: "\f0d7";
    font-family: FontAwesome;	
}

.drop-menu [type="checkbox"] {
	display: none;
}

.drop-menu label.toggleMenu {
	border: 1px solid #ddd;
	padding: 9px 10px;
}

/*Menu-end*/

Преобразовав, мы получили вот такое меню.

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

Многоуровневое вертикальное меню HTML и CSS

18 ноября, 2015 11 290 1

На днях быстро нужно было сделать простое многоуровневое меню при помощи только css и html. Потратил на поиски минут 15, чего то подходящего что б не переделывать так и не нашел. По этому решил быстрее написать новое чем чистить чужой код. Вот что получилось

CSS

ul{
	list-style: none;
	background-color: #484f61;
	width: 200px;
	border: 1px solid #2a323f;
	border-bottom: none;
	color: #fff;
}
ul li{
	border-bottom: 1px solid #2a323f;
	position: relative;
}
ul li:hover{
	background-color: #2a323f;
}
ul li:hover ul{
	display: block;
}
ul li:hover ul li ul{
	display: none;
}
ul li a{
	color: #fff;
	padding: 10px 20px;
	display: block;
	text-decoration: none;
	font-weight: bold;
}
ul li a:hover{
	background-color: #5d99cf;
	color: #fff;
}
ul li ul li:hover ul{
	display: block;
}
ul li ul{
	position: absolute;
	left: 200px;
	top: 0px;
	display: none;
}

ul{
list-style: none;
background-color: #484f61;
width: 200px;
border: 1px solid #2a323f;
border-bottom: none;
color: #fff;
}
ul li{
border-bottom: 1px solid #2a323f;
position: relative;
}
ul li:hover{
background-color: #2a323f;
}
ul li:hover ul{
display: block;
}
ul li:hover ul li ul{
display: none;
}
ul li a{
color: #fff;
padding: 10px 20px;
display: block;
text-decoration: none;
font-weight: bold;
}
ul li a:hover{
background-color: #5d99cf;
color: #fff;
}
ul li ul li:hover ul{
display: block;
}
ul li ul{
position: absolute;
left: 200px;
top: 0px;
display: none;
}

HTML

<ul>
	<li><a href="#">Главная</a></li>
	<li><a href="#">Новости</a></li>
	<li><a href="#">Прайс</a></li>
	<li><a href="#">Услуги</a>
		<ul>
			<li><a href="#">Услуга 1</a></li>
			<li><a href="#">Услуга 2</a></li>
			<li><a href="#">Услуга 3</a>
				<ul>
					<li><a href="#">Услуга 1</a></li>
					<li><a href="#">Услуга 2</a></li>
					<li><a href="#">Услуга 3</a></li>
					<li><a href="#">Услуга 4</a></li>
					<li><a href="#">Услуга 5</a></li>
				</ul>
			</li>
			<li><a href="#">Услуга 4</a></li>
			<li><a href="#">Услуга 5</a></li>
		</ul>
	</li>
	<li><a href="#">Контакты</a></li>
</ul>

<ul>
<li><a href=»#»>Главная</a></li>
<li><a href=»#»>Новости</a></li>
<li><a href=»#»>Прайс</a></li>
<li><a href=»#»>Услуги</a>
<ul>
<li><a href=»#»>Услуга 1</a></li>
<li><a href=»#»>Услуга 2</a></li>
<li><a href=»#»>Услуга 3</a>
<ul>
<li><a href=»#»>Услуга 1</a></li>
<li><a href=»#»>Услуга 2</a></li>
<li><a href=»#»>Услуга 3</a></li>
<li><a href=»#»>Услуга 4</a></li>
<li><a href=»#»>Услуга 5</a></li>
</ul>
</li>
<li><a href=»#»>Услуга 4</a></li>
<li><a href=»#»>Услуга 5</a></li>
</ul>
</li>
<li><a href=»#»>Контакты</a></li>
</ul>

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

/**

* main.js

* //www.codrops.com

* Licensed under the MIT license.

* //www.opensource.org/licenses/mit-license.php

* //www.codrops.com

;(function(window) {

‘use strict’;

var support = { animations : Modernizr.cssanimations },

animEndEventNames = { ‘WebkitAnimation’ : ‘webkitAnimationEnd’, ‘OAnimation’ : ‘oAnimationEnd’, ‘msAnimation’ : ‘MSAnimationEnd’, ‘animation’ : ‘animationend’ },

animEndEventName = animEndEventNames[ Modernizr.prefixed( ‘animation’ ) ],

onEndAnimation = function( el, callback ) {

var onEndCallbackFn = function( ev ) {

if( support.animations ) {

if( ev.target != this ) return;

this.removeEventListener( animEndEventName, onEndCallbackFn );

}

if( callback && typeof callback === ‘function’ ) { callback.call(); }

};

if( support.animations ) {

el.addEventListener( animEndEventName, onEndCallbackFn );

}

else {

onEndCallbackFn();

}

};

function extend( a, b ) {

for( var key in b ) {

if( b.hasOwnProperty( key ) ) {

a[key] = b[key];

}

return a;

}

function MLMenu(el, options) {

this.el = el;

this.options = extend( {}, this.options );

extend( this.options, options );

// меню

this.menus = [].slice.call(this.el.querySelectorAll(‘.menu__level’));

// индекс текущего уровня меню

this.current = 0;

this._init();

}

MLMenu.prototype.options = {

// показываем хлебные крошки

breadcrumbsCtrl : true,

// задаем текст хлебных крошек

initialBreadcrumb : ‘all’,

// отображаем кнопку назад

backCtrl : true,

// задержка анимации между каждым пунктом меню

itemsDelayInterval : 60,

// направление

direction : ‘r2l’,

// колбек: клик по пункту меню без подменю

// onItemClick([событие], [inner HTML кликнутого пункта меню])

onItemClick : function(ev, itemName) { return false; }

};

MLMenu.prototype._init = function() {

// проходимся по всем существующим меню и создаем массив, массив объектов, в объектах содержится информация о всех элементах меню и их подменю

this.menusArr = [];

var self = this;

this.menus.forEach(function(menuEl, pos) {

var menu = {menuEl : menuEl, menuItems : [].slice.call(menuEl.querySelectorAll(‘.menu__item’))};

self.menusArr.push(menu);

// задаем пункту меню класс текущего

if( pos === self.current ) {

classie.add(menuEl, ‘menu__level—current’);

}

});

// создаем кнопку назад

if( this.options.backCtrl ) {

this.backCtrl = document.createElement(‘button’);

this.backCtrl.className = ‘menu__back menu__back—hidden’;

this.backCtrl.setAttribute(‘aria-label’, ‘Go back’);

this.backCtrl.innerHTML = »;

this.el.insertBefore(this.backCtrl, this.el.firstChild);

}

// создаем хлебные крошки

if( self.options.breadcrumbsCtrl ) {

this.breadcrumbsCtrl = document.createElement(‘nav’);

this.breadcrumbsCtrl.className = ‘menu__breadcrumbs’;

this.el.insertBefore(this.breadcrumbsCtrl, this.el.firstChild);

// инициализация хлебных крошек

this._addBreadcrumb(0);

}

// вызов события

this._initEvents();

};

MLMenu.prototype._initEvents = function() {

var self = this;

for(var i = 0, len = this.menusArr.length; i < len; ++i) {

this.menusArr[i].menuItems.forEach(function(item, pos) {

item.querySelector(‘a’).addEventListener(‘click’, function(ev) {

var submenu = ev.target.getAttribute(‘data-submenu’),

itemName = ev.target.innerHTML,

subMenuEl = self.el.querySelector(‘ul[data-menu=»‘ + submenu + ‘»]’);

// проверяем, есть подменю у данного пункта

if( submenu && subMenuEl ) {

ev.preventDefault();

// открываем подменю

self._openSubMenu(subMenuEl, pos, itemName);

}

else {

// добавляем меню класс текущего меню

var currentlink = self.el.querySelector(‘.menu__link—current’);

if( currentlink ) {

classie.remove(self.el.querySelector(‘.menu__link—current’), ‘menu__link—current’);

}

classie.add(ev.target, ‘menu__link—current’);

// колбек

self.options.onItemClick(ev, itemName);

}

});

}

// обратная навигация

if( this.options.backCtrl ) {

this.backCtrl.addEventListener(‘click’, function() {

self._back();

});

}

};

MLMenu.prototype._openSubMenu = function(subMenuEl, clickPosition, subMenuName) {

if( this.isAnimating ) {

return false;

}

this.isAnimating = true;

// сохраняем индекс родительского меню для возврата

this.menusArr[this.menus.indexOf(subMenuEl)].backIdx = this.current;

// сохраняем имя родительского меню

this.menusArr[this.menus.indexOf(subMenuEl)].name = subMenuName;

// убираем текущее меню

this._menuOut(clickPosition);

// плавно показываем подменю

this._menuIn(subMenuEl, clickPosition);

};

MLMenu.prototype._back = function() {

if( this.isAnimating ) {

return false;

}

this.isAnimating = true;

// текущее меню плавно уходит

this._menuOut();

// предыдущее меню плавно появляется

var backMenu = this.menusArr[this.menusArr[this.current].backIdx].menuEl;

this._menuIn(backMenu);

// удаляем предыдущие хлебные крошки

if( this.options.breadcrumbsCtrl ) {

this.breadcrumbsCtrl.removeChild(this.breadcrumbsCtrl.lastElementChild);

}

};

MLMenu.prototype._menuOut = function(clickPosition) {

// текущее меню

var self = this,

currentMenu = this.menusArr[this.current].menuEl,

isBackNavigation = typeof clickPosition == ‘undefined’ ? true : false;

// пункты текущего меню плавно уезжают, сначала задаем задержку для пунктов меню

this.menusArr[this.current].menuItems.forEach(function(item, pos) {

item.style.WebkitAnimationDelay = item.style.animationDelay = isBackNavigation ? parseInt(pos * self.options.itemsDelayInterval) + ‘ms’ : parseInt(Math.abs(clickPosition — pos) * self.options.itemsDelayInterval) + ‘ms’;

});

// класс анимации

if( this.options.direction === ‘r2l’ ) {

classie.add(currentMenu, !isBackNavigation ? ‘animate-outToLeft’ : ‘animate-outToRight’);

}

else {

classie.add(currentMenu, isBackNavigation ? ‘animate-outToLeft’ : ‘animate-outToRight’);

}

};

MLMenu.prototype._menuIn = function(nextMenuEl, clickPosition) {

var self = this,

// текущее меню

currentMenu = this.menusArr[this.current].menuEl,

isBackNavigation = typeof clickPosition == ‘undefined’ ? true : false,

// индекс nextMenuEl

nextMenuIdx = this.menus.indexOf(nextMenuEl),

nextMenuItems = this.menusArr[nextMenuIdx].menuItems,

nextMenuItemsTotal = nextMenuItems.length;

// плавно показываем пункты следующего меню – устанавливаем задержку для пунктов

nextMenuItems.forEach(function(item, pos) {

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

// последний пункт самый дальний от кликнутого

// вычислим индекс дальнего элемента

var farthestIdx = clickPosition <= nextMenuItemsTotal/2 || isBackNavigation ? nextMenuItemsTotal — 1 : 0;

if( pos === farthestIdx ) {

onEndAnimation(item, function() {

// сбрасываем классы

if( self.options.direction === ‘r2l’ ) {

classie.remove(currentMenu, !isBackNavigation ? ‘animate-outToLeft’ : ‘animate-outToRight’);

classie.remove(nextMenuEl, !isBackNavigation ? ‘animate-inFromRight’ : ‘animate-inFromLeft’);

}

else {

classie.remove(currentMenu, isBackNavigation ? ‘animate-outToLeft’ : ‘animate-outToRight’);

classie.remove(nextMenuEl, isBackNavigation ? ‘animate-inFromRight’ : ‘animate-inFromLeft’);

}

classie.remove(currentMenu, ‘menu__level—current’);

classie.add(nextMenuEl, ‘menu__level—current’);

//сброс текущего меню

self.current = nextMenuIdx;

// проверяем кнопку назад и хлебные крошки

if( !isBackNavigation ) {

// показываем кнопку назад

if( self.options.backCtrl ) {

classie.remove(self.backCtrl, ‘menu__back—hidden’);

}

// добавляем хлебные крошки

self._addBreadcrumb(nextMenuIdx);

}

else if( self.current === 0 && self.options.backCtrl ) {

// прячем кнопку назад

classie.add(self.backCtrl, ‘menu__back—hidden’);

}

// we can navigate again..

self.isAnimating = false;

});

}

});

// класс анимации

if( this.options.direction === ‘r2l’ ) {

classie.add(nextMenuEl, !isBackNavigation ? ‘animate-inFromRight’ : ‘animate-inFromLeft’);

}

else {

classie.add(nextMenuEl, isBackNavigation ? ‘animate-inFromRight’ : ‘animate-inFromLeft’);

}

};

MLMenu.prototype._addBreadcrumb = function(idx) {

if( !this.options.breadcrumbsCtrl ) {

return false;

}

var bc = document.createElement(‘a’);

bc.innerHTML = idx ? this.menusArr[idx].name : this.options.initialBreadcrumb;

this.breadcrumbsCtrl.appendChild(bc);

var self = this;

bc.addEventListener(‘click’, function(ev) {

ev.preventDefault();

// если хлебные крошки последние в списке, не делаем ничего

if( !bc.nextSibling || self.isAnimating ) {

return false;

}

self.isAnimating = true;

// текущее меню плавно уходит

self._menuOut();

// появляется следующее меню

var nextMenu = self.menusArr[idx].menuEl;

self._menuIn(nextMenu);

// удаляем передние хлебные крошки

var siblingNode;

while (siblingNode = bc.nextSibling) {

self.breadcrumbsCtrl.removeChild(siblingNode);

}

});

};

window.MLMenu = MLMenu;

})(window);

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

пользователя Vincy. Последнее изменение 10 сентября 2020 г.

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

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

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

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

 
  Популярные игрушки 

  Видеоигры  » 

  Автомобиль  
  Велогонка  
  Рыбалка  


  Барби  
  плюшевый мишка  
  Набор для гольфа  


  Недавние игрушки 

  Йойо  
  Набор врача  
  Веселая головоломка  » 

  Карты  
  Числа  


  Карты Uno  


  Категория игрушек 

  Игрушки-батарейки  
  Remote Toys  » 

  Машины  
  Самолет  
  Вертолет  


  Мягкие игрушки 

  Магнитные игрушки

Многоуровневое меню 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;}

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

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

Создание адаптивного многоуровневого мегаменю только на CSS | Виктория Кронселл | Startup

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

Никаких манипуляций с DOM не требуется
Независимость от фреймворка — используете ли вы React, Angular или просто старый HTML и CSS, он работает
Хорошая производительность — нет JS для загрузки и выполнения

Доступность

Использование валидной и хорошо структурированной разметки способствует доступности. Однако нам потребуется JS для выполнения следующих действий:

Поддержка браузера

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

UX

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

Поскольку мы используем только CSS (МЕНЬШЕ) и HTML, ничего настраивать не нужно. Просто разверните HTML-страницу и файл CSS и нажмите «Вперед».Или перейдите на CodePen и следуйте инструкциям, используя LESS. Эта статья предполагает хорошее понимание расширенного CSS (и МЕНЬШЕ). Вот некоторые из функций CSS, которые мы будем использовать для его создания:

Различные состояния, такие как: focus,: hover и: focus-within
Селекторы родственников CSS
Свойство pointer-events
CSS-анимации & transitions
Преобразование Свойство

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

Мы будем простыми. Все, что нам нужно, это старый добрый вложенный список, дружественный к SEO.

Без какого-либо стиля это будет просто выглядеть так:

Некоторые моменты, на которые следует обратить внимание в отношении разметки:

Заголовок мобильной ссылки «Главная» и мобильная ссылка «Назад» должны быть последними в соответствующих списках. Мы будем использовать гибкий порядок, чтобы визуально поставить их на первое место.
Ссылка, которая имеет раскрывающееся меню мегаменю или всплывающее меню, должна иметь для атрибута «aria-haspopup» значение true, нам также необходимо предотвратить поведение по умолчанию (это технически использует JS, я знаю, другой вариант — используйте
Большая часть CSS зависит от конкретной семантики, поэтому важно использовать правильную разметку

Прежде чем мы начнем, давайте перечислим требования для нашего меню:

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

Раскрывающиеся списки CSS | HTML Собака

Многоуровневые выпадающие списки.

Прежде чем начать, подумайте, является ли применение раскрывающихся списков к вашему сайту самым разумным.Хотя скрытие основной части вашей навигации может сделать дизайн более чистым, оно добавляет дополнительный уровень сложности для пользователя, чтобы получить доступ к этим скрытым ссылкам. Для большинства это не будет серьезной проблемой, но будет для тех, кто не использует или не может использовать указывающее устройство, такое как мышь. Это может относиться к людям с двигательными или зрительными нарушениями или к тем, кто пользуется мобильными устройствами с сенсорным экраном. Вам следует, по крайней мере, подумать о том, как дать этим пользователям возможность перемещаться (см. Пункты об использовании ссылок ниже).Если вы решили использовать раскрывающиеся списки, давайте продвинемся вперед и применим их наилучшим образом…

Новый раздел примеров!
Посмотрите на весь этот код в действии и поиграйте с ним.

HTML: красиво вложенные списки

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

 

    
         Птицы 
        
              Ratites  
              Мясо птицы  
              Неоавы  
        
    
    
         Млекопитающие 
        
              Монотремы  
              Сумчатые  
              Плаценты

Итак, у нас есть «Птицы» и «Млекопитающие» в качестве элементов верхнего уровня, а «Ratites», «Monotremes» и так далее в качестве элементов подкатегории второго уровня.

Воспользуйтесь ссылками. Всегда используйте ссылки. Если вас больше всего беспокоят подкатегории (например, «Ratites» и «Monotremes»), подумайте, по крайней мере, о наличии ссылок на основные элементы (например, «Птицы» и «Млекопитающие») на страницу со стандартной навигацией. на страницы подкатегорий. Основная причина этого — доступность — как уже отмечалось, посетители вашей страницы не всегда будут использовать указывающее устройство (которое, конечно, требуется для наведения и отображения подменю).

CSS: самое необходимое

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

 
ul {
    отступ: 0;
    маржа: 0;
}

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

 
li {
    дисплей: встроенный;
    положение: относительное;
}

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

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

Для поддержки старых браузеров вы также можете явно расположить подсписки, добавив к ним left: 0 и top: 100% .

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

 
li: hover ul {
    дисплей: блок;
}

Первый сопровождающий пример показывает это в действии вместе с пояснительными встроенными комментариями (см. Исходный код).

Многоуровневые раскрывающиеся списки

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

 

     Млекопитающие 
    
        
             Монотремы 
            
                  Ехидны  
                  Утконос  
            
        
        
             Сумчатые 
            
                  опоссумы  
                  Нумбаты и т. д. 
                  Bandicoots и т. д.  
                  Кенгуру, коалы, вомбаты и т. д.  
            
        
        
             Плаценты 
            
                  Приматы, копытные и т. д.  
                  Муравьеды, ленивцы и т. д.  
                  слоны и т. д.

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

 
ul ul ul {
    осталось: 100%;
    верх: 0;
}

Также требуется небольшая поправка. В его нынешнем виде будут показаны всех списков потомков наведенного элемента списка. Таким образом, когда в этом примере наведен курсор на «Млекопитающие», будут показаны не только «Однородные», «Сумчатые» и «Плацентарные», но и все типы сумчатых — «Оппоссумы» и так далее.Мы хотим, чтобы был показан только первый потомок — детей (не внуки). Итак, мы исправляем li: hover ul , вставляя дочерний селектор :

 
li: hover> ul {
    дисплей: блок;
}

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

Довольно красиво

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

Многоуровневые выпадающие меню навигации: примеры и учебные пособия

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

В этой статье представлено более 25 (горизонтальных и вертикальных) многоуровневых выпадающих меню , построенных с использованием Javascript и CSS , которые вы можете использовать в своих будущих проектах.Также вы найдете несколько полезных руководств в конце этого поста, которые вы можете использовать, чтобы начать создавать свое собственное многоуровневое меню навигации.

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

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

1) Раскрывающиеся вкладки (5 стилей)

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

2) Профессиональное раскрывающееся меню

3) Многоуровневое меню эффектов

— это настраиваемое гибридное раскрывающееся меню javascript / css, способное создавать простые меню (как горизонтальные, так и вертикальные).

4) Меню FastFind

Вложенные меню jQuery, основанные на динамических ответах «AJAX». Меню также можно перетаскивать.

5) jQuery SuckerFish

Копирование меню Suckerfish.

6) Необычное скользящее меню вкладок с использованием script.aculo.us

7) Меню на основе списка с изображениями

Это меню, основанное на неупорядоченном списке (

). Это делает меню простым в использовании и дружественным для поисковых систем.
8) Скользящее меню вниз
Слайд-меню на основе неупорядоченного списка (
).
9) Выпадающее меню сделано с помощью scriptaculous / prototype
Многоуровневое раскрывающееся меню.
10) Плагин меню в стиле Suckerfish для jQuery
Демонстрирует двухуровневое горизонтальное меню, отображающее путь к текущей странице, когда меню находится в состоянии ожидания.
11) Создание динамического раскрывающегося меню
12) onMenuOpen onMenuCollapse События
Это одноразовый эффект, который показывает, что меню открывается и запускает событие, а затем завершается другим событием.
13) Меню Mootools с гармошкой и эффектами
Это простое меню создает эффект наведения курсора на ссылки и открывает подменю с помощью гармошки.
14) Неограниченное выпадающее меню Mootools
15) Создание панели навигации Outlook
Использование элементов управления ListView и Accordion
16) Простое вертикальное меню CSS в стиле Digg
В этом руководстве объясняется, как реализовать простое вертикальное меню, подобное digg, с использованием CSS и javascript для отображения / скрытия подменю.
17) Выпадающее меню с прототипом
Уникальное раскрывающееся меню навигации, рекурсивно применяющее функцию к li, которая переключает видимость вложенного элемента ul.
18) Выпадающее меню с вложенными подменю
Использование CSS и немного JavaScript
19) Выпадающее меню с jquery
Пример выпадающего анимированного меню, созданного с помощью jquery
20) jdMenu Иерархическое меню
Плагин jdMenu для jQuery предоставляет чистое, простое и элегантное решение для создания иерархических раскрывающихся меню для веб-сайтов и веб-приложений.
21) плагин jQuery: Treeview
Легкое и гибкое преобразование неупорядоченного списка в расширяемое и сворачиваемое дерево, отлично подходит для ненавязчивых улучшений навигации.
22) Раскрывающееся меню
23) Доступное раскрывающееся меню
24) Скрипт двухкомпонентного меню
В этом примере показано, как добавить сворачиваемый подуровень.
25) Сложные динамические списки
Использование неупорядоченного списка для отображения иерархической структуры сложности, которую было бы очень трудно достичь с помощью динамических окон выбора.
26) Выпадающее меню Chrome CSS
Chrome Menu — это гибридное раскрывающееся меню CSS и JavaScript. Его легко настроить, и он удобен для поисковых систем.
Учебные пособия по раскрывающемуся меню
CSS Pop-Out Menu Tutorial
Выпадающие меню CSS Express
Меню
CSS Express следует использовать только в горизонтальной ориентации с одним раскрывающимся списком.
Son of Suckerfish Dropdowns
Доступный, легкий (всего 12 строк JavaScript), с отличной совместимостью и может иметь несколько уровней.
Генератор выпадающего меню
Izzymenu
Благодаря впечатляющему интерфейсу Ajax вы можете создать собственное раскрывающееся подменю DHTML CSS за считанные минуты, не написав ни единой строчки кода.

Эта статья изначально опубликована 17 апреля 2008 г. и обновлена 6 августа 2020 г.

css выпадающее многоуровневое меню | Webtrickshome

На главную

О компании

Услуги

Услуги 1

Услуги 2

Услуги 3

Связаться

Стайлинг
Стиль основной панели навигации такой же, как и в случае с горизонтальной панелью навигации.Посмотрим, что мы сделали с вложенным.
ul.dropdown { дисплей: нет; позиция: абсолютная; цвет фона: #ccc; минимальная ширина: 160 пикселей; } ul.dropdown li { float: нет; } ul.dropdown li a { фон: #ccc; цвет: # 333; дисплей: блок; } ul.dropdown li a: hover { фон: # 000; цвет: #fff; } ul li: hover .dropdown { дисплей: блок; }
Множественное раскрывающееся меню
Давайте добавим к нему еще один раскрывающийся список.

На главную

О компании

Услуги

Услуги 1

Услуги 2

Услуги 3

Услуги 3.1

Сервисы 3.2

Услуги 3.3

Связаться

И еще немного свойств css.
ul.sec-drop { дисплей: нет; позиция: абсолютная; минимальная ширина: 168 пикселей; маржа слева: 120 пикселей; маржа сверху: -40 пикселей; } ул.dropdown li: hover ul.sec-drop { дисплей: блок; }
Раскрывающийся список с несколькими столбцами
В основном мы видим такого рода выпадающие списки на сайтах электронной коммерции, которые имеют огромное количество подменю, которые не будут хорошо выглядеть, если они будут размещены прямо под соответствующим меню. В таких ситуациях мы растягиваем подменю вправо, чтобы отобразить меню.
Вот HTML-код того же самого.

МУЖЧИНЫ

Одежда

Повседневный

формально

Сезонно

Последние тенденции

Обувь

Повседневный

формально

Сезонно

Последние тенденции

Штаны

Повседневный

формально

Сезонно

Последние тенденции

Аксессуары

Повседневный

формально

Сезонно

Последние тенденции

ЖЕНЩИНЫ

ДЕТИ

ЭЛЕКТРОНИКА

МЕБЕЛЬ

УТИЛИТЫ

СПОРТ

КНИГИ

ПОДАРКИ

Теперь давайте посмотрим на свойства CSS.
ul.main-menu { фон: # 367fa9; минимальная высота: 40 пикселей; ширина: 100%; положение: относительное; отступ слева: 100 пикселей; } ul.main-menu li { тип-стиль-список: нет; } ul.main-menu> li> a { отступ: 10 пикселей 20 пикселей; цвет: #fff; дисплей: блок; плыть налево; } ul.main-menu li: hover> a { фон: #fff; цвет: # 367fa9; } .submenu { позиция: абсолютная; дисплей: нет; фон: # 367fa9; отступ: 20 пикселей; ширина: 830 пикселей; маржа сверху: 40 пикселей; верхняя граница: сплошная 5px #fff; } .submenu h3 { маржа: 0px; размер шрифта: 24 пикселя; цвет: #fff; } ul.sub { ширина: 25%; плыть налево; } ul.sub li a { отступ: 10px 10px 10px 0px; цвет: #fff; дисплей: блок; } ул.sub li a: hover { фон: нет! важно; цвет: #ccc; } ul.main-menu li: hover .submenu { дисплей: блок; }
Создание многоуровневого иерархического всплывающего меню навигации с использованием только HTML и CSS
Сегодня я собираюсь дать вам краткое руководство о том, как создать всплывающее меню иерархической навигации, которое может быть глубоко вложенным на нескольких уровнях.
В качестве вдохновения мы начнем с конкретного практического примера использования строки меню для настольного приложения.Я выберу часть строки меню браузера Chrome, чтобы проиллюстрировать это.
Мы начнем с простого внешнего вида, который восходит к классической теме Windows ™. Вот короткое видео о том, как это будет выглядеть:
Ближе к концу мы сделаем его немного более привлекательным, добавив немного стиля, чтобы придать ему ощущение MacOS ™.
Основы
Давайте начнем с понимания того, из чего обычно состоят наши пункты меню. У них должны быть следующие свойства:
Метка : ( требуется ), которая в основном является названием отображаемого пункта меню
Target : ( необязательно ) гиперссылка, которая переводит пользователя на страницу в ответ на щелчок по пункту меню.Сейчас мы будем использовать только ссылки. Для добавления более динамичных функций на странице потребуется JavaScript, от которого мы пока не будем. Это то, что вы всегда можете пойти и легко добавить позже.
Ярлык : ( необязательно ) в нашем случае отображает сочетание клавиш, которое можно использовать для этого пункта меню. Например, «Файл> Создать» на Mac будет «Cmd + N» (⌘N).
Дети : ( опционально ), который относится к подменю для этого пункта меню.Подумайте о наших меню и подменю в виде рекурсивной структуры . Визуально элемент меню, имеющий подменю, также должен иметь значок стрелки (▶), чтобы указать, что он может расширяться при наведении курсора.
Disabled : (optiona), состояние, указывающее, можно ли взаимодействовать с элементом меню.
Концептуальный параметр Тип ? ( опционально ), которые могут имитировать различные типы пунктов меню. Скажем, некоторые записи в списке меню должны действовать как разделитель строки.
Обратите внимание, что мы могли бы пойти дальше и добавить более сложные варианты поведения в наши меню. Например, определенное меню может быть элементом Toggle , и поэтому с ним может быть связана галочка (✔) или флажок, чтобы указать его состояние включения / выключения.
Мы будем использовать CSS-классы в нашей HTML-разметке, чтобы указать такие свойства, и напишем несколько умных стилей, чтобы передать все соответствующие поведения.
Структурирование HTML
Исходя из вышеизложенного, вот как должно выглядеть наше базовое меню HTML:
Список меню определяется элементом HTML ul , причем отдельные элементы очевидны li .
Ярлык label и ярлык будет размещен как span элементов с соответствующими классами CSS (ярлык или ярлык ) внутри тега привязки ( a ) внутри li , так что нажатие на он вызывает действие навигации, а также может обеспечить некоторую обратную связь пользовательского интерфейса, например, выделение пункта меню при наведении курсора на .
Когда пункт меню содержит список из подменю (дочерние), мы поместим это подменю в другой элемент ul внутри текущего меню li элемент (родительский) и так далее.Чтобы описать, что этот конкретный пункт меню содержит подменю, а также имеет возможность добавлять определенные стили, чтобы сделать его функциональным (а также визуальные элементы, такие как индикатор ▶), мы добавим CSS-класс has-children в этот родитель li .
Для таких элементов, как разделитель , мы добавим соответствующий класс CSS под названием separator к элементу li , обозначающему его.
Пункт меню может быть отключен , и в этом случае мы добавим соответствующий класс disabled CSS.Его задача — сделать так, чтобы этот элемент не реагировал на события указателя, такие как наведение курсора или щелчки.
Мы обернем все внутри контейнерного элемента HTML nav (желательно, чтобы он был семантическим) и добавим к нему класс flyout-nav для некоторого базового пространства имен стилей CSS, которые мы добавим.
Файл Новая вкладка ⌘T Новое окно ⌘N Поделиться... ✉️ Электронная почта 💬 Сообщения
Добавление поведения в CSS
Я солгал.Вместо этого мы будем использовать SCSS.
Шутки в сторону, вот самое интересное!
Меню (кроме «горизонтальной полосы» первого уровня) по умолчанию должно быть скрыто .
Все, что ниже первого уровня, должно отображаться только при наведении курсора на соответствующий пункт меню. Как вы, возможно, уже догадались, для этого мы будем сильно полагаться на псевдокласс CSS hover .
Организация элементов меню и подменю
Возможно, самый сложный момент во всей этой головоломке — это понять, как мы устанавливаем положение подменю и правильно выравниваем его по отношению к их родительскому элементу меню.Вот тут-то и пригодятся некоторые знания о позиционировании CSS. Давайте посмотрим на это.
Была причина, по которой мы решили поместить элемент подменю ul внутри «родительского» элемента li . Конечно, это помогает нам логически правильно составить разметку для нашего иерархического контента, но также служит другой цели, позволяя нам легко написать некоторый CSS, чтобы расположить дочерний элемент относительно позиции родительского элемента. Затем мы переносим эту концепцию на корневые элементы ul и li .
Для этого мы будем использовать комбинацию абсолютного позиционирования и top , left CSS-свойств, которые помогут нам расположить дочерний элемент относительно его ближайшего нестатического позиционированного предка , определяющего содержащий блок . Под нестатическим мы подразумеваем, что свойство позиции CSS для элемента не является статическим (что происходит по умолчанию в потоке документов HTML), а вместо этого является одним из относительных , абсолютных , фиксированных или липкий .Чтобы убедиться в этом, мы назначим позицию относительно элементам li с их дочерними элементами ul , позиционируемыми как absolute .
.flyout-nav { ul { маржа: 0; отступ: 0; позиция: абсолютная; дисплей: нет; тип-стиль-список: нет; } li { положение: относительное; дисплей: блок; &: hover { &> ul { дисплей: блок; верх: 0; осталось: 100%; } } }
Эффект этого показан на изображении ниже, выделенном в красном поле для иллюстрации.Некоторый дополнительный CSS для визуального стиля был добавлен в изображение, чтобы оно выглядело красиво, но основное поведение определяется тем, что мы сделали выше. Это продолжает отлично работать до N уровней (в пределах практичности).
Однако есть одно исключение — это список пунктов меню первого уровня (в нашем примере «Файл», «Правка», «Просмотр…»), чьи дочерние элементы меню должны располагаться на ниже , а не справа. Чтобы справиться с этим, мы добавляем некоторые переопределения стилей в наш предыдущий CSS.
.flyout-nav { &> ul { дисплей: гибкий; flex-flow: row nowrap; justify-content: гибкий старт; align-items: stretch; &> li: hover> ul { верх: 100%; слева: 0; } } }
Обратите внимание, что использование гибкого бокса здесь не было обязательным, а просто кое-что, что я сделал по своему выбору. Вы можете добиться аналогичного поведения, используя другие подходы, такие как комбинация display: block и display: inline-block для элементов ul и li .
UI полировка
Когда мы закончим работу с основами позиционирования пунктов меню, мы перейдем к написанию некоторых дополнительных стилей, таких как шрифты, размеры, цвета, фон, тени и т. Д., Чтобы сделать интерфейс приятным и лучше.
Для согласованности и повторного использования предположим, что у нас есть такие значения, определенные и совместно используемые с помощью набора переменных SCSS. Что-то вроде…
$ page-bg: # 607d8b; $ base-font-size: 16 пикселей; $ menu-silver: #eee; $ menu-border: #dedede; $ с фокусом на меню: # 1e88e5; $ разделитель меню: #ccc; $ menu-text-color: # 333; $ menu-shortcut-color: # 999; Цвет текста в фокусе $: #fff; $ menu-text-color-disabled: # 999; $ menu-border-width: 1 пиксель; $ menu-shadow: 2px 2px 3px -3px $ menu-text-цвет; $ menu-content-padding: 0.5рем 1рем 0.5рем 1.75рем; $ menu-border-radius: 0,5 бэр; $ menu-top-padding: 0,25 бэр;
Есть некоторые элементы, для которых нам осталось добавить соответствующие стили и поведение. Сейчас мы быстро их рассмотрим.
Якоря, ярлыки и ярлыки — актуальные визуальные элементы
.flyout-nav { li { a { текстовое оформление: нет; цвет: $ menu-text-color; положение: относительное; дисплей: таблица; ширина: 100%; .метка, .shortcut { дисплей: таблица-ячейка; обивка: $ menu-content-padding; } .shortcut { выравнивание текста: вправо; цвет: $ menu-shortcut-color; } метка { курсор: указатель; } input [type = 'checkbox'] { дисплей: нет; } input [type = 'checkbox']: checked + .label { &::перед { содержание: '✔️'; позиция: абсолютная; верх: 0; осталось: 0.25рем; набивка: 0,25 бэр; } } &: hover { фон: $ меню; .метка, .shortcut { цвет: $ меню-фокус-текст-цвет; } } } } }
Большая часть этого кода не требует пояснений. Однако вы заметили что-нибудь интересное? Бит о входе [type = 'checkbox'] ?
Переключить элементы
Для переключателей мы используем скрытый элемент флажка HTML для поддержания состояния (включен или выключен) и соответственно стилизуем метку с псевдоэлементом :: before .Мы можем сделать это, используя простой CSS-селектор смежных братьев и сестер.
Соответствующая разметка HTML для этого пункта меню будет выглядеть примерно так:
Всегда показывать панель закладок ⇧⌘B
Сепараторы
.flyout-nav { li { &.разделитель { нижнее поле: $ menu-top-padding; нижняя граница: $ menu-border-width solid $ menu-separator; нижняя обивка: $ menu-top-padding; } } }
Отключено
.flyout-nav { li { &.отключен { .метка, .shortcut { цвет: $ menu-text-color-disabled; } указатель-события: нет; } } }
CSS-событий-указателей действительно помогает.Установка его на none делает его невидимым как цель для любых событий указателя.
Собираем все вместе…
Теперь, когда мы получили некоторое представление о строительных блоках, давайте соберем все вместе. Вот ссылка Codepen на наше многоуровневое всплывающее меню навигации в действии!
Фантастическая тематика
Если вы не являетесь поклонником ретро-стиля Windows, вот еще одна версия того же кода с небольшими изменениями в CSS, чтобы он выглядел и ощущался как MacOS.
Что не работает?
Есть несколько вещей, которыми мы не занимались. Для начала,
Если вы придираетесь к этому, хотя большая часть поведения работает отлично, ограничение преднамеренного подхода, основанного только на CSS, заключается в том, что в отличие от реальных меню приложений Windows и MacOS, наше меню скрывается сразу, как только указатель перемещается. за пределами. Для более удобного использования, как правило, мы хотим дождаться щелчка перед скрытием (всегда можно добиться с помощью JS).
Что делать, если список пунктов в меню слишком длинный? Представьте себе список закладок в качестве примера. В какой-то момент может потребоваться ограничить его прокручиваемым представлением, скажем, на некотором проценте от высоты области просмотра. В конце концов, это действительно выбор пользовательского опыта, который вы создаете, но я также хотел добавить туда кое-что.
Надеюсь, это было полезно. Ваше здоровье!
Dynamic Drive — многоуровневое меню
Многоуровневое меню
Многоуровневое полноэкранное меню FF2 + IE10 +
Chrome
Мобильное полноэкранное меню, поддерживающее несколько уровней под
меню.Щелкните заголовок, чтобы открыть соответствующее подменю. Ваниль
Поддержка JavaScript и CSS3.
Всплывающее меню гибкого уровня FF1 + IE7 +
Chrome
Улучшение произвольных ссылок на
ваша страница с несколькими многоуровневыми возможностями с помощью всплывающего меню jQuery! Это позволяет вам
связать многоуровневое раскрывающееся меню с любой ссылкой на странице, чтобы переместить
при наведении курсора мыши на ссылку активируется меню, отображаемое рядом с ней. Каждое всплывающее меню
просто определяется как обычный вложенный UL на странице, что делает его очень интуитивно понятным
настроить, не говоря уже о дружественных поисковиках меню!
Раскрывающееся меню гибкого уровня FF1 + IE7 +
Chrome
Подобно всплывающему меню уровня Flex выше, это
сценарий гибкого меню позволяет добавлять многоуровневое раскрывающееся меню к любой ссылке на
страница.Он поддерживает опускание вниз от якорной ссылки или справа от нее.
вместо этого, что полезно, когда ссылка является ссылкой на боковой панели. Хорошее расширение
анимация отображает меню с задержкой до появления меню /
исчезает настраиваемый. Прохладный!
Компактные раскрывающиеся меню FF3 + IE8 +
Chrome
Это многоуровневое раскрывающееся меню, которое также позволяет сэкономить место.
наложение подменю друг на друга при раскрытии. Преобразования CSS3
используется для эффекта перехода между изменениями подменю, хотя меню
также работает в устаревших браузерах, включая IE8 +.
Меню списка электропитания FF3 + IE8 +
Chrome
Power List Menu — это
ориентированное на мобильные устройства, многоуровневое меню, которое преобразует
вложенный UL в серию выдвижных панелей, которые не занимают больше места
чем сама UL верхнего уровня. Щелкните заголовок и соответствующий
sub UL скользит в поле зрения над родительским UL. Он поддерживает ленивую загрузку
вспомогательные UL или родительские UL из внешнего файла с использованием Ajax, что позволяет сэкономить на пропускной способности и
время загрузки.
Меню значков DD FF3 + IE8 +
Значок меню Chrome
DD создает вертикальное меню на основе значков, которое фиксируется на
левый край окна браузера и расширяется, чтобы отобразить подменю на Mouseover.
Бесконечные уровни подменю могут быть связаны с каждым значком, с каждым подменю.
меню просто определяется как скрытый DIV на странице.
Простое древовидное меню FF1 + IE5 +
Chrome
Это ненавязчивый скрипт древовидного меню, который переворачивает любой обычный список (UL
элемент) в разборное дерево! После преобразования исходный список и его
подсписки могут быть свернуты / развернуты по желанию, при этом файлы cookie могут использоваться для необязательного
сохранять свое состояние.
Меню jQuery TreeView (v1.4)
FF2 + IE6 + Chrome
jQuery TreeView Menu объединяет все самые практичные функции
запрашивается в древовидном меню в один потрясающий скрипт меню.Разметка для меню
это просто список HTML до того, как скрипт преобразует его в полнофункциональный
Меню TreeView, напоминающее стиль Проводника Windows, среди многих
темы. Поддерживает постоянство и необязательное асинхронное заполнение дерева
содержимое через данные Ajax и JSON, возвращаемые с сервера.
HV
Меню FF1 + IE5 + Chrome
— Отправлено пользователем
Ср.
назвал этот скрипт «HV menu» из-за его способности располагаться как по горизонтали (как верхнее меню)
и вертикально (как боковое меню), но может
а также из-за его универсального характера.С поддержкой miltiple
подуровни, вертикальное и горизонтальное расположение, совместимость с NS6 и др., HV
menu — один из лучших скриптов в своей области.
Все уровни
Навигационное меню FF1 + IE6 + Chrome
Навигационное меню всех уровней — это меню на основе списков CSS / HTML с поддержкой
для бесконечных уровней подменю. Это легкий и легкий
реализовать (содержимое меню — это обычные списки HTML), со всеми
меню ссылки удобное для поисковых систем.
Плавное навигационное меню
FF1 + IE7 + Chrome

Smooth Navigation Menu — это многоуровневое меню на основе списка CSS, использующее
jQuery, который упрощает навигацию по сайту. Содержимое меню может
либо из прямой разметки на странице, либо из внешнего файла, полученного через
Аякс вместо этого. Применяется настраиваемый плавный переход «слайд плюс плавное появление».
во время открытия подменю. Меню поддерживает как горизонтальный , так и вертикальный (боковая панель)
ориентация.
DD Mega Menu FF1 + IE6 +
Chrome
DD Mega Menu — это выпадающая система меню, которая поддерживает произвольное подменю.
макеты, такие как несколько столбцов ссылок, даже произвольный форматированный HTML.
Кроме того, он поддерживает вложенные мегаменю, поэтому одно мегаменю может содержать ссылки.
это, в свою очередь, вызывает выпадение еще одного мегаменю.
Мега
Меню Drop Line FF28 + IE10 +
Chrome21 +
Mega Drop Line Menu — это современное меню Drop Line с поддержкой бесконечного
уровни подменю.Каждое подменю занимает всю ширину меню и
раскрывается, чтобы показать себя на Mouseover. Он использует минимум JavaScript (<1 КБ сжатый), и работает даже при отключенном JavaScript в браузерах для настольных компьютеров.
Детализированное меню FF1 + IE6 +
Chrome
Этот скрипт превращает обычный список UL в меню в стиле детализации. В
UL верхнего уровня определяет высоту меню, при этом подуровни спрятаны
пока не перейдем к. Вы можете настроить, какой уровень должен отображаться по умолчанию,
следует ли запоминать последний показанный уровень при перезагрузке страницы, а также скорость
анимации «бурения».Также могут быть показаны дополнительные следы хлебных крошек.
Меню последовательного выбора FF1 + IE5 +
Chrome
многомерное меню выбора формы, основанное на Xin’s
Связанные выборки
сценарий. Ссылки можно настроить так, чтобы они открывались в новом окне.
Примечание: Некоторые старые сценарии меню были удалены и могут быть
нашел здесь.
.
Добавить комментарий Отменить ответ
Ваш адрес email не будет опубликован. Обязательные поля помечены *
Комментарий *
Имя *
Email *
Сайт

Навигация по записям
Previous PostКрасивый фон а4: Изображения Фон | Бесплатные векторы, стоковые фото и PSD
Next PostОсновные понятия языка html: HTML Основные понятия

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

Большой обзор красивых многоуровневых меню с codepen / Блог компании mr. Gefest / Хабр

Как сделать многоуровневое выпадающее меню только с HTML и CSS (возможно, крошечное JavaScript)

3 ответа

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

Многоуровневое горизонтальное меню на HTML и CSS

HTML

CSS

Готово

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

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

Многоуровневое меню | PROG-TIME

Многоуровневое вертикальное меню HTML и CSS

CSS

HTML

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

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

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

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

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

Создание адаптивного многоуровневого мегаменю только на CSS | Виктория Кронселл | Startup

Доступность

Поддержка браузера

UX

CSS: самое необходимое

Многоуровневые раскрывающиеся списки

Довольно красиво

Многоуровневые выпадающие меню навигации: примеры и учебные пособия

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

Учебные пособия по раскрывающемуся меню

Генератор выпадающего меню

css выпадающее многоуровневое меню | Webtrickshome

Стайлинг

Множественное раскрывающееся меню

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

Одежда

Обувь

Штаны

Аксессуары

Создание многоуровневого иерархического всплывающего меню навигации с использованием только HTML и CSS

Основы

Структурирование HTML

Добавление поведения в CSS

Организация элементов меню и подменю

UI полировка

Якоря, ярлыки и ярлыки — актуальные визуальные элементы

Переключить элементы

Сепараторы

Отключено

Собираем все вместе…

Фантастическая тематика

Что не работает?

Dynamic Drive — многоуровневое меню

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

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