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

menu

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>. ..



1

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

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

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

  1. Небольшая реструктуризация списка ul/li. Некоторые элементы были не в Ли.

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

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

Боб

Поделиться


rcravens    

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



0

То, как вы структурировали свой 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



0

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

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

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

Поделиться


plebksig    

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



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

многоуровневое меню с css &html?

Я хочу создать многоуровневое меню с чистым css & html. положение меню должно контролироваться css. Кто-нибудь может мне помочь?

Многоуровневое выпадающее меню без css эффектов наведения asp.net jquery

Я хочу создать многоуровневое выпадающее меню в asp.net, используя c# для составного элемента управления. Кто-нибудь знает или знает какие-нибудь указания о том, как его создать? Я посмотрел на. ..

Twitter Многоуровневое Выпадающее Меню Bootstrap

Можно ли иметь многоуровневое выпадающее меню с помощью элементов twitter bootstrap 2? В оригинальной версии этой функции нет.

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=#…

Как сделать выпадающее меню полной ширины и push-контент только с HTML+CSS?

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

Как сделать многоуровневое выпадающее меню с помощью select option mentod

я хочу сделать многоуровневое выпадающее меню с помощью метода select и option <select> <option value= data-display-text=Select>None</option> <option…

Многоуровневое выпадающее меню Bokeh

Я хочу сделать многоуровневое выпадающее меню, что-то вроде того, что есть в этом XKCD: Есть ли какой-то способ, чтобы подкатегории складывались таким образом, используя выпадающее меню Боке? Мой…

ReactJS многоуровневое выпадающее меню

Я пытаюсь создать многоуровневое выпадающее меню ReactJs. Я использую следующий пост/код в качестве базы: следующий пост и этот код jsfiddle в качестве отправной точки моего компонента ReactJs:…

Как развернуть выпадающее меню с помощью css , javascript и html?

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

Многоуровневое горизонтальное меню на 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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<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

*

* Copyright 2015, Codrops

* //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) {

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

 

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

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

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

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

  

Многоуровневое меню 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 зависит от конкретной семантики, поэтому важно использовать правильную разметку

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

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

Основные стили и макеты

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

Обратите внимание на следующее:

  • Строка меню представляет собой контейнер flexbox и имеет относительное положение
  • Выпадающее меню мегаменю является контейнером flexbox и имеет абсолютное позиционирование, поэтому оно будет отображаться под строкой меню.
  • Ссылка раскрывающегося / всплывающего меню должна имеют aria-haspopup = true, и их родственные списки будут скрыты.

Выпадающее и всплывающее меню.

. Чтобы создать функциональность, традиционно создаваемую с помощью JavaScript, мы будем использовать комбинацию возможностей CSS.

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

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

  • На : фокус на ссылке
  • На : фокус внутри элемент списка
  • На : наведите на ссылку само мегаменю, это гарантирует, что оно останется открытым, если 1) ссылка потеряет фокус или 2) оно используется в браузере, который не поддерживает: focus-within

На данный момент это все немного неуклюже, поэтому давайте добавим немного анимации.Мы знаем, что имитировать анимацию скольжения вниз в jQuery очень сложно, если у нас нет фиксированной высоты (или фиксированной максимальной высоты), поэтому вместо этого мы будем использовать свойство масштаба преобразования. Установив для параметра transform-origin значение top и анимируя только по оси Y, мы можем имитировать анимацию скольжения вниз.

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

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

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

  • На : наведите курсор на и : на фокус внутри на элементе списка
  • На : на фокус на ссылке

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

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

Всплывающие окна

Следующим шагом является создание функциональности всплывающих окон в нашем многоуровневом мегаменю.На предыдущем шаге мы скрыли все родственные связи ссылок с помощью всплывающих окон.

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

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

