Html выпадающее меню вертикальное: Как создать выпадающее меню CSS only (вертикальное)?

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

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

Сегодня я приведу пример создания вертикального выпадающего меню оформленного с помощью CSS. Постараюсь задействовать как можно больше свойств css, чтобы наглядно показать, как можно оформить созданное меню. Меню будет полностью оформлено с использованием Каскадных таблиц стилей. Единственно, что пришлось сделать с помощью JavaScript, это эффект выпадающего меню для Internet Explorer, т.к одно из нужных свойств он всё таки не поддерживает.

Для начала нужно построить структуру нашего меню. Она будет состоять из ненумерованного базового списка включающего в себя списки-подменю.
index.html

<title>Вертикальное выпадающее меню на CSS</title>
<script type="text/javascript" src="cssmenu.js"></script>
 	<link rel="stylesheet" type="text/css" href="style.css">
 
<ul>
 
 	<li><a href="#">Главная страница</a></li>
 
 
 	<li><a href="#">Создание сайтов</a>
 
<ul>
 
 	<li><a href="#">Дизайн сайтов</a></li>
 
 
 	<li><a href="#">Вёрстка сайтов</a></li>
 
 
 	<li><a href="#">Оптимизация сайтов</a></li>
 
</ul>
 
</li>
 
 
 	<li><a href="#">Продвижение сайтов</a>
 
<ul>
 
 	<li><a href="#">SEO продвижение</a></li>
 
 
 	<li><a href="#">SMO продвижение</a></li>
 
</ul>
 
</li>
 
 
 	<li><a href="#">SEO биржи</a></li>
 
 
 	<li><a href="#">SEO софт</a></li>
 
</ul>

<title>Вертикальное выпадающее меню на CSS</title> <script type=»text/javascript» src=»cssmenu.js»></script> <link rel=»stylesheet» type=»text/css» href=»style.css»> <ul> <li><a href=»#»>Главная страница</a></li> <li><a href=»#»>Создание сайтов</a> <ul> <li><a href=»#»>Дизайн сайтов</a></li> <li><a href=»#»>Вёрстка сайтов</a></li> <li><a href=»#»>Оптимизация сайтов</a></li> </ul> </li> <li><a href=»#»>Продвижение сайтов</a> <ul> <li><a href=»#»>SEO продвижение</a></li> <li><a href=»#»>SMO продвижение</a></li> </ul> </li> <li><a href=»#»>SEO биржи</a></li> <li><a href=»#»>SEO софт</a></li> </ul>

style.css

<div>
/* Убираем отступы и маркеры в ненумерованном списке, задаём ширину и стили оформления */
ul {
padding: 0;
margin: 0;
list-style: none;
width: 140px;
list-style: none;
border-bottom: 1px solid #C1D8E6;
font-size: 11px;
font-family: Geneva, Arial, Helvetica, sans-serif;
}
/* Задаём относительное позиционирование выпадающего списка */
ul li {
position: relative;
}
/* Задаём абсолютное позиционирование выпадающего списка, сдвиг влево на 139 px, чтобы выпадающее меню перекрывало главное и не создавалась двойная граница, по умолчанию выпадающий список будет скрыт */
li ul {
position: absolute;
left: 139px;
top: 0;
display: none;
}
/* Задаём стили для ссылок */
ul li a {
display: block;
text-decoration: none;
color: #003399;
background: #EAF4FF;
background-image:  url('images/bullet-arrow.gif') ;
background-repeat: no-repeat;
background-position: 1px 9px;
padding: 5 5 5 10;
border: 1px solid #ccc;
border-bottom: 0;
}
/* Указываем браузеру, что подменю будет появляться, когда курсор находится над элементом списка. */
li:hover ul, li.over ul{
display: block;
}
/* Задаём стили для выпадающего меню */
ul li a:hover {
background: #77CF7F;
background-image:  url('images/bullet-arrow.gif') ;
background-repeat: no-repeat;
background-position: 1px 9px;
text-decoration: none;
}
/* ХАК для ie, чтобы и там всё корректно отображалось:)*/
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */</div>

