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

Учимся устанавливать вертикальное выпадающее меню

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

Данное меню корректно отображается во всех популярных версиях браузеров. Меню выполнено на связке 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      Просмотров: 64546      Автор:Андрей Галямов

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

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

Автор: 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 , но стиль меню работает только на главной странице на других тупо текст

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

Ваше имя:

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

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

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