Горизонтальное многоуровневое меню css: Меню многоуровневое горизонтальное и вертикальное CSS

14.05.2023 Разное

Содержание

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

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

На С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 решений. Если хотите и дальше их читать, то пройдите снизу опрос.
Всем приятной работы.

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

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

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

спросил 12 лет, 2 месяца назад

Изменено 10 лет, 10 месяцев назад

Просмотрено 7к раз

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

ли .

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

 Верхний элемент 1 Верхний элемент 2 Верхний элемент 3
 подпункт 1 подпункт 1 подпункт 1
 подпункт 2 подпункт 2 подпункт 2
  подпункт 1 подпункт 3 подпункт 3
  подпункт 2 подпункт 4 подпункт 4
 подпункт 5 подпункт 5 подпункт 5

html
css
макет
html-списки

Как насчет этого:

Живая демонстрация

CSS:

 #footer {
    переполнение: авто;
    фон: #ддд
}
.внешний {
    стиль списка: нет;
    ширина: 33%;
    плыть налево;
    маржа: 0;
    отступ: 0
}
.первый {
    вес шрифта: полужирный
}
.внешняя ул {
    стиль списка: нет;
    маржа: 0;
    отступ: 0 0 0 18px
}

HTML:

 
    <ул>
        Основной элемент 1
        
            <ул>
                
подэлемент 1
                подпункт 2
                
                    <ул>
                        
подэлемент 1
                        подпункт 2
                    
                
                подпункт 5
            
        
    
    <ул>
        Основной элемент 2
        
            <ул>
                
подэлемент 1
                подпункт 2
                подпункт 3
                подпункт 4
                подэлемент 5
            
        
    
    <ул>
        Основной элемент 3
        
            <ул>
                
подэлемент 1
                подпункт 2
                подпункт 3
                подпункт 4
                подпункт 5

вот что можно скопировать и вставить:

 
<голова>
<стиль>
    li. level1 { поплавок: слева; дисплей: встроенный; поле справа: 20 пикселей }
    ul.level2 {отображение: встроенный}
    li.level2 { дисплей: блок; отступ слева: 20px }
    ul.level3 {отображение: встроенный}
    li.level3 { дисплей: блок; отступ слева: 20px }


<тело>
<ул>
    яблоко
    банан
        <ул>
            
банан 1
                <ул>
                    
банан 1 А
                    банан 1 Б
                
            
            банан 2
        
    
    вишня
        <ул>
            
вишня 1
            вишня 2
        
    
    дддд

Или, если вы хотите что-то чистое css, как насчет чего-то вроде этого: http://jsfiddle.net/pLFqd/2/

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

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Требуется, но никогда не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

списки html — горизонтальное меню css находится за пределами круглого слоя div

Задавать вопрос

спросил 8 лет, 11 месяцев назад

Изменено 8 лет, 11 месяцев назад

Просмотрено 402 раза

Я пытаюсь сделать горизонтальное меню со скругленными краями, однако внутренние элементы «li» перекрывают слой div.

Вот пример того, что я имею в виду:

 
<ул>
    Главная
    Тест
    Тест 2

 .меню {
     цвет фона: # CCC;
    радиус границы: 10 пикселей;
    граница: 1px сплошной черный;
    z-индекс: 9999999;
}
ул {
    тип стиля списка: нет;
    маржа: 0;
    заполнение: 0;
    z-индекс:-9999;
}
ли {
    дисплей: встроенный;
    цвет фона: красный;
    z-индекс:-9999;
}

Вот скрипка http://jsfiddle.net/3zeUg/ Взгляните на самый левый элемент li, он перекрывается своей квадратной рамкой с круглой рамкой.

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

Я наткнулся на этот сайт здесь: http://mypeoplesrock.com/ и в меню видно, что у него круглые рамки, но внутренний элемент не перекрывается. Глядя на его файл css, я не могу найти, что он сделал по-другому.

Спасибо

html-списки
перекрытие
css

Просто добавьте overflow: hidden; от до .меню для предотвращения просачивания внутренних элементов через границу.

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

вы можете использовать text-indent ;

 ул {
...
отступ текста: 15px;
...
}

или поле слева ;

 ул {
...
поле: 0 0 0 15 пикселей;
...
}

Попробуйте добавить padding-left: 5px; на ваш .menu CSS

Я полагаю, вы говорите о DEMO

 li:first-child{
   граница-верхний-левый-радиус: 10px;
   граница-нижний-левый-радиус: 10px;
}

Просто поэкспериментируйте с отступом внутри .menu .

HTML

 
    <ул>
        Главная
        Тест
        Тест 2

CSS

Comments

Leave Comment

Горизонтальное многоуровневое меню css: Меню многоуровневое горизонтальное и вертикальное CSS

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

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

html — трехуровневое меню CSS с первым слоем в горизонтальном расположении

Зарегистрируйтесь или войдите в систему

Опубликовать как гость

Опубликовать как гость

списки html — горизонтальное меню css находится за пределами круглого слоя div

Leave a Comment Отменить ответ

Leave a Comment
Отменить ответ