<div> /* Убираем отступы и маркеры в ненумерованном списке, задаём ширину и стили оформления */ ul { padding: 0; margin: 0; list-style: none; width: 140px; list-style: none; border-bottom: 1px solid #C1D8E6; font-size: 11px; font-family: Geneva, Arial, Helvetica, sans-serif; } /* Задаём относительное позиционирование выпадающего списка */ ul li { position: relative; } /* Задаём абсолютное позиционирование выпадающего списка, сдвиг влево на 139 px, чтобы выпадающее меню перекрывало главное и не создавалась двойная граница, по умолчанию выпадающий список будет скрыт */ li ul { position: absolute; left: 139px; top: 0; display: none; } /* Задаём стили для ссылок */ ul li a { display: block; text-decoration: none; color: #003399; background: #EAF4FF; background-image: url(‘images/bullet-arrow.gif’) ; background-repeat: no-repeat; background-position: 1px 9px; padding: 5 5 5 10; border: 1px solid #ccc; border-bottom: 0; } /* Указываем браузеру, что подменю будет появляться, когда курсор находится над элементом списка. */ li:hover ul, li.over ul{ display: block; } /* Задаём стили для выпадающего меню */ ul li a:hover { background: #77CF7F; background-image: url(‘images/bullet-arrow.gif’) ; background-repeat: no-repeat; background-position: 1px 9px; text-decoration: none; } /* ХАК для ie, чтобы и там всё корректно отображалось:)*/ /* Fix IE. Hide from IE Mac \*/ * html ul li { float: left; height: 1%; } * html ul li a { height: 1%; } /* End */</div>

JavaScript нужен, чтобы заставить выпадающее меню работать в Internet Explorer. В остальных браузерах должно работать без него.

Вот так работает наше меню — Вертикальное выпадающее меню на CSS
Скачать Example1.zip

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Любое CSS меню должно отвечать нескольким требованиям: CSS меню должно быть удобным, компактным, доступным для пользователя. Чтобы меню сайта было компактным и удобным его следует делать выпадающим. Конечно, выпадающее CSS меню не будет корректно работать в старых браузерах таких как IE6. Выпадающее меню удобно тем, что не занимает много места на веб-странице. В данном примере не будет использоваться JavaScript и библиотека JQuery — а это означает, что выпадающее меню будет доступно для пользователей, у которых в настройках браузера отключены скрипты.

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

Создание CSS меню. Создание выпадающего меню. Шаг 1 — создаем вертикальное HTML меню.

Содержание статьи:

Для начала мы создаем маркированный HTML список при помощи тега <ul> и тега <li>:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»> <html> <head> <meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″> <title>Создание CSS меню</title> </head> <body> <span><span><> </span></span><ul> <li>Первый пункт</li> <li>Второй пункт <ul> <li>Первый подпункт</li> <li>Второй подпункт</li> </ul> </li> <li>Третий пункт <ul> <li>Первый подпункт</li> <li>Второй подпункт</li> <li>Третий подпункт</li> </ul> </li> <li>Четвертый пункт</li> </ul> </body> </html>

Примерно должно получиться что-то типа такого списка:

• Первый пункт
• Второй пункт
  • Первый подпункт
  • Второй подпункт
• Третий пункт
  • Первый подпункт
  • Второй подпункт
  • Третий подпункт
• Четвертый пункт

Конечно, это еще не меню и даже не навигация, поскольку ни один из пунктов HTML списка не является ссылкой. Теперь нужно сделать каждый пункт нашего HTML списка ссылкой. Таким образом, у нас получится вертикальное HTML меню, таблицу стилей (css) мы еще пока не будем трогать и подключать. Чтобы пункты HTML списка стали ссылками, содержимое каждого элемента <li> внутрь тега <a>:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»> <html> <head> <meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″> <title>Создание CSS меню</title> </head> <body> div> <ul> <li><a href=»#»>Первый пункт</a></li> <li><a href=»#»>Второй пункт</a> <ul> <li><a href=»#»>Первый </a></li> <li><a href=»#»>Второй </a></li> <li><a href=»#»>Третий </a></li> </ul> </li> <li><a href=»#»>Третий пункт</a> <ul> <li><a href=»#»>Первый подпункт</a></li> <li><a href=»#»>Второй подпункт</a></li> </ul> </li> <li><a href=»#»>Четвертый пункт</a></li> </ul> <div> </body> </html>

Теперь мы получили вертикальное HTML меню. У тега <a> есть атрибут href, в котором следует указывать адрес страницы, на который будет вести ссылка, у меня нет необходимости этого делать, поэтому в качестве адреса я указал символ # или забой. Ссылки, у которых в качестве значения атрибута href указан #, никуда не ведут. Обратите внимание: вертикальной HTML меню я поместил в контейнер <div>, поскольку в спецификации HTML 4 есть правило: внутри элемента <body> могут находиться только блочные элементы и элементы <ins> и <del>. У тега <div> есть один атрибут id со значением «block». У корневого тега <ul> есть атрибут id со значением «hnav», этот атрибут потребуется нам для создания вертикального и горизонтального CSS меню.

Создание CSS меню. Выпадающее меню. Шаг 2 — создаем горизонтальное CSS меню.

Далее мы будем задавать стили CSS для нашего будущего меню. Для начала, давайте зададим стиль для контейнера <ul> со значением hnav атрибута id, то есть общий стиль для нашего выпадающего меню:

#hnav { list-style: none; margin: 0; padding: 0; font-size: 1.2em; float: right; position: relative }

Давайте коротко пройдемся по CSS свойствам и посмотри для чего они нужны. Первое CSS свойство, которое было задано list-style со значением none, данное свойство позволяет избавиться от мерзких маркеров HTML списка, но только для родительских пунктов вертикального меню, у дочерних HTML элементов маркеры останутся.

Свойство margin делает нулевым отступ от края элемента ul. Свойство paddin убирает внутренние отступы HTML элемента ul. Свойство font-size задает размер текста пунктов нашего CSS меню. Свойство float позволяет выравнять CSS меню, в нашем случае по правому краю. Свойство position со значение relative позиционирует контейнер ul относительно его исходного места.

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

#hnav li { float: left; position: relative; }

Для каждого элемента li, которые находятся внутри контейнера ul мы задаем два свойства: float со значением left (тем самым мы добиваемся того, что наше CSS меню стало горизонтальным) и опять же, задаем свойство position со значением relative, чтобы элементы заняли свое место.

Теперь мы можем задать стили, для содержимого контейнеров li, то есть стили для пунктов горизонтального CSS меню:

#hnav li a{ float: left; display: block; padding: 4px; text-decoration: none; color: #666; text-transform: uppercase; margin-right: 10px; }

Свойство display имеет значение block, это говорит нам о том, что пункты нашего CSS меню будут вести себя как блочные (в данном случае контейнеры <a>, тег <a> сам по себе строчный элемент). Свойство padding устанавливает внутренние отступы между пунктами меню, чтобы те не накладывались друг на друга. Значение none свойства text-decoration позволяет убрать подчеркивание у ссылок(меню же из ссылок состоит). Свойство color задает цвет текста внутри контейнера <a>. Свойство text-transform: uppercase; задает начертание текста нашего CSS меню, а именно, весь текст будет написан прописными буквами.

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

#hnav li:hover a, #hnav li a:hover { background: #999; color: #fff; }

Свойство color изменяет цвет текста пункта меню при наведение на него курсора мыши. Свойство background задает цвет фона пункта CSS меню при наведение курсора на пункт.

Теперь мы можем «спрятать» вложенные пункты меню:

#hnav ul {display: none;}

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

#hnav li:hover ul {display: block;} #hnav ul { float: none; position: absolute; list-style: none; margin: 0; padding: 0; top: 1.8em; left: 0; } #hnav ul li { float: none; clear: none; margin: 0; padding: 0; width: auto; color: #999; }

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

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

#hnav li:hover ul li a, #hnav ul li a { line-height: 200%; display: block; padding: 0 6px 0 0; float: none; text-transform: lowercase; color: #999; background: none; } #hnav li:hover ul li a:hover, #hnav ul li a:hover { background: none; color: #000; } <span>

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

Так будет выглядеть горизонтальное выпадающее CSS меню:

Горизонтальное CSS меню. Выпадающее CSS меню.

Создание CSS меню. Выпадающее меню. Шаг 3 — создаем вертикальное CSS меню.

Приступим к созданию вертикального CSS меню. Для начала создаем маркированный HTML список, точно такой же, как и для горизонтального меню:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»> <html> <head> <meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″> <title>Создание CSS меню</title> </head> <body> div> <ul> <li><a href=»#»>Первый пункт</a></li> <li><a href=»#»>Второй пункт</a> <ul> <li><a href=»#»>Первый </a></li> <li><a href=»#»>Второй </a></li> <li><a href=»#»>Третий </a></li> </ul> </li> <li><a href=»#»>Третий пункт</a> <ul> <li><a href=»#»>Первый подпункт</a></li> <li><a href=»#»>Второй подпункт</a></li> </ul> </li> <li><a href=»#»>Четвертый пункт</a></li> </ul> <div> </body> </html> <span>

Разница только в имени идентификатора для корневого элемента списка <ul>, поскольку для вертикального и горизонтального меню у меня находятся в одном файле.

Теперь можно задать общие стили для отображения CSS меню:

#vnav { width: 400px; float: left; list-style: none; margin: 0; padding: 0; font-size: 1.2em; }

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

Далее задаем стили для всех пунктов HTML списка:

#vnav li { clear: both; height: 2em; }

Свойство height задает высоту элементов CSS меню, clear запрещает обтекание вокруг HTML элемента, значение both говорит о том, что ни с левой, ни с правой стороны наше вертикальное меню не будет обтекания.

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

#vnav li a { float: left; display: block; padding: 4px; text-decoration: none; color: #666; text-transform: uppercase; margin-bottom: 5px; margin-right: 10px; }

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

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

#vnav li:hover a, #vnav li a:hover { background: #999; color: #fff; }

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

#vnav ul {display: none;}

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

#vnav li:hover ul {display: block;}

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

#hnav ul { list-style: none; float: left; margin: 0; padding: 4px 8px; }

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

#hnav ul li { float: left; clear: none; margin: 0; padding: 0; width: auto; height: auto; color: #999; }

Свойство float: left делает отображение подпунктов меню в линию.

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

#hnav li:hover ul li a, #hnav ul li a { display: inline; padding: 0 6px 0 0; float: none; text-transform: lowercase; color: #999; background: none; } #hnav li:hover ul li a:hover, #hnav ul li a:hover { background: none; color: #000; }

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

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

Исходные коды примеров вы можете скачать на публичных страницах вконтакте: раз и два.

На этом всё, спасибо за внимание, надеюсь, что был хоть чем-то полезен и до скорых встреч на страницах блога для начинающих вебразработчиков и вебмастеров ZametkiNaPolyah.ru. Не забываем комментировать и делиться с друзьями;)

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

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

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

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

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

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

CSS-свойство position задает режим позиционирования элементов. Значением по умолчанию является static, которое означает «обычное позиционирование».

Значение relative обозначает «относительное позиционирование». Относительно спозиционированный элемент можно перемещать относительно его исходного положения.

Значение absolute свойства position задаёт элементу абсолютное позиционирование.

Абсолютно спозиционированные элементы обладают следующими особенностями:

Теперь приступим к делу.

Для начала создадим шаблон нашего будущего меню.

Теперь уберем внутренние и внешние отступы и маркеры.

Преукрасим наше меню.

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

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

Наше меню готово можете использовать его на своем сайте.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<!—[if gte IE 5.5]>
<script language=»JavaScript» src=»nav-h.js» type=»text/JavaScript»></script>
<![endif]—>

<ul>
<li><a href=»index.html»>Главная</a></li>
<li><a href=»templates.html»>Шаблоны, рецепты +</a>
<ul>
<li><a href=»templates.html»>Шаблоны, заготовки +</a>
<ul>
<li><a href=»temp1.html»>Шаблон 1</a></li>
<li><a href=»temp2.html»>Шаблон 2</a></li>
<li><a href=»temp3.html»>Шаблон 3</a></li>
<li><a href=»temp4.html»>Шаблон 4</a></li>
<li><a href=»temp5.html»>Шаблон 5</a></li>
<li><a href=»temp6.html»>Шаблон 6</a></li>
<li><a href=»temp7.html»>Шаблон 7</a></li>
<li><a href=»temp8.html»>Шаблон 8</a></li>
</ul>
</li>
<li><a href=»faq.html»>Рецепты HTML</a></li>
<li><a href=»faq-css.html»>Рецепты CSS</a></li>
</ul>
</li>
<li><a href=»#»>Менюшки +</a>
<ul>
<li><a href=»#»>Вертикальные +</a>
<ul>
<li><a href=»menu1.html»>Вертикальное меню 1</a></li>
<li><a href=»menu2.html»>Вертикальное меню 2</a></li>
<li><a href=»menu3.html»>Вертикальное меню 3</a></li>
<li><a href=»menu4.html»>Вертикальное меню 4</a></li>
<li><a href=»menu5.html»>Вертикальное меню 5</a></li>
</ul>
</li>
<li><a href=»#»>Горизонтальные +</a>
<ul>
<li><a href=»menu6.html»>Горизонтальное меню 1</a></li>
<li><a href=»menu7.html»>Горизонтальное меню 2</a></li>
<li><a href=»menu8.html»>Горизонтальное меню 3</a></li>
</ul>
</li>
</ul>
</li>
<li><a href=»/gb»>Гостевая книга</a></li>
<li><a href=»submit.html»>Контакт</a></li>
</ul>

ul#navmenu-v,
ul#navmenu-v li,
ul#navmenu-v ul {
margin: 0;
border: 0 none;
padding: 0;
width: 160px;
list-style: none;
}

ul#navmenu-v:after {
clear: both;
display: block;
font: 1px/0px serif;
content: «.»;
height: 0;
visibility: hidden;
}

ul#navmenu-v li {
float: left;
display: block !important;
display: inline;
position: relative;
}

ul#navmenu-v a {
border: 1px solid #FFF;
border-right-color: #527337;
border-bottom-color: #527337;
padding: 0 6px;
display: block;
background: #A2C585;
color: #666;
font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
height: auto !important;
height: 1%;
}

ul#navmenu-v a:hover,
ul#navmenu-v li:hover a,
ul#navmenu-v li.iehover a {
background: #648B43;
color: #FFF;
}

ul#navmenu-v li:hover li a,
ul#navmenu-v li.iehover li a {
background: #648B43;
color: #BCD6A7;
}

ul#navmenu-v li:hover li a:hover,
ul#navmenu-v li:hover li:hover a,
ul#navmenu-v li.iehover li a:hover,
ul#navmenu-v li.iehover li.iehover a {
background: #648B43;
color: #FFF;
}

ul#navmenu-v li:hover li:hover li a,
ul#navmenu-v li.iehover li.iehover li a {
background: #648B43;
color: #BCD6A7;
}

ul#navmenu-v li:hover li:hover li a:hover,
ul#navmenu-v li:hover li:hover li:hover a,
ul#navmenu-v li.iehover li.iehover li a:hover,
ul#navmenu-v li.iehover li.iehover li.iehover a {
background: #648B43;
color: #FFF;
}

ul#navmenu-v li:hover li:hover li:hover li a,
ul#navmenu-v li.iehover li.iehover li.iehover li a {
background: #648B43;
color: #BCD6A7;
}

ul#navmenu-v li:hover li:hover li:hover li a:hover,
ul#navmenu-v li.iehover li.iehover li.iehover li a:hover {
background: #648B43;
color: #FFF;
}

ul#navmenu-v ul,
ul#navmenu-v ul ul,
ul#navmenu-v ul ul ul {
display: none;
position: absolute;
top: 0;
left: 160px;
}

ul#navmenu-v li:hover ul ul,
ul#navmenu-v li:hover ul ul ul,
ul#navmenu-v li.iehover ul ul,
ul#navmenu-v li.iehover ul ul ul {
display: none;
}

ul#navmenu-v li:hover ul,
ul#navmenu-v ul li:hover ul,
ul#navmenu-v ul ul li:hover ul,
ul#navmenu-v li.iehover ul,
ul#navmenu-v ul li.iehover ul,
ul#navmenu-v ul ul li.iehover ul {
display: block;
}

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

Вы здесь: Главная — CSS — CSS Основы — Горизонтальное выпадающее меню на CSS

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

Привожу HTML-код:

И CSS-код:

Безусловно, здесь дан чуть ли не минимум свойств. Чтобы это всё украсить, нужно менять стили. Что касается HTML-кода, то он идентичен и для горизонтального, и для вертикального меню.

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

Полный курс по HTML, CSS и по вёрстке сайтов: http://srs.myrusakov.ru/makeup

• Создано 06.03.2013 04:25:07
• Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

1. Кнопка:
   <a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>

   Она выглядит вот так:

2. Текстовая ссылка:
   <a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>

   Она выглядит вот так: Как создать свой сайт

3. BB-код ссылки для форумов (например, можете поставить её в подписи):
   [URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]

14 мега-меню для сайта — очень функциональная вещь

1. Новое выпадающее jQuery мега-меню

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

2. Выпадающее CSS3 мега-меню

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

3. Мега jQuery меню

Выпадающее меню с красивым jQuery эффектом.

4. Огромное выпадающее мега-меню

5. Симпатичное выпадающее мега-меню на jQuery

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

6. CSS3 Выпадающее мега меню

7. Горизонтальные jQuery мега-меню в разных стилевых оформлениях

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

8. Выпадающее мега-меню

Меню с большим количеством выпадающих пунктов.

9. Еще одно мега-меню с использованием Ajax и jQuery

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

10. Выпадающее мега-меню jQuery

Еще один вариант выпадающего меню с большим количеством подпунктов. 

11. Выпадающее CSS3 мега-меню

Реализация выпадающего меню с использованием CSS3.

12. Вертикальное jQuery мега меню

На демонстрационной странице представлено несколько вариантов выпадающих вертикальных мега меню. В  меню можно настраивать: эффект выпадения, скорость выпадения, а также сторону выпадения меню (вправо или влево).

13. Стильное вертикальное jQuery мега-меню

Профессиональное вертикальное меню с огромным количеством выпадающих пунктов подменю.

14. jQuery выпадающее меню

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

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

Введение

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

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

Его вывод будет примерно таким:

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

Шаг 1

Прежде всего, добавьте таблицу стилей и форму или страницу HTML.

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

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

2. • Home1
   • • Homea
     • < a href = "#"> Homeb
     • Homec
   • Home2
   • • Homed
     • Homee
     • Homef
   • Home3
   • • Homeg
     • < href = "#"> Homeh
     • Homei
   • Home4
   • Home5
   • • Homej
     • Homek
     • Homel < / a>
   • Home6

Step 2

Прямо сейчас ваш код не более чем этот:

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

Добавьте этот код в таблицу стилей:

1. #divMenu, ul, li, li li {
2. margin: 0;
3. отступ: 0;
4. }
6. #divMenu {
7. width: 150px;
8. высота: 27 пикселей;
9. }
11. #divMenu ul
12. {
13. line-height: 25px;
14. }
16. #divMenu li {
17. стиль списка: нет;
18. позиция: относительная;
19. фон: # 641b1b;
20. }
22. #divMenu li li {
23. стиль списка: нет;
24. позиция: относительная;
25. фон: # 641b1b;
26. слева: 148 пикселей;
27. верх: -27 пикселей;
28. }
31. #divMenu ul li a {
32. width: 148px;
33. высота: 25 пикселей;
34. дисплей: блок;
35. текстовое оформление: нет;
36. выравнивание текста: по центру;
37. семейство шрифтов: Georgia, Times New Roman, с засечками;
38. цвет: #ffffff;
39. граница: сплошная 1px #eee;
40. }
42. #divMenu ul ul {
43. положение: абсолютное;
44. видимость: скрыта;
45. верх: 27 пикселей;
46. }
48. #divMenu ul li: hover ul {
49. видимость: видимая;
50. }
52. #divMenu li: hover {
53. background-color: # 945c7d;
54. }
56. #divMenu ul li: hover ul li a: hover {
57. background-color: # 945c7d;
58. }
60. #divMenu a: hover {
61. font-weight: bold;
62. }

Здесь я использовал идентификатор

  

 


  

 




 
    
  EditRegion3  
   
 


<нижний колонтитул>
  

  
 Лаборатория Тейлора 

      Центр биомедицинских исследований Leichtag
      4 этаж, ком.412
    

    Калифорнийский университет в Сан-Диего
    

    9500 Гилман Др.mc0654 

  Ла-Хойя, Калифорния 
  

  Тел: (858) 534-8190
  

  Факс: (858) 534-8193 




 
  

  li: hover ul {
  дисплей: блок;
}
тело {
    маржа: 0px;
    цвет фона: #CCCCCC;
}
.содержание {
    цвет фона: #FFFFFF;
    отступ справа: 6 пикселей;
    отступ слева: 6 пикселей;
}
.footer {
    цвет фона: # 357f7f;
    семейство шрифтов: Arial, Helvetica, sans-serif;
    размер шрифта: 8 пикселей;
    цвет: #FFFFFF;
    позиция: абсолютная;
}
#содержание {
    цвет фона: #FFFFFF;
    ширина: 100%;
    высота: 100%;
    маржа: 0 авто;
    минимальная высота: 100%;
    высота: авто;
}


a {
    текстовое оформление: нет;
}
#wrapper {
    цвет фона: #FFFFFF;
    ширина: 1280 пикселей;
    минимальная высота: 100%;
    положение: относительное;
    высота: авто;
    мин-высота: 100%
    margin-top: 0;
    маржа-право: авто;
    нижнее поле: 0;
    маржа слева: авто;
 }
# content-spacer-top {
    высота: 10 пикселей;
}

# content-spacer-bottom {
    высота: 1%;
}

#header {
    цвет фона: # 357f7f;
    высота: 2%;
    ширина: 100%;
}
#mainnav a {
    семейство шрифтов: Arial, Helvetica, sans-serif;
    размер шрифта: 16 пикселей;
    цвет: # 000000;
    текстовое оформление: нет;
    цвет фона: #FFFFFF;
    плыть налево;
    выравнивание текста: центр;
    ширина: 14.28%;
    padding-top: 6 пикселей;
    отступ справа: 0 пикселей;
    padding-bottom: 6 пикселей;
    отступ слева: 0 пикселей;
    дисплей: блок;
    тип-стиль-список: нет;
    ясно: нет;
    маржа: 0px;
    высота: 2%;
    ширина верхней границы: тонкий;
    граница-правая-ширина: тонкая;
    ширина нижней границы: тонкий;
    граница-левая-ширина: тонкая;
    стиль верхней границы: твердый;
    граница-правый-стиль: нет;
    стиль нижнего края: сплошной;
    граница-левый-стиль: нет;
    цвет верхней границы: # 357F7F;
    цвет границы-справа: # 357F7F;
    цвет нижней границы: # 357F7F;
    цвет левой границы: # 357F7F;
}
#mainnav ul {
тип-стиль-список: нет;
маржа: 0px;
отступ: 0 пикселей;
}

#mainnav a: hover, # mainnav a: active, # mainnav a: focus {
цвет: #FFFFFF;
текстовое оформление: нет;
цвет фона: # 357F7F;
}
.style2 {
размер шрифта: маленький;
цвет: #FFFFFF;
}

а: посетил {
цвет: #FFFFFF;
цвет фона: # 357F7F;
}
.style4 {font-size: x-small}
.style5 {цвет фона: # 357f7f; семейство шрифтов: arial;}
#footer {
ширина: 1280 пикселей;
высота: 120 пикселей;
плыть налево;
семейство шрифтов: Arial, Helvetica, sans-serif;
размер шрифта: 10 пикселей;
преобразование текста: прописные буквы;
}
  

  nav ul {
  стиль списка: нет;
  маржа: 0;
  отступ: 0 пикселей;
  ширина: 200 пикселей;
  высота: авто;
}
навигация
ul {
  маржа сверху: 4 пикселя;
}
nav ul li {
  border-top: 2px solid # 000000;
  цвет фона: белый;
  ширина: 10em;
  черный цвет;
  ширина: 200 пикселей;
  высота: авто;
  отступ: 5px 0px;
  размер шрифта: 120%;
}
nav ul li: hover {
  цвет фона: # E88B2E;
}
навигацияя не знаю {
  цвет: желтый;
}
ссылка {
  цвет: зеленый;
}
а: посетил {
  цвет: зеленый;
}
a: hover {
  цвет: светло-зеленый;
}
ul li ul {
  стиль списка: нет;
  маржа: 0;
  отступ: 0 пикселей;
  ширина: 200 пикселей;
  высота: авто;
  дисплей: нет;
}
ul li ul li {
  border-top: 2px solid # 000000;
  цвет фона: белый;
  ширина: 10em;
  черный цвет;
  ширина: 200 пикселей;
  высота: авто;
  отступ: 5px 0px;
  размер шрифта: 120%;
}
ссылка {
  текстовое оформление: нет;
}
nav ul li: hover ul {
  / * При наведении указателя мыши на элемент списка отображаем UL, вложенный в него.* /
  дисплей: блок;
}
nav ul ul {
  / * Удаляем элемент из потока документов * /
  позиция: абсолютная;
  / * Позиция относительно родительского объекта & lt; li & gt; * /
  слева: 210 пикселей;
  верх: 0;
  граница сверху: 1px solid # e9e9e9;
  дисплей: нет;
}
nav ul ul li {
  ширина: 200 пикселей;
  фон: # f1f1f1;
  граница: 1px solid # e9e9e9;
  граница-верх: 0;
}
nav ul ul li a {
  цвет: # a8a8a8;
  размер шрифта: 12 пикселей;
  текстовое преобразование: нет;
}
nav ul ul li a: hover {
  цвет: # 2;
}  

  

  
    Выпадающая ссылка
  

  

     Действие 
     Другое действие 
     Здесь что-то еще 
  
  

  

  
    Действие
  
  

     Действие 
     Другое действие 
     Здесь что-то еще 
    
 
     Отдельная ссылка 
  
  

  

   Действие 
  
     Переключить раскрывающийся список 
  
  

     Действие 
     Другое действие 
     Здесь что-то еще 
    
 
     Отдельная ссылка 
  
  

  

  
    Большая кнопка
  
  

    ...
  


  
    Большая разделенная кнопка
  
  
     Переключить раскрывающийся список 
  
  

    ...
  




  
    Маленькая кнопка
  
  

    ...
  


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

    ...
  
  

  

  
    Dropup
  
  

    
  




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

    
  
  

  

  
    Dropright
  
  

    
  




  
    Разделить вертикальное положение
  
  
     Переключить вертикальное положение 
  
  

    
  
  

  

  
    Капля
  
  

    
  




  

    
       Переключить дроплефт 
    
    

      
    
  
  
    Разделенная капля