Прихожая
Шаг 1: Создаем сайт
Шаг 2: Размещаем в интернет
Шаг 3: Раскручиваем сайт
Шаг 4: Зарабатываем
Заметил ошибку? Выдели и нажми ctrl+enter

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

В данном уроке мы научимся делать выпадающее меню, выполненное на связке CSS+HTML+JQuery .  Как оно выглядит можете посмотреть здесь …

Рассматриваемый тип выпадающего меню, легко настраивается и устанавливается на сайт. В данном меню используется  JavaScript-фреймворк  - JQuery , который в последнее время завоевал огромную популярность у вебмастеров.
По сути, разбираться в тонкостях его работы не обязательно.

Чтобы установить и настроить внешний вид меню, Вам понадобятся лишь небольшие знания html и css .

Итак давайте по-порядку:

ШАГ 1:

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

ШАГ 2: 

На страницы сайта, где будет размещаться данное меню,  между тегами <HEAD> и </HEAD> вставить следующий код:

<link rel="stylesheet" type="text/css" href="menu/jqueryslidemenu.css" />
<!--[if lte IE 7]>
<style type="text/css">
html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->
<script type="text/javascript" src="menu/jquery.min.js"></script>
<script type="text/javascript" src="menu/jqueryslidemenu.js"></script>

И непосредственно в тело документа, в то место, где будет находится само меню, вставить следующий HTML код :

<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="#">Справка</a></li>
<li><a href="#">О программе</a>
<ul>
<li><a href="#">Интерфейс </a></li>
<li><a href="#">Возможности</a></li>
<li><a href="#">Быстрые клавиши</a></li>
</ul>
</li>
<li><a href="#">Обучение</a>
<ul>
< li><a href="#">Уроки</a></li>
<li><a href="#">Видеоуроки</a>
<ul>
<li><a href="#">Работа с HTML</a></li>
<li><a href="#">Работа с CSS </a></li>
<li><a href="#">Работа с PHP</a></li>
</ul>
</li>
</ul><li><a href="#">Автоматизация</a></li>
<li><a href="#">Секреты</a></li>
</ul>
<br style="clear: left" />
</div>

В качестве элементов меню выступает обычный немаркированный список. Если нужно сделать вложение, то просто внутрь одного списка, вкладывается другой.
Естественно, количество пунктов меню и их содержание у Вас будет другое, но принцип остается тот же. Так же, в данном случае,  в атрибутах  href вместо реального адреса, указана так называемая заглушка (#), поэтому замените # на реальные адреса страниц.

 

ШАГ 3:

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

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

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

 

Скачать скрипт выпадающего меню

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

Есть вопрос? Получи ответ на ФОРУМЕ ПОДДЕРЖКИ

 Создан: 2009-01-20      Просмотров: 45133      Автор:Андрей Галямов

Оцените урок:    1    2   3   4    5     

Комментарии:

Автор: Ольга
Дата : 2009-01-20

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

Автор: ta17
Дата : 2009-01-20

Большое спасибо,Андрей!Мне будет очень интерестно просмотреть вашу информацию!!!!! А по поводу сессии ,поздравляю,и желаю успехов в дальнейшем!!!!!Еще раз большое спасибо!!!!! С уважением Артем!!!!!

Автор: Андрей Галямов
Дата : 2009-01-20

Ольга . Я не совсем понял Ваш вопрос

Автор: Андрей
Дата : 2009-01-20

Благодарю за урок, Андрей! Постараюсь применить на практике и поздравляю от всей души с окончанием сессии!!!

Автор: Dishvola
Дата : 2009-01-21

Андрюха! Поздравляю с окончанием сессии! Меню бомбезно, мне очень понравилось, всё хорошо объяснил, я всё понял ))) Тёска ;)

Автор: Елена
Дата : 2009-01-21

Андрей, добрый день! присоединяюсь к поздравлениям и спасибо за уроки. К сожалению, я совсем не технарь,просто хочу создать свой сайт.Поэтому пока сложновато. Надеюсь поможете советами.. Наверное, когда решу, что буду размещать, обязательно сообщу, о чем хотелось бы узнать.. А Вашему сайту- успешного развития! А когда мой сайт будет готов..( не обещаю, правда, что скоро, т.к. нужно найти помощников)).. я обязательно размещу ссылку на Ваш сайт-))

Автор: Елена
Дата : 2009-01-21

Здравствуйте Андрей! Поздравляю, поздравляю, поздравляю с окончанием сессии!!! Большое спасибо за уроки, мне они очень помогли! Желаю успехов в Вашем бизнесе!

Автор: Наталья
Дата : 2009-01-21

Здравствуйте, Андрей! Большое спасибо за урок. Я, к сожалению, сейчас на работе и времени на его изучение совсем нет. Этим я займусь вечером, когда буду дома. Поздравляю со сдачей сессии! Мне самой очень хорошо знакомы эти чувства (сама закончила два ВУЗа). А на счет последней сессии действительно не нужно зарекаться. Воможно, через какое-то время Вы решите, что Вам просто жизненно необходимо еще одно образование и тогда... снова здравствуйте учебники и бессонные ночи. Ведь, как известно, совершенству нет предела.

Автор: Владимир
Дата : 2009-01-21

Здравствуйте, Андрей! Поздравляю со сдачей сессии! Спасибо за урок. Постараюсь потихоньку освоить и применить на практике.

Автор: Александр
Дата : 2009-01-21

Поздравляю со сдачей сессии!!!!! ОГГГГГГГГГГромнОООООООе спасибо за уроки, надеюсь и в дальнейшем их получать...:)!:)!:)!:)!

Автор: Alexander
Дата : 2009-01-21

Большое спасибо, Андрей! Очень полезная информация, и бесценный ваш труд, и поздравляю со сдачей сессии

Автор: Валерий
Дата : 2009-01-21

Мои искренние поздравления с окончанием ВУЗа! Спасибо за уроки. Вы, Андрей - Человек (с большой буквы)!

Автор: Сергей
Дата : 2009-01-21

Андрей, поздравляю!!! Теперь Вы совсем взрослый, удачи в профессии и спасибо за урок!

Автор: алексей
Дата : 2009-01-21

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

Автор: teren
Дата : 2009-01-22

Поздравляю!!!!!!! Спасибо за урок надеюсь на дальнейшее сотрудничество!!!

Автор: Александр
Дата : 2009-01-23

Поздравляю Вас Андрей с успешной сдачей сессии!!! Я за Вас очень рад!!! Надеюсь и в дальнейшем получать от Вас такой великолепный материал!

Автор: рамзан
Дата : 2009-01-23

присоединяюсь пожеланиям. пока у меня нет возможности посмотреть эти уроки, если чечтно я не знаю о чем даже. но сайт я ещё не создал пока ищу то что понравилось людям.

Автор: ксюха
Дата : 2009-01-23

Здравствуйте Андрей большое спасибо за полезную информацию присоединяюсь к пожеланиям и надеюсь на дальнейшую поддержку!!!

Автор: Гриша
Дата : 2009-01-24

Андрей, спасибо. У меня теперь тоже менюшка работает :) Все доступно, делал параллельно с вашим голосом, получилось без запинок. Жду новых уроков

Автор: Лейла
Дата : 2009-01-24

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

Автор: dima
Дата : 2009-01-26

большое спасибо андрюха)))))

Автор: garik
Дата : 2009-01-27

Андрей большое спасибо! Ты просто опостол в мире нета.

Автор: Серый
Дата : 2009-01-28

Андрей спасибо большое!!!!!!Ты помог мне сделать то что я хотел!!! Это сайт!!! И ещё рас спасибо!!!!!!!

Автор: Серый
Дата : 2009-01-29

Андрей скажите пожалуйста как создать страничку не первую например:Первая страничка там правила зарегестрироватся и войти. Когда я нажимаю у себя на страничке на кнопку войти у меня не чего не высвечивается а должно на пример вводите пароль и имя. Как сделать чтоб на первой страничке я нажал войти и у меня высветилось ведите имя и пароль. аналогично и в регестрации чтоб было . Как?

Автор: Антон
Дата : 2009-01-31

Андрей, спасибо огромное за эту Вашу подвижническую работу. Я сам преподаватель и вот сейчас пыхчу над сайтом для студентов, который значительно облегчит им обучение. Приходится информацию собирать буквально по крохам, а для меня - чайника в веб-конструировании - это совсем непросто. Хочу Вам сказать, что у Вас талант объяснять достаточно сложные вещи простым и понятным языком. Не прекращайте своей работы. Она очень нужна. С уважением, А. Шупенин.

Автор: vicinn
Дата : 2009-02-01

Андрей спасибо

Автор: serg
Дата : 2009-02-02

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

Автор: Вадим
Дата : 2009-02-07

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

Автор: Nina
Дата : 2009-02-11

Спасибо! что-то "горизонтально" не получилось... Вертикальный список компонент

Автор: Андрей
Дата : 2009-02-12

Урок классный! Но у меня возник вопрос :я всё сделал, куда нужно вставил код и меню появилось но подменю нет и стрелочик нет.

Автор: Андрей Галямов
Дата : 2009-02-12

Значит что-то сделали не так. Делайте более внимательно, и все у Вас получиться

Автор: Андрей
Дата : 2009-02-12

А чем это может быть вызвано?

Автор: Nina
Дата : 2009-02-15

Большое спасибо, Андрей! После просмотра видеоурока все получилось КЛАССНО! Супер!

Автор: Alex
Дата : 2009-02-18

Все замечательно, только почему все файлы при распаковке выдают ошибку CRC?

Автор: Alex
Дата : 2009-02-18

иполучаются обыкновенные вложенные маркированные списки ссылок - совсем не так как на картинке...

Автор: ЛЮБОВЬ
Дата : 2009-02-21

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

Автор: alkor
Дата : 2009-02-21

