Учимся устанавливать вертикальное выпадающее меню
В данном уроке я бы хотел рассказать об установке вертикального выпадающего меню на Ваш сайт.
Данное меню корректно отображается во всех популярных версиях браузеров. Меню выполнено на связке HTML+CSS+JavaScript . Оно легко настраивается и устанавливается.
Итак по-порядку:
ШАГ 1:
Скачивайте архив с файлами, которые необходимы для работы меню, и распаковывайте его в корневую директорию Вашего сайта.
Примечание: если Вы скачиваете архив с меню отдельно, т.е. без видеоурока, то после того, как Вы разархивируете скачанный архив, у Вас будет такая ситуация: папка menu_files, внутри которой будет лежать еще одна папка menu_files. Так Вот именно эту, внутреннюю папку menu_files , следует ложить в корень сайта.
ШАГ 2:
На страницу, в которую Вы хотите добавить меню, необходимо в голову документа
т.е. между тегами <head> и </head> вставить следующие строки:
<script type="text/javascript" src="menu_files/script.js"></script>
<link href="menu_files/style.css" rel="stylesheet" type="text/css">
Эти строки подключают файл стилей, отвечающий за внешний вид меню, и javascript, необходимый для его корректной работы.
ШАГ 3:
Ну а теперь, в то место на странице, где Вы хотите расположить само меню, необходимо вставить его HTML код:
<div class="sidebarmenu">
<ul id="sidebarmenu1">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Folder 1</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
</ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Folder 2</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Sub Item 2.1.3</a></li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Item 4</a></li>
</ul>
</div>
Меню формируется обычным списком, если Вы не знаете как создаются списки, почитайте об этом здесь .
Также, Вам прийдется заменить знаки # на адреса страниц, на которые ведут пункты меню, изменить названия пунктов меню, и настроить внешний вид под дизайн Вашей странички (это можно сделать редактируя файл стилей style.css, расположенный внутри папки menu_files)
На всякий случай, я записал для Вас видеоурок по установке данного типа меню, так что скачивайте, смотрите, и у Вас все получится.
 Рис.1 Скриншот из видеоурока по установке вертикального выпадающего меню
Пользуйтесь на здоровье :)
Скачать скрипт вертикального выпадающего меню
Скачать видеоурок по установке + скрипт
Есть вопрос? Получи ответ на ФОРУМЕ ПОДДЕРЖКИ
 Создан: 2009-04-08 Просмотров: 64408 Автор:Андрей Галямов
Комментарии: Автор: aleks Дата : 2009-04-08 спасибо!!! Автор: rekachili Дата : 2009-04-08 Молодчага Андрюха! Хорошие, полезные и простые для понимания уроки! Автор: Андрей Дата : 2009-04-09 Спасибо за понятные уроки! Хочется пожелать удачи в нужном и полезном деле! Автор: rona Дата : 2009-04-10 Спасибо.Ты настоящий друг!!! Автор: alfimov Дата : 2009-04-12 Спасибо! Автор: Олег Дата : 2009-04-13 Отличный сайт! Андрей - суперМЕН, пиши ещё! Автор: Djamel Дата : 2009-04-13 прикольная тема Автор: Serg2009 Дата : 2009-04-14 Привет, Андрей.
Спасибо за полезный материал.
Изучал разные уроки для создания сайта.
Интересует создание меню, в твоих уроках рассматривается 2 - варианта - Горизонтальное и вертикальное.
Как их грамотно можно соединить в единое целое, чтобы на страницах работали одновременно.
Было бы неплохо рассмотреть урок по соединению на сайте 2-х меню - горизонтальное и вертикальное.
Описывать каждое отдельно не стоит, так как есть уже готовые уроки.
Просто описать звено по их взаимодействию.
Спасибо Автор: ice363 Дата : 2009-04-20 андрей а что означают теги
<style type="text/css"> </style>
в css файле? я их удалил. а можно?
я установил меню как ты говорил но первая часть стиля не работала. то есть .sidebarmenu ul . перед меню (строчками списка) стояли диски. стиль текста не менялся. я всё перепроверил. в конце решил удалить те теги, ну и всё заработало. Автор: Ленок Дата : 2009-04-29 подскажите пожалуйста как сделать так чтобы второй уровень меню начиналось каждый раз сверху, при наведение на любую вкладку первого уровня меню? Автор: Сергей Дата : 2009-05-02 Добрый день!
Установил меню, в Internet Explorer все работает отлично, открыл в Mozilla Firefox, показывается меню одним списком, без вкладок.
Что делать? Автор: Алексей!!! Дата : 2009-05-10 СПАСИБО!!! Автор: Марат Дата : 2009-07-07 Всё супер! СПАСИБО Автор: Алена Дата : 2009-07-08 СПАСИБО большое! вы буквально спасли мой сайт:) Автор: Владимир Дата : 2009-08-04 Спасибо за меню. Очень удобно и легко редактировать. Автор: Галина Дата : 2009-11-22 спасибо здорово.
по секрету... одно спасибо продлевает жизнь на 2 минуты. Автор: Елена Николаевна Дата : 2009-12-07 Восхищаюсь Вами. ВЫ очень мне помоли. Счастья. Автор: Славик Дата : 2010-01-08 Золотой вы человек Андрей по больше бы таких людей спасибо большое за статью ))) Автор: Юлия Дата : 2010-02-11 Меню отличное, только вот у мя в ИЕ 6.0 всё равно не работает, всё проверила, в чём подвох???? Автор: Марк Дата : 2010-02-17 Спасибо!! скажи, а есть программы для раскрутьки сайта?если да, то укажи путь кним:-) Автор: Валерий Дата : 2010-03-01 Я пытаюсь скачать файлы и видео, но открывается страница с абракадаброй. Как быть? Автор: Александр Дата : 2010-03-18 Подскажите пожалуйста, что нужно сделать, чтобы выпадающее меню "выпадало" на левую сторону. То есть в противоположную. Автор: Павел Дата : 2010-04-09 Огромное Вам человеческое спасибо! Невероятно, но это первый и единственный доходчивый материал по установки выпадающего меню, что я отыскал в сети. Желаю всяческих удач в жизни и работе!!! Автор: Юрок Дата : 2010-06-08 Подскажите, пожалуйста, а можно ли с помощью Dreamveaver сделать форум? Автор: VIPER Дата : 2010-07-14 Спасибо вы реально помогли, я се на сайт меню поставив, а оно не разворачивалось, благодаря вас всё ок)) Автор: Dmitri Дата : 2010-07-19 спасибо огромное!!!
посетителям: тыкаем рекламу, даем заработать нашему благодетелю Автор: BllooD Дата : 2010-10-22 А где реклама , куда тыкать ??? Автор: михаил Дата : 2010-10-23 Помогите плз,у меня такая проблема , устанавливаю меню и загружаю код в css , но стиль меню работает только на главной странице на других тупо текст
|