Создаем горизонтальное выпадающее меню при помощи CSS

В данной статье я расскажу как сделать горизонтальное выпадающее меню с использованием CSS и JavaScript. Разметка основана на маркированных списках и поддерживает один уровень вложенности. Вложенное меню с помощью CSS трансформируется в выпадающее меню, появляющееся при событии onmouseover. Интерфейс меню стилизован во внешнем файле стилей. Также вы можете изменить изображение стрелки, которое обозначает, что у главного пункта меню есть подразделы.

Читайте также: Вертикальное выпадающее меню

Пример

Скриншот горизонтального выпадающего меню

Смотреть пример

Инструкция по установке

Шаг 1: добавьте следующий код в секцию <head> Вашего HTML файла:

<link rel="stylesheet" type="text/css" href="csshorizontalmenu.css" /> <script type="text/javascript" src="csshorizontalmenu.js"> /*********************************************** * CSS Horizontal List Menu- by JavaScript Kit (www.javascriptkit.com) * Menu interface credits: http://www.dynamicdrive.com/style/csslibrary/item/glossy-vertical-menu/ * This notice must stay intact for usage * Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more ***********************************************/ </script>

В нем содержатся ссылки на два внешних файла и 3 картики. Скачайте их (правый клик и выберите "Сохранить как"):

Шаг 2: Добавьте следующий HTML код, в котором и содержится само меню:

<div class="horizontalcssmenu"> <ul id="cssmenu1"> <li style="border-left: 1px solid #202020;"><a href="#">Home</a></li> <li><a href="#">Free JS</a></li> <li><a href="#">JS Tutorials</a></li> <li><a href="#">References</a> <ul> <li><a href="#">JS Reference</a></li> <li><a href="#">DOM Reference</a></li> <li><a href="#">CSS Reference</a></li> </ul> </li> <li><a href="#">web Tutorials</a></li> <li><a href="#">Resources</a> <ul> <li><a href="#">Dynamic HTML</a></li> <li><a href="#">Coding Forums</a></li> <li><a href="#">CSS Drive</a></li> <li><a href="#">CSS Library</a></li> <li><a href="#">Image Optimizer</a></li> <li><a href="#">Favicon Generator</a></li> </ul> </li> </ul> <br style="clear: left;" /> </div>

Вот и все! Вы можете «тюнинговать» механизм меню, редактируя файл csshorizontalmenu.js

Поделись с друзьями:
Комментарии

Принцип создания чем-то отличается от общеизвестных способов?

Весь принцип перед Вами. Если чего-то непонятно пишите, прокомментирую.

Поймите, чтобы от поста был толк нужно объяснить посетителям, в чём преимущества данного способа. Лично я не впечатлился. Мне проще зайти на CSSPlay.co.uk и скачать профессиональное CSS меню, которое будет работать во всех браузерах и без каких либо JavaScript правок.

Для этого есть пример! Посетитель его посмотрит и решит, устраивает ли его такой вариант или нет.

Скажите, а как сделать чтоб это меню отображалось нормально во всех браузерах???

У вас прописан DOCTYPE? Скажите где оно не работает? Я проверял на PC и на MAC, везде работает как задумано.

Скажите, а можно код, который содержит само меню (шаг 2) вынести в другой файл? Ну к примеру как файл определяющий стили (*.css) или код java-скрипта (*.js)
И еще, не понял как позиционировать меню по горизонтали. Мне пришлось, все содержимое body положить в table и уже для table сказать align="center". Также, что бы было все более менее симметрично, пришлось согласовывать размер table по горизонтали и размер элементов меню, что бы меню было размазано на весь table.
Это правильное решение? Я новичок в этом деле.

С уважением bo

Удалил дубли. А зачем вам выносить меню в отдельный файл? Можно вынести в файл .js но я не вижу смысла, ибо тогда поисковые системы не увидят ваше меню. Если хотите отцентрировать меню, то задайте для класса horizontalcssmenu свойство margin:0 auto; в том примере что я привел и все отцентрируется.

PS: если будут другие проблемы, милости прошу в форум, обьясню и все расставлю по полочкам ;-)

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

Я попробовал то, о чем Вы сказали, что то у меня ни чего не получилось. Ссылка на horizontalcssmenu в файле csshorizontalmenu.css встречается много раз. По моему разумению данное свойство должно было бы применено к .horizontalcssmenu ul я проверил, но желаемого результата не достиг. Возможно я что то делаю не так.

Если не затруднит, поясните подробнее. Хотя, может какие то другие элементы форматирования мешают? Так же хотелось бы позиционировать данное меню и по вертикали в небольших пределах.

С уважением bo

Либо пишем так в начале css файла (ширину width подберите в зависимости от ширины вашего меню):

