Как сделать горизонтальное меню?

Автор: Илья Остапенко /

Горизонтальное меню, присутствует практически на каждом сайте и является его неотъемлемой частью. Узнайте, как создать горизонтальное выпадающее меню для вашего сайта.

как сделать горизонтальное меню

Обычно этот вопрос задают на форумах CMS Joomla, и им советуют различные компоненты, настройки в модуле и естественно правильную настройку CSS с использованием Java Script. На мой взгляд, куда проще правильно прописать несколько строк кода, чем установить какие либо компоненты.

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

Для начала, я расскажу, как сделать горизонтальное меню. Д ля начала нам надо создать список категорий меню и заключить в теги <ui> и <li>. Создав список категорий, нам нужно заключить его в тег <div> и присвоить ему какой-либо класс. Все должно выглядеть примерно так:

Так список у нас разделов меню у нас создан, но он пока что выводиться вертикально. Теперь между тегами <head></head> нам необходимо прописать следующий код:

Данный код присваивает всем тегам <li> в классе horizont, функцию display параметром inline. Вот эта функция с параметром выводит содержимое в тегах <li> одной строкой.
Собственно вот и весь секрет как создать горизонтальное меню CSS. Как видите, ничего сложного в этом нет. Можно так же использовать множество различных эффектов, которые вы можете посмотреть в подобранных мной меню, которые я приведу ниже.

http://www.workwebsite.ru/example/menu/dark-red.php

http://www.workwebsite.ru/example/menu/ultra_menu.php

http://www.workwebsite.ru/example/menu/red_style.php

http://www.workwebsite.ru/example/menu/metal_style.php

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

Каждый из стилей можно легко подогнать под ваш дизайн, необходимо лишь знать основы CSS и вы сделаете красивое горизонтальное меню. Если же вам трудно это сделать, то не стесняйтесь и обращайтесь ко мне за помощью. При условии свободного времени я обязательно вам помогу =)

http://www.workwebsite.ru/example/menu/standart_menu.php

http://www.workwebsite.ru/example/menu/green_menu.php

http://www.workwebsite.ru/example/menu/orange_menu.php

http://www.workwebsite.ru/example/menu/black_menu.php

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

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

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

Оставить комментарий

Это не спам.