Простое горизонтальное меню (список)

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

Рассмотрим первый вариант:

пункт 1 пункт 2 пункт 3

здесь я указал через пробел 3 ссылки: <div id="menulink"><a href="#">пункт 1</a> <a href="#">пункт 2</a> <a href="#">пункт 3</a></div>

Теперь достаточно указать свойства для пунктов меню:

#menulink a {} 

#menulink a:hover {} 

Не буду подробнее останавливаться здесь, свойства будут во втором варианте - на основе списка: 

<div id="menuspisoklink">

<ul>

<li><a href="#">Пункт 1</a></li>

<li><a href="#">Пункт 2</a></li>

<li><a href="#">Пункт 3</a></li>

</ul>

</div>

Без применения каких-либо стилей элементы меню будут расположены друг под другом

сответствено необходимо выстроить их в линию, добавив свойства к тегу <li>:

1 вариант. #menuspisoklink li {display: inline-block} - выстроит блоки в линию.

2 вариант - выравнивание блоков по левому/правому краю: #menuspisoklink li {float:left}

 {display: inline-block} {float:left}

 

Далее продолжу с первым вариантом, хотя второй так же вполне можно привести в нормальный вид. 

Пункты меню расположены в одну строку и можно заняться их оформлением. 

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

#menuspisoklink li {
background: #F0C747; - добавляем фон
padding: 0px; - поля
border-radius: 5px; - закругляем углы
box-shadow: 0px 5px 5px #C2C2C2; - тень
border: 1px solid #E6AF03; - граница
}

В таком варианте меню будет вытянуто на всю ширину страницы, либо блока в котором оно находится. если есть необходимость ее ограничить, можно либо указать определенную ширину (width), либо применить к тегу <ul> {display:inline-block}. В результате получим следующее:

Перейдем к пунктам меню. Можно оформлять как тег <li>, так и ссылки внутри. Остановлюсь на первом варианте. Разница не большая и в итоге мы получим примерно одно и то же. В некоторых случаях (к примеру - картинка в пункте меню вне ссылки) удобнее работать непосредственно с тегом <li>. Ранее уже применили {display:inline-block}, теперь зададим поля и фон, а так же закруглим углы:

Зададим фон для пункта меню при наведении:

#menuspisoklink li:hover {background: #43940D;}  

Для плавности смены фона при наведении можем добавить для #menuspisoklink

{litransition: all 0.5s ease 0s;
-moz-transition: all 0.5s ease 0s;
-webkit-transition: all 0.5s ease 0s;
-o-transition: all 0.5s ease 0s;}

Теперь приступим к оформленю ссылок. Все ссылки находятся внутри тега <a>, следовательно с ним и нужно работать. Сменим цвет текста и добавим для него тень, уберем нижнее подчеркивание:

Так же по аналогии с тегом <li> можно задать стили для тега <a> при наведении. В итоге получилось достаточно простое одноуровневое меню. 

Скачать пример

Еще 4 материала, которые возможно Вам понравятся:

Добавить комментарий

Комментарии (0)