Как сделать вертикальное меню только в html

Как сделать вертикальное меню только в html
как сделать меню

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

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

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

Как сделать меню на html

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

К примеру, для создания меню мы используем список с классом class="menu" (название класса любое, только латинские буквы), и код html будет выглядеть так:

<style type="text/css"> <!-- Стилевое оформление для меню --> .menu { margin: 0; padding: 0; list-style-type: none; } </style> <ul class="menu"> <!-- Маркированный список меню --> <li><a href="#">Главная</a></li> <!-- Пункты меню --> <li><a href="#">Статьи</a></li> <li><a href="#">Обо мне</a></li> <li><a href="#">Контакты</a></li> </ul>

В стилевом оформление для меню я указал обязательные свойства с нужными значениями:

Обязательные параметры и значения CSS margin: 0; - убираем все отступы списка, иначе браузер подставит значения по умолчанию 20px; list-style-type: none; - убираем маркеры у пунктов меню, иначе браузер добавит точки или цифры.

Вот таким образом делается меню на html страницах, и теперь перейдём к созданию горизонтального меню и рассмотрим всё на примерах.


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

<style type="text/css"> .menu { margin: 0; padding: 0; list-style-type: none; } .menu li { margin: 0 10px 0 0; padding: 0; display: inline-block; } </style> <ul class="menu"> <li><a href="#">Главная</a></li> <li><a href="#">Статьи</a></li> <li><a href="#">Обо мне</a></li> <li><a href="#">Контакты</a></li> </ul>

И выглядеть это будет так:

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

Давайте каждому пункту в горизонтальном меню придадим рамку border и сделаем у неё скошенные края, заполним определённым цветом background-color (добавим фон для пункта меню), и изменим вид ссылки.

