Создание CSS меню. Простое меню для сайта. Горизонтальное CSS меню

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

Создание CSS меню. Просто меню для сайта. Горизонтальное CSS меню.

Как и в прошлой публикации, меню сайта будет создано при помощи маркированного HTML списка (при помощи тегов <li> и <ul>). Оформлять горизонтальное меню для сайта мы будем при помощи таблицы стилей (CSS), мы не будем использовать JavaScript для создания горизонтального CSS меню. Как и в прошлый раз, мы не будем использовать изображений для создания горизонтального CSS меню.


Создание меню для сайта. Горизонтальное CSS меню. Шаг 1 -создание HTML макета меню.

И так, начнем мы с создания HTML макета меню сайта. Для этого мы воспользуемся HTML списком, ненумерованным списком:

Сразу подключаем файл таблиц стилей, который называется style.css. При помощи тегов <ul> и <li> создаем HTML макет меню для сайта. Поскольку, пункты нашего горизонтального CSS меню должны куда-нибудь вести, делаем их ссылками при помощи тега <a>, в качестве значения атрибута href устанавливаем #(хэш), ссылки с таким атрибутом никуда не ведут. HTML список меню помещаем в контейнер <div> с идентификатором hmenu, поскольку внутри элемента <body> могут находиться только блочные HTML элементы и элементы <ins> и <del>. После созданного списка стоит тег <br> — перевод строки, он нужен для того, чтобы растянуть меню сайта по горизонтали на всю ширину окна браузера.

Создание меню для сайта. Горизонтальное CSS меню. Шаг 2 — Задаем стили для меню сайта.

Первое, что нужно сделать — это задать цвет фона и ширину контейнера <div> в CSS, хотя вы знаете, что блочные HTML элементы занимают всю доступную ширину, в отличие от строчных HTML элементов:

Затем нам нужно задать общий стиль для горизонтального CSS меню:

Здесь мы убираем внутренние и внешние отступы, а также «прижимаем» меню сайта к левой границе окна браузера.

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

Мы знаем, что элемент <li> относится к блочным, то есть занимает всю область, в которой он стоит, из-за этого наше меню было вертикальным, добавив CSS свойство display: inline, мы сделали элементы <li> строчными, а наше меню стало горизонтальным.

Теперь мы можем задать CSS стили для содержимого контейнеров <li>, то есть стили для навигации горизонтального меню(для тега <a>):

CSS свойство float:left выравнивает горизонтальное меню и контейнер <div> по верхней границе. Все ссылки по умолчанию подчеркиваются браузером, чтобы избавиться от этого недоразумения мы используем свойство text-decoration:none. Далее мы задаем цвет ссылок, то есть цвет текста меню сайта. Внутренними отступами мы расширяем наше горизонтальное меню.

Задаем стили для посещенных пунктов меню и то, как будут отображаться пункты меню, при наведение на них курсора мыши:

Ну тут все понятно: мы задаем цвет текста и цвет фона для горизонтального CSS меню.

Осталось задать стиль для тега <br>, чтобы выровнять по высоте горизонтальное меню и элемент <div>:

Это горизонтальное CSS меню будет растягиваться на всю ширину окна браузера и при это данное меню корректно отображается во всех браузерах.

Исходные коды примеров вы можете скачать на публичных страницах вконтакте: раз и два.

На этом всё, спасибо за внимание, надеюсь, что был хоть чем-то полезен и до скорых встреч на страницах блога для начинающих вебразработчиков и вебмастеров ZametkiNaPolyah.ru. Не забываем комментировать и делиться с друзьями;)

8 комментариев к записи Создание CSS меню. Простое меню для сайта. Горизонтальное CSS меню

Евгений

Мне надо типа такого шаблона и чтобы форум бы с таким же стилями.

Смотреть тут - http://web-j.ru/index.php/forum

Кто нибудь подскажет, может видели.

Спасибо...

Дмитрий

Здравствуйте, я новчиек, но либо я такой нуб еще в HTML или я нашел ошибку. Прсмотритесь, название блока hmenu, а стили создаете вы для блока «menu», по идее которого даже нету в коде.

Кирилл

Спасибо, что заметили, обязательно исправлю.

saksonskiy

Подскажите что не так делаю. сделал как написано но у меня все менюшки накладываются один на одну как с этим бороться?

Алексей

Статья очень помогла. Спасибо.

Борис Борисович

Спасибо за труд , не шедевр (я про объяснение само) но хороша

Кирилл

Борис Борисович, да не за что, знаю, что не шедевр, будем над этим работать.

Макс

Исправьте ошибку ! В разметке div — «hmenu» , а в стилях же просто div — «menu»

Текст комментария: