HTML-верстка: инструменты и приемы профессиональной front-end разработки

Меню (навигация)


назадвперед

Навигация

Простая и удобная навигация (меню) является одной из важных составляющих любого веб-сайта.

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


Навигация = список ссылок

Основой меню является стандартный HTML.

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

Меню — это список ссылок, поэтому имеет смысл использовать элементы <ul> и <li>:

Пример

<ul>
<li><a href="default.html">Главная</a></li>
<li><a href="news.html">Новости</a></li>
<li><a href="contact.html">Контакты</a></li>
<li><a href="about.html">О нас</a></li>
</ul>

Теперь нам надо удалить маркеры списка, обнулить отступы: margin и padding:

Пример

ul
{
list-style-type:none;
margin:0;
padding:0;
}

Объясним код:

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


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

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

Пример

a
{
display:block;
width:60px;
}

Посмотреть

Объяснение примера:

Заметка: всегда указывайте ширину элемента <a> в вертикальном меню. Если вы забудете это сделать, IE6 может сгенерировать неожиданный результат.


Горизонтальная навигация

Существуют два способа создания горизонтального меню: использование свойств inline или float.

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

Строчные пункты списка

Первым способом создания горизонтального меню является назначение элементу <li> свойств строчного элемента:

Пример

li
{
display:inline;
}

Объясним пример:

Плавающие пункты списка

В результате предудущего примера, пункты меню будут иметь разную ширину.

Чтобы сделать меню с одинаковыми по ширине пунктами, нужно прибавить к элементам <li> свойство float:

Пример

li
{
float:left;
}
a
{
display:block;
width:60px;
}

Посмотреть

Что все это значит:



Понравилась запись? Сказать "Спасибо" очень просто, поделитесь записью в социальных сетях!


назадвперед

СТАТИСТИКА



ССЫЛКИ


Подпишись на новости сайта