Пятница, 29.03.2024, 15:27
Приветствую Вас Гость | RSS

Веб-планета

Каталог файлов

Главная » Файлы » Мои файлы

Учимся устанавливать вертикальное выпадающее меню
[ Скачать с сервера (2.6 Kb) ] 19.04.2009, 10:05


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

Данное меню корректно отображается во всех популярных версиях браузеров. Меню выполнено на связке 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 Скриншот из видеоурока по установке вертикального выпадающего меню

Пользуйтесь на здоровье :)


Категория: Мои файлы | Добавил: antoxa0079111
Просмотров: 6561 | Загрузок: 416 | Комментарии: 3 | Рейтинг: 5.0/2 |
Всего комментариев: 2
2 Аниме Портал!  
0
Life-Anime.Ru - Привет привет ^^ Приветствуем Вас на только недавно открывшимся сайте, совсем ещё молодом и зеленым, но жаждущим огромного количества пользователей! У нас вы можете найти кучу интересных анимешек, отборную японскую музыку и кучу позитива! Среди нашей администрации и посетителей вы можете найти самых отъявленных хулиганов и сумашедших дурачков, которые с удовольствием развеселят вас и станут вашими друзьями! или же вы станете их жертвами - эт уж как получится) вообщем, мы вам рады!)

1 Жека  
0
Почему когда я вставляю вот эти строки <script type="text/javascript" src="menu_files/script.js"></script>
<link href="menu_files/style.css" rel="stylesheet" type="text/css"> В КАТАЛОГ ФАЙЛОВ У МЕНЯ МЕНЮ НЕ СТАНОВИТСЯ СИНИМ. Как Сделать. РАБОТАЕТ ТОЛЬКО НА ГЛАВНЫХ СТРАНИЦАХ. ПОМОГИТЕ!!!!!!!!

Имя *:
Email *:
Код *:
Меню сайта
Шаг 1: Создаем сайт
Шаг 2: Размещаем в интернет
Шаг 3: Раскручиваем сайт
Мини-чат
РЕКЛАМА
    -------------------------
    Форма входа
    Категории раздела
    Мои файлы [3]
    Наш опрос
    Оцените мой сайт
    Всего ответов: 44
    Друзья сайта
  • Официальный блог
  • Сообщество uCoz
  • FAQ по системе
  • Инструкции для uCoz
  • Статистика
    Copyright MyCorp © 2024
    Создать бесплатный сайт с uCoz