.horizontalcssmenu {margin:0 auto; width:900px;}

либо позиционируем меню абсолютно (если надо расположить в конкретных координатах на странице):

.horizontalcssmenu {position: absolute; left: 200px; top:100px;}

left и top подбираете по вкусу.

Спасибо за поддержку! Я почти нашел решение, может и не такое уж элегантное, однако работает так, как хочется. Я все фрагменты поместил в table и уже там манипулируя и атрибутами table и стилями почти добился нужного результата. Однако для разных броузеров table -> align по разному воспринимается. Для Opera table align: left,right,center воспринимается адекватно, а для IE v6,7 ни как не реагирует, как будет firefox не знаю не пробовал.

Если же манипулировать стилями и устанавливать значения absolute для margin, padding, top, bottom то это отражается на отображение меню второго уровня. Эти меню отрываются от основого на задаваемую величину margin, padding. То есть, свойства задаваемые для основного меню наследуются и подменю. Опять же, если нет привязки к table то при изменении окна броузера по горизонтали (сужая/растягивая), меню живет свой жизнью. Тут получается, что по всей видимости я что то не нак делаю. В целом что то не понимаю, как все должно быть связано.

Потом как то по разному у IE и Opera воспринимается общая длина меню. У IE она почему то больше, и меню начинает заворачиваться в table.

Ну пока еще окончательно не разобрался, но кажется что то получается. Однако создается такое ощущение, что это очень хрупкая конструкция.

С уважением bo

Здравствуйте! У меня несколько вопросов. Не подскажете где можно найти горизонтальное выпадающее меню на css или javascript, чтобы на мониторах разных размеров показывало одинаково, т.е. удлинялось вместе в пунктами и подпунктами меню. И еще, что надо добавить в код css меню, чтобы он поддерживал все языки, юникод самой страницы не помогает. На странице показывает, а в меню непонятные знаки выскакивают. Я в этом новичок,может вопросы глупые, но если объясните что к чему, буду рад) заранее спасибо!

Mike, будте добры, помогите вот с каким вопросом:

1) Хочется что бы меню было не по левому краю, а по центру.
Я тут извернулся: <центер><див стиль="width:85%"> - заработало. Но может можно как-то проще?

2) Хочется чтобы размеры каждой "кнопки" были не явно указаны как в примере 120px а были бы как сам текст ссылки. Думаю понятно объяснил.
Всё таки нарисую - хочется вот так: |Главная|Форум|Чат|... а не | Главная | Форум | Чат |
убрав размер 120px получил желаное, но в этом случае в IE меню перестаёт работать (расслаивается на составляющие). Зато отлично работает в FF и Opera... Есть какой-нибудь другой способ?

1) Если используете <DOCTYPE>, то читайте 2 комментарий, поменяйте только ширину на свою.

2) Я вижу только вариант задания для каждого пункта подходящей ширины.

Подскажите пожалуйста как вынести html часть (шаг 2) в отдельный файл js.
А то, если на сайте будут постоянно добавляться страницы - меню редактировать каждый раз?

Подскажите, а можно выпадающее подменю сделать горизонтальным?

Mike, не подскажете как сделать данное меню многоуровневым и чтоб отображался коректно в опере и ie? Если можно код! Я тут пробовал подправить но получилось частично и ie работает отлично а вот опера и другие браузеры нехотят коректно отображать данную менюшку! Если вам не трудно подскажите как реализовать многоуровневое меню.

Подскажите пожалуйста, я вообще новичок в этом серьезном деле и никак не могу понять, вот я сделала это меню, но если у меня 2 слова в названии пункта меню, то квадрат , выделенный под его простронство увеличивается , и значительно отличается от остальных, как это исправить? уменьшенее шрифта и увеличение всех квадратов не помогает (( при увеличении всех самый большой тоже увеличивается ((

Подскажите, как изменить размер (ширину) каждой ячейки

Аватар пользователя Московский бомж

Мне кажется здесь можно упростить все существенно, особенно в стилях.

Я совершенно не понимаю как сделать, чтобы в шестом эксплорере ссылки располагались горизонтально. Во всех браузерах нормально, а в ИЕ: - вертикально.

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

Приветствую! Интересует вот эта часть кода JS-скрипта:
var cssmenuids=["cssmenu1"]
Возникла небольшая проблема при построении меню в CMS Joomla 1.5. Всего один нюанс, а мешает уже прилично. Собственно, в Joomla созданное списками, тег <ul> имеет не идентификатор, а класс. Т.е. в Joomla <ul class="menu">, а здесь <ul id="menu">. Возможно как-нибудь изменить часть кода var cssmenuids=["menu"]? Заранее спасибо!