Закрыть ... [X]

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

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

Так как любое меню представляет из себя список ссылок, которые ведут на внутренние страницы сайта. Для создания меню обычно используют маркированные списки, которые создаются с помощью html тегов <ul> и <li>. Но как известно элементы списка по умолчанию выстраиваются вертикально друг под другом, а что если необходимо сделать горизонтальное меню? С использованием CSS это не является большой проблемой.

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

<ul id="menu">
    <li><a href="#">Главная</a></li>
    <li><a href="#">Новости</a></li>
    <li><a href="#">Контакты</a></li>
    <li><a href="#">О сайте</a></li>
</ul>

Для того чтобы идентифицировать список и задать для него нужные css стили, я добавил к нему атрибут id с идентификатором "menu".

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

Как видно элементы списка выстроились вертикально друг под другом и если нам нужно вертикальное меню, то если стилизовать нужным образом ссылки



Поделись с друзьями



Рекомендуем посмотреть ещё:




Горизонтальное меню для сайта Что поднимает сердечное давление в домашних условиях

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

ШОКИРУЮЩИЕ НОВОСТИ