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

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

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


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

Меню, как правило, бывают вертикальное и горизонтальное. Приведу оба примера готовых меню, созданных средствами CSS - Каскадные таблицы стилей.

Как правило стиль меню прописывается в файле style.css, путь к этому файлу указывается в тегах: <head>...</head>,
пример: <link href="style.css" rel="stylesheet" type="text/css" />.
Ссылка может быть абсолютной или относительной, подробнее на странице редактирования шапки сайта.

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

Вариант, который я предлагаю удобен тем, что не использует картинки для отображения строк - пунктов меню, а значит является универсальным.

Достоинства универсального меню
- Ячейки пунктов меню и подменю настраиваются по ширине и высоте;
- Можно настроить любой цвет фона пассивной и активной ссылки, при этом код не привязан к изображению;
- Легко изменить глубину (уровень) вложенности подменю, удалив лишние пункты <ul>...</ul> из HTML кода;
- Меню адаптированно для старых версий браузера Internet Explorer;
- Возможность встроить практически в любой шаблон сайта из-за отсутствия ограничений по ширине, не требуется редактировать картинку фона;
- Легкость и быстрота в исполнении.

Пример вертикального меню по умолчанию

Пример произвольных параметров вертикального меню


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

В скаченном архиве есть ПАМЯТКА по установке, остальные инструкции в самом коде.

Скачать шаблон заготовку универсального вертикального меню для сайта:
Menu-Vert_Link3.rar [2,89 Kb] (cкачиваний: 342)

Рассмотрим горизонтальное меню с выводом подменю.

Как и выше предлагаю универсальный вариант горизонтального меню без использования фоновой картинки. Дизайн редактируется посредством кода в файле style.css.

Пример горизонтального меню по умолчанию


Пример произвольных параметров горизонтального меню

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

Скачать универсальный шаблон горизонтального меню: Menu-Goriz_Link3.rar [2,97 Kb] (cкачиваний: 341)

Удачных вертикальных и горизонтальных навигаций по Вашим сайтам.

Автор: Saah | Просмотров: 10 952 | 1-08-2013,Чт, 18:31  

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

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