СУПЕР

Автор: Дмитрий
Дата : 2009-02-24

подскажите пож-та где я могу задать цвет фона меню, как поменять size и разместить в верхнем правом углу?? чёт никак не соображу. =) Заранее благодарен за ответ

Автор: Дмитрий
Дата : 2009-02-24

разобрался во всём , вот только не найду как переместить менюшку в угол =( помогите пож-та

Автор: Gex
Дата : 2009-03-01

В опере не появляются стрелки и подменю? В IE всё впорядке.

Автор: Viktor
Дата : 2009-03-08

хороший скрипт но как обычьно не без проблем опера в самом деле не коректно работает в старых браузерах действительно есть продлемы описаные выше, а связаны они с CSS документом в нём нужно либо совсем удолить коментарии или же добавить **** Пример:/*Коминтарий******************/

Автор: dorsen
Дата : 2009-03-30

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

Автор: Рамиль
Дата : 2009-04-04

Самый лучший сайт

Автор: xJlaIIax
Дата : 2009-04-05

У меня всё получилось кроме одного.Меню приклеилось в плотную к левой стороне сайта.Как его расположить по центру?

Автор: Андрей Галямов
Дата : 2009-04-05

Вопросы на форум.

Автор: Санечка
Дата : 2009-04-08

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

Автор: Санечка
Дата : 2009-04-08

вопросов больше нет, я нашла у вас, все что мне нужно =)

Автор: Алексей
Дата : 2009-05-22

Все отлично! не понятен один момент: в файле *jqueryslidemenu.css* есть Хак специально для IE6, чтобы достичь корректного отображения. У меня под словом корректного получается просто список вместо меню, подскажите, что не так?

Автор: Евгений
Дата : 2009-05-27

Алексей, удали все комментарии с файла jqueryslidemenu.css и в IE6 будет отображаться корректно.

Автор: Саша
Дата : 2009-06-15

Огромное спасибо за урок!!! Андрей у меня есть вопрос: Можно ли іместо зеленого фона подставить свою картинку??? Тоесть там где "обучение" поставить свою картинку??? Напишите пожалуйста как это сделать. Мне это очень нужно!!! Заранее огромное спасибо!!!

Автор: Cаша
Дата : 2009-06-18

Андрей, ответьте мне пожалуйста , вы меня очень выручите , мне действительно это нужно , скажите: Можно ли вместо зеленого фона подставить свою картинку??? Тоесть там где "обучение" поставить свою картинку??? Напишите пожалуйста как это сделать. Заранее спасибо!!! И еще можно ваш ICQ???

Автор: Аркадий
Дата : 2009-06-20

Поздравляю вас Андрей!!! Спасибо за урок!!! Подскажите люди добрые , а как можно убрать стрелочки эти которые показывают вверх и вниз. Они не очень смотрятся!!! Заранее большое спасибо!

Автор: Николай Язвенко
Дата : 2009-10-07

Я установил горизонтальное и вертикальное меню, но при раскрытии горизонтального меню, подменю почему-то начинает мерцать. А на страничке, где вертикальное меню, горизонтальное вообще глючит (http://electricspace.ru/index.php?option=com_content&task=view&id=44&Itemid=84)

Автор: Сергей
Дата : 2009-10-17

У вас ошибка где графа надо убрать пробел в начале < li><a href="#">Уроки</a></li>

Автор: Толик
Дата : 2009-10-29

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

Автор: Толик
Дата : 2009-10-29

Ненада разобрался

Автор: Толик
Дата : 2009-10-30

подскажите где уменьшается ширина меню? очень нада

Автор: Олег
Дата : 2009-12-11

Добрый день. Подскажите пожалуйста. Вставил ваше меню - всё отлично! Только одно но. В IE Работает, а в Mozilla нет...просто его даже не отображает... Подскажите почему?

Автор: Артем
Дата : 2010-02-02

Подскажите пожалуйста! Я в сайт с блочной версткой вставил это меню, в content. В редакторе html все выглядит красиво, а в браузере оно растягивается. Что делать?

Автор: lerich23
Дата : 2010-06-23

Код указанный вами на этой странице не работает в браузере IE6

Автор: Славик
Дата : 2010-06-26

Подскажите, как сделать разный цвет текста у главного меню и выпадающего Спасибо!

Автор: Саша
Дата : 2010-08-16

у меня ваще не работает почему то(((

Автор: Мурат
Дата : 2010-08-26

Друг спасибо те я оч давно искал нормальный урок спсибо за о что так доступно обьяснил)

Автор: Alexander
Дата : 2010-09-02

Подскажите пожалуйста! Например я создал ссылку (в html) на файл readme.txt как сделать так чтоб вместо диалогового меню браузера (сохранить как...и т.д.) файл просто откривался?

Автор: Pilot
Дата : 2010-09-28

Спасибо большое Андрей урок очень помог.

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

Ваше имя:

Комментарий:

Введите сумму чисел с картинки (проверка от автороботов):

Поиск по сайту