Создаем горизонтальное выпадающее меню в 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 Просмотров: 45755 Автор:Андрей Галямов
Комментарии: Автор: Ольга Дата : 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 Спасибо большое Андрей урок очень помог.
|