<style type="text/css"> .menu-2 { margin: 0; padding: 0; height: auto; list-style-type: none; background-color: #6699ff; text-align: center; } .menu-2 li { margin: 8px 10px 8px 0; padding: 2px 14px 4px; background-color: #4960fb; border: 2px solid #071eb9; border-radius: 1px 20px; display: inline-block; transition: all 0.7s ease 0s; } .menu-2 a { color: #f2f2f2; text-decoration: none; } .menu-2 li:hover { background-color: #ccc; border-radius: 20px 1px; } .menu-2 li:hover a { color: #0e25c0; } </style> <ul class="menu-2"> <li><a href="#">Главная</a></li> <li><a href="#">Статьи</a></li> <li><a href="#">Обо мне</a></li> <li><a href="#">Контакты</a></li> </ul>

Отображаться горизонтальное меню уже будет таким образом:

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

И для наглядности сделал пункты меню по центру, применив свойство text-align: center;, которое можно удалить (выровняется автоматически по левому краю), либо задать значение text-align: right; и горизонтальное меню отобразится по правому краю.

Кстати вы можете так же воспользоваться готовое меню на css и jQuery, которые вы можете там воочию посмотреть и бесплатно скачать.


Как сделать вертикальное меню на CSS

Вертикальное меню на CSS делается и оформляется на странице практически так же как и горизонтальное, только здесь изменяется в .menu-2 li {... параметр со значением display: block; (указывает на блочный элемент), что придаёт ему вертикальное отображение пунктов меню.

И ещё одно дополнение к вертикальному меню: так как оно в большинстве случаев находится в боковой колонке сайта, которое имеет фиксированную ширину, то и мы вынуждены задать ширину width: 100%; нашему вертикальному меню, чтобы оно полностью занимало всю ширину колонки.

Давайте рассмотрим вертикальное меню CSS на примере:

<style type="text/css"> .saitbar { margin: 0 auto; padding: 0; width: 240px; } .menu-3 { margin: 0; padding: 0; background-color: #999; height: auto; list-style-type: none; } .menu-3 li { margin: 0 0 2px; padding: 0; background-color: #990000; border-left: 26px solid #273ed9; transition: all 0.7s ease 0s; display: block; } .menu-3 a { padding: 6px 0 8px 10px; color: #f2f2f2; text-decoration: none; border-left: 6px solid #5269ff; transition: all 0.7s ease 0s; display: block; } .menu-3 li:hover { background-color: #ccc; } .menu-3 li:hover a { color: #0e25c0; padding: 6px 0 8px 22px; border-left: 6px solid #900000; } </style> <div class="saitbar"> <ul class="menu-3"> <li><a href="#">Первый пункт меню</a></li> <li><a href="#">Второй пункт меню</a></li> <li><a href="#">Третий пункт меню</a></li> <li><a href="#">Четвёртый пункт меню</a></li> </ul> </div>

Вот так вертикальное меню отобразится на странице:

Будьте внимательны!
<div class="saitbar"> я прописал для вертикального меню вместо боковой колонки сайта, поэтому вы его удалите и в конце кода </div> то же удалить.


Как сделать выпадающее меню на CSS

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

Обязательно запомните!
Для того, чтобы выпадающее меню строго появлялось напротив ведущей ссылки, необходимо в CSS для тега li, где находится эта ссылка, прописать position: relative;, а для выпадающего меню position: absolute;

Давайте напишем html код для выпадающего меню на CSS.

<style type="text/css"> .saitbar { margin: 0 auto; padding: 0; width: 240px; } .menu-4, .menu-4 .podmenu, .menu-4 .podmenu-2 { margin: 0; padding: 0; background-color: #999; height: auto; list-style-type: none; } .menu-4 li { margin: 0 0 2px; padding: 0; background-color: #990000; border-left: 26px solid #273ed9; transition: all 0.7s ease 0s; display: block; position: relative; } .menu-4 a { padding: 6px 0 8px 10px; color: #f2f2f2; text-decoration: none; border-left: 6px solid #5269ff; transition: all 0.7s ease 0s; display: block; } .menu-4 li:hover { background-color: #ccc; } .menu-4 li:hover a { color: #0e25c0; padding: 6px 0 8px 22px; border-left: 6px solid #900000; } .menu-4 ul.podmenu, .menu-4 ul.podmenu-2 { display: none; position: absolute; top: 0; width: 150px; background-color: #ccc; } .menu-4 ul.podmenu { left: 214px; } .menu-4 ul.podmenu-2 { left: 150px; } .menu-4 li:hover .podmenu, .podmenu li:hover .podmenu-2 { display: block; padding: 4px 0 4px 14px; } .menu-4 .podmenu li, .podmenu .podmenu-2 li { margin: 0; padding: 0; background-color: #ccc; border-left: 0 solid #273ed9; transition: all 0.7s ease 0s; display: block; } .menu-4 .podmenu li a, .podmenu .podmenu-2 li a { border-left: 0 solid #900000; padding: 4px 10px; color: #444; font-size: 14px; border-bottom: 1px dotted #999; } .menu-4 .podmenu li a:hover, .podmenu .podmenu-2 li a:hover { color: #0e25c0; } </style> <div class="saitbar"> <ul class="menu-4"> <li><a href="#">Первый пункт меню</a></li> <li><a href="#">Второй пункт меню ⇒</a> <ul class="podmenu"> <li><a href="#">Первый подпункт</a></li> <li><a href="#">Второй подпункт</a></li> <li><a href="#">Третий подпункт ⇒</a> <ul class="podmenu-2"> <li><a href="#">Первая ссылка</a></li> <li><a href="#">Вторая ссылка</a></li> <li><a href="#">Третья ссылка</a></li> <li><a href="#">Четвёртая ссылка</a></li> </ul> </li> <li><a href="#">Четвёртый подпункт</a></li> </ul> </li> <li><a href="#">Третий пункт меню ⇒</a> <ul class="podmenu"> <li><a href="#">Первая ссылка</a></li> <li><a href="#">Вторая ссылка</a></li> <li><a href="#">Третья ссылка</a></li> <li><a href="#">Четвёртая ссылка</a></li> </ul> </li> <li><a href="#">Четвёртый пункт меню</a></li> </ul> </div>

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

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

Посмотрите!
Как сделав всего 3 изменения в CSS, наше вертикальное расположение навигации с выпадающим меню, превратиться в горизонтальное с выпадающим меню.

Изменения в CSS для выпадающего меню Заменить в .saitbar - width: 240px; на width: 100%; Заменить в .menu-4 li - display: block; на display:inline-block; Заменить в .menu-4 ul.podmenu - top: 0; на top: 34px; Заменить в .menu-4 ul.podmenu - left: 214px; на left: 7px; Currently 4.63/5 1 2 3 4 5

Рейтинг: 4.6/5     Оценили: 27

Назад

Вперед

Похожие публикации

Комментарии к статье 0


Как сделать вертикальное меню только в html

Похожие записи:



Как сделать салат с чипсами рецепты

Каталог ажурных узоров для вязания на спицах с описанием

Какой подарок подарить с цветами