Логотип imagecms

CSS-меню как элемент навигации

Каскадные таблицы стилей широко используются в веб-дизайне, так как с их помощью, особенно в связке с HTML 5, можно реализовать множество действительно удобных и полезных вещей. В этом плане особенно полезно поискать примеры того, что можно сделать с помощью CSS, на различных англоязычных сайтах, поскольку приемы, взятые из таких уроков, позволят сделать сайт действительно современным, стильным и динамичным.

Одним из примеров эффективного использования каскадных таблиц стилей является создание с их помощью CSS меню. Если требуется что-то относительно простое, можно пробовать сделать все самостоятельно, а при необходимости в более сложных решениях – скачать готовый код, примеров которого можно найти довольно много на различных сайтах. Что интересно, существуют специальные сервисы, которые позволяют автоматизировать создание СSS меню, путем его генерации в требуемом вам виде, для чего достаточно ввести требуемые параметры.

Чаще всего на сайтах используется горизонтальное меню на CSS, что довольно удобно в плане интеграции навигации в общую концепцию дизайна. Вот, например, как это выглядит многоуровневое выпадающее меню на практике (демо сервиса): 
 

Также, можно использовать и Java Script, чтобы добавить элементам интерактивности.

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

CSS Menu Maker (cssmenumaker.com) – онлайн генератор, который позволяет сгенерировать меню на CSS, которое действительно красиво выглядит и совместимо со всеми популярными браузерами: 
 

Также здесь предлагается платное ($29) расширение для популярного редактора Dreamveawer, которое обладает аналогичными функциями, и может стать действительно полезным инструментом для вебмастера.

CSS Menu Builder (cssmenubuilder.com) – пользователю предлагается более тысячи комбинаций как в горизонтальном, так и вертикальном виде, не говоря уж о возможных цветовых решениях. Получается, правда, не так красиво как в первом упоминаемом сервисе, но тоже довольно интересно.

Pure CSS Menu.com (purecssmenu.com) – онлайновый генератор с подробной справкой для пользователя: как это работает, принципы генерации, кастомизация, работа с различными браузерами и т.д.

Скачать ImageCMS совершенно бесплатно

Также, рекомендуем обратить внимание на сайт css3menu.com, с помощью которого также можно создать красивые меню самого разного вида. Перед тем как сгенерировать код, его можно протестировать в демо-режиме на самом сайте.

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

Читайте также:
19 Августа 2013 4862 0
Подпишитесь на еженедельную рассылку и получайте скидки на популярные e-commerce продукты
И совсем скоро Вы станете гуру в e-commerce, веб-разработке, SEO и в интернет-маркетинге! Развивайте свой бизнес с актуальной информацией, успешными кейсами и вдохновляющими примерами.
(Комментарии: 0)
Вы должны , чтоб присоединиться к разговору
Давайте дружить!

Узнавайте все новости, получайте обзоры, кейсы
и другие полезные материалы по e-commerce через социальные сети!

Консультация по ImageCMS Shop
 
Уже уходите? Еще секундочку!

Зарегистрируйтесь, и вам навсегда обеспечены скидки на популярные
e-commerce продукты! Также мы будем делиться с вами самой ценной
информацией для развития вашего бизнеса.

или