В данном уроке я бы хотел рассказать об установке вертикального выпадающего меню на Ваш сайт.
Данное
меню корректно отображается во всех популярных версиях браузеров. Меню
выполнено на связке 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>
Меню формируется обычным списком, если Вы не знаете как создаются списки, почитайте об этом здесь Уроки HTML'а. Урок # 5. .
Также, Вам прийдется заменить знаки # на
адреса страниц, на которые ведут пункты меню, изменить названия пунктов
меню, и настроить внешний вид под дизайн Вашей странички (это можно
сделать редактируя файл стилей style.css, расположенный внутри папки menu_files)
На
всякий случай, я записал для Вас видеоурок по установке данного типа
меню, так что скачивайте, смотрите, и у Вас все получится.
Рис.1 Скриншот из видеоурока по установке вертикального выпадающего меню
Пользуйтесь на здоровье :)
|