Это тоже выглядит немного неуклюже, поэтому мы бы хотели добавить сюда анимацию.Та же проблема применима и здесь; мы не можем анимировать ширину без каких-либо фиксированных значений, поэтому здесь мы также будем использовать масштаб трансформации. Поскольку всплывающие окна будут выдвигаться вбок, мы установим исходную точку преобразования влево и анимируем ось X. Обратите внимание, что он применяется к: hover элемента списка, это гарантирует, что анимация не будет перезапущена при перемещении курсора из открытого всплывающего окна обратно к ссылке (потому что мы все еще наводим курсор на элемент списка, когда мы зависает, потому что это ребенок).

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

Et voila:

Стиль плоского мегаменю

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

Результат на рабочем столе

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

  • Стрелки вниз для ссылок раскрывающихся меню в строке
  • Стрелки вправо для ссылок мегаменю с всплывающими элементами
  • Границы между столбцами мегаменю

И с этим у нас есть довольно красивое меню:

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

Основные стили и макеты

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

Единственное, что мы видим на странице, — это кнопка запуска мобильного меню. Само меню расположено за пределами экрана, а мегаменю — за пределами мобильного меню. На самом деле мы здесь анимируем левую позицию меню, а не используем преобразование. Похоже, что в iOS, если мы используем преобразование для смещения меню, нажатие кнопки «Открыть мобильное меню» также регистрирует щелчок по ссылке «Домой» в меню.

Примечание о: focus on mobile

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

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

Открытие мобильного меню

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

Чтобы избежать закрытия меню, как только мы начнем с ним взаимодействовать (потому что, как только мы это сделаем, наша кнопка потеряет фокус / наведение), мы собираемся использовать: hover и: focus-within в самом меню, чтобы держать его открытым.

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

Открытие мегаменю

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

Кнопки возврата

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

Итак, как мы можем убедиться, что меню, содержащее нажатую кнопку «Назад», теряет фокус?

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

Теперь он будет выглядеть так же, но кнопка «Назад» фактически находится за пределами его списка. Обратите внимание на события указателя : нет; — предотвращает все щелчки и состояния элемента. Теоретически это означает, что когда мы нажимаем кнопку «Назад», мы фактически нажимаем , что стоит за ним . В данном случае это предыдущее меню. Это также означает, что когда мы щелкаем по нему, открытое мегаменю теряет фокус.

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

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

Расширяющиеся всплывающие окна

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

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

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

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

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

Codepen здесь: https://codepen.io/vixxofsweden/pen/xxGGYOE

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

Улучшения JavaScript

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

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

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

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

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

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

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

 

  

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

     
    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


        
         
        Стайлинг

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

          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 {
            дисплей: блок;
          }
         
        Множественное раскрывающееся меню

        Давайте добавим к нему еще один раскрывающийся список.

        
         

        И еще немного свойств 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:

        1. Список меню определяется элементом HTML ul , причем отдельные элементы очевидны li .
        2. Ярлык label и ярлык будет размещен как span элементов с соответствующими классами CSS (ярлык или ярлык ) внутри тега привязки ( a ) внутри li , так что нажатие на он вызывает действие навигации, а также может обеспечить некоторую обратную связь пользовательского интерфейса, например, выделение пункта меню при наведении курсора на .
        3. Когда пункт меню содержит список из подменю (дочерние), мы поместим это подменю в другой элемент ul внутри текущего меню li элемент (родительский) и так далее.Чтобы описать, что этот конкретный пункт меню содержит подменю, а также имеет возможность добавлять определенные стили, чтобы сделать его функциональным (а также визуальные элементы, такие как индикатор ▶), мы добавим CSS-класс has-children в этот родитель li .
        4. Для таких элементов, как разделитель , мы добавим соответствующий класс CSS под названием separator к элементу li , обозначающему его.
        5. Пункт меню может быть отключен , и в этом случае мы добавим соответствующий класс disabled CSS.Его задача — сделать так, чтобы этот элемент не реагировал на события указателя, такие как наведение курсора или щелчки.
        6. Мы обернем все внутри контейнерного элемента HTML nav (желательно, чтобы он был семантическим) и добавим к нему класс flyout-nav для некоторого базового пространства имен стилей CSS, которые мы добавим.
            

        Добавление поведения в 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 не будет опубликован. Обязательные поля помечены *