Вертикальное выпадающее меню на 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> |
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>JavaScript нужен, чтобы заставить выпадающее меню работать в Internet Explorer. В остальных браузерах должно работать без него.
Вот так работает наше меню — Вертикальное выпадающее меню на CSS
Скачать Example1.zip
Твитнуть
Метки: вертикальное выпадающее меню, выпадающее меню на CSS, примеры css меню
Создаем вертикальное меню на CSS – Zencoder
Продолжаем изучение CSS и сегодня приступим к построению вертикального меню.
Такие меню очень популярны и без них не обходится каждый второй сайт.
Статей по созданию подобной навигации написано немало, но меня данный факт волнует мало. Моя задача — разобраться в принципе построения подобного меню и возможность сделать его самому, на коленках за пару минут. В действительности все просто, даже очень просто.
Созданное в этой статье вертикальное меню будет далеко по своим внешним эстетическим данным от совершенства. Но это и неважно — важен сам принцип, механизм построения и функционирования подобной навигации. А всякие фантики-бантики можно навесить всегда, было бы желание.
Механизм действия и построения такого меню основан на одном единственном CSS-свойстве — 1
display
1
display: block
1
display: none
В этой статье будет создаваться простое вертикальное меню, в котором подменю размещается сбоку от основного меню.
Такая навигация называется 1
меню-аккордеон
C чего же мы начнем? С построения обычного маркированного списка, пунктами которого будут ссылки. Списку зададим класс с именем 1
menu
<ul>
<li>
<a href="#">Punkt 1</a>
</li>
<li>
<a href="#">Punkt 2</a>
</li>
<li>
<a href="#">Punkt 3</a>
</li>
<li>
<a href="#">Punkt 4</a>
</li>
<li>
<a href="#">Punkt 5</a>
</li>
</ul> Созданное только что меню будет внешним, а внутри него (точнее внутри его пунктов) мы поместим еще одно меню.
Получиться одно меню, вложенное в другое (помните уроки HTML?).
То есть, у нас есть пять пунктов внешнего меню — вот мы и вложим в каждый из них еще одно меню, перед ссылкой. Ссылка будет исполнять роль переключателя, который будет переводить значение свойства 1
display
1
block
В итоге получиться пять подменю, для каждого из которых мы пропишем один класс — 1
sub-menu
<ul>
<li>
<a href="#">Punkt 1</a>
<ul>
<li>
<a href="#">Punkt 1-1</a>
</li>
<li>
<a href="#">Punkt 1-2</a>
</li>
<li>
<a href="#">Punkt 1-3</a>
</li>
</ul>
</li>
<li>
<a href="#">Punkt 2</a>
<ul>
<li>
<a href="#">Punkt 2-1</a>
</li>
<li>
<a href="#">Punkt 2-2</a>
</li>
<li>
<a href="#">Punkt 2-3</a>
</li>
</ul>
</li>
<li>
<a href="#">Punkt 3</a>
<ul>
<li>
<a href="#">Punkt 3-1</a>
</li>
<li>
<a href="#">Punkt 3-2</a>
</li>
<li>
<a href="#">Punkt 3-3</a>
</li>
</ul>
</li>
<li>
<a href="#">Punkt 4</a>
<ul>
<li>
<a href="#">Punkt 4-1</a>
</li>
<li>
<a href="#">Punkt 4-2</a>
</li>
<li>
<a href="#">Punkt 4-3</a>
</li>
</ul>
</li>
<li>
<a href="#">Punkt 5</a>
<ul>
<li>
<a href="#">Punkt 5-1</a>
</li>
<li>
<a href="#">Punkt 5-2</a>
</li>
<li>
<a href="#">Punkt 5-3</a>
</li>
</ul>
</li>
</ul> Все — каркас будущего вертикального меню готов и больше мы его трогать не будем.
*{
margin: 0;
padding: 0;
}
a{
text-decoration: none;
}
ul{
list-style-type: none;
}
.menu{
margin: 30px 0 0 30px;
width: 100px;
}Здесь мы обнуляем 1
margin
1
padding
; убираем маркер у пунктов меню; убираем подчеркивание у ссылок.
Для внешнего списка с классом menu задаем отступ сверху и слева, чтобы не прилипал к границам окна браузера и устанавливаем фиксированную ширину в 1
100px
Дальше форматируем пункты меню:
.menu li{
position: relative;
line-height: 20px;
background-color: #ccc;
margin-bottom: 1px;
}Ставим высоту каждого элемента равной 20px и выравниваем текст внутри него по центру вертикали; задаем фоновый цвет для них же, чтобы можно было различать каждый из пунктов на фоне окна браузера; делаем нижний 1
margin
не сливались между собой и были похожи на пункты меню.
Последний шаг — устанавливаем для относительное позиционирование, так как в дальнейшем будем размещать подменю относительно этого элемента.
Далее чисто косметические правила для ссылок, находящихся внутри внешнего меню — размер шрифта (кегль) и цвет текста:
.menu li a{
font-size: 16px;
color: #000;
}Теперь приступаем к самому интересному — стилизации подменю. Для начала зададим его ширину (пусть будет чуть меньше ширины внешнего списка):
.sub-menu{
width: 90px;
}Затем установим для подменю абсолютное позиционирование для того, чтобы сместить его вправо на значение, равное ширине внешнего списка и “прилепить” кверху каждого из элементов .
И самое главное — скроем его отображение в браузере через правило 1
display: none
.sub-menu{ width: 90px; position: absolute; left: 100px; top: 0; display: none; }
sub-menu{
width: 90px;
position: absolute;
left: 100px;
top: 0;
display: none;
}Немного стилизуем пункты меню и ссылки в подменю. Для каждого пункта подменю устанавливаем цвет фона, чтобы отличать подменю от основного меню. И цвет ссылок по той же причине:
.sub-menu li{
background-color: #aaa;
}
.sub-menu li a{
color: #fff;
}Заключительный код, который заставляет наше меню работать именно так, как задумано. То есть, этим мы говорим браузеру присвоить свойству 1
display
1
block
.menu li:hover .sub-menu{
display: block;
}В результате подменю отобразиться (браузер сгенерирует его). Изначально в коде было прописано для него 1
display: none
То есть, для браузера такого подменю не существовало и в DOM-модели документа элемент с классом 1
sub-menu
Так как этому подменю задано абсолютное позиционирование со смещением вправо на 1
100px
, то оно поместиться точно справа вверху от своего родителя — пункта меню внешнего списка.
В принципе, на этом уже все сказано. Основной принцип вертикального меню показан и создан. Остальное — уже дело техники, если нужно придать ему нужный вид. На закуску пример нашего меню в обычном состоянии:
И меню, когда наведена мышка на один из пунктов меню и справа появляется подменю, соответствующее этому пункту:
На этом все.
css
Как создать вертикальное меню с помощью HTML и CSS?
Улучшить статью
Сохранить статью
- Уровень сложности: Средний
- Последнее обновление: 16 ноя, 2021
Улучшить статью
Сохранить статью
Вертикальное меню: Мы можем создать вертикальное меню в виде кнопок и меню с возможностью прокрутки.
Вертикальное меню — это кнопки, расположенные в вертикальной строке меню/навигационной панели.
Как создать вертикальное меню с помощью кнопок: Мы можем создать его просто с помощью HTML и CSS. Мы создадим простую структуру веб-страницы, используя теги
Синтаксис:
Пример:
HTML
|
ВЕРТИЧЕСКИЙ МЕНУ {
ВОДИТЕЛЬНЫЙ Мену A.Active {
0051 a 
0003Как создать a вертикальное меню с помощью прокрутки: Здесь мы увидим, как создать вертикальное меню с помощью прокрутки. Для этого мы будем использовать простой HTML и CSS.
Синтаксис:
Пример:
HTML
|
ВВЕТАЛЬНЫЙ МЕНУ {
ВОДЕРЖАНИЕ-Мену A.Active {
0052 Вывод:
Статьи по теме Как создать вертикальную панель и навигацию с помощью HTML
?
Улучшить статью
Сохранить статью
- Последнее обновление: 14 сент, 2021
Улучшить статью
Сохранить статью
Прочитав эту статью, вы сможете создать свою собственную вертикальную панель навигации.
Чтобы следовать этой статье, вам нужно только базовое понимание HTML и CSS.
Давайте начнем писать нашу вертикальную панель навигации, сначала мы напишем структуру панели навигации. В этом руководстве мы создадим панель навигации, используя элемент списка HTML. Мы используем шрифт — потрясающие 5 значков на панели навигации. Для этого после тега «title» мы добавили тег «script», чтобы включить библиотеку шрифтов — потрясающую библиотеку .
HTML
|
" 
« Мы определили структуру веб-страницы с помощью HTML.
Теперь нам нужно добавить стиль, используя свойства CSS. Во-первых, удалите маркеры, поля и отступы из списка. Теперь задайте цвет фона и определенную ширину.
CSS
|
- стиль list-; Свойство удаляет маркеры из списка HTML.
- Поле : 0; и заполнение: 0; удаляет поля браузера по умолчанию и отступы из элемента.
Чтобы создать вертикальную панель навигации, вы должны стилизовать элементы внутри списка.
CSS
|
- Дисплей : блок; Свойство , отображающее ссылки как блочные элементы, делает область ссылок доступной для кликов. Это позволяет нам указать ширину (отступы, поля, высоту и т. д.)
- отступы: 8 пикселей 16 пикселей; Отступы сверху и снизу по 8 пикселей. Отступы справа и слева равны 16px.
- украшение текста: нет; Удалить подчеркивание с элементов
Это позволяет нам указать ширину (отступы, поля, высоту и т. д.)CSS
|
- поле-право Добавляет отступ между текстом и иконками
Окончательный код: Ниже приведена комбинация всех приведенных выше фрагментов кода.
HTML
 |
icon {