Раскрывающееся вертикальное меню

Вертикальное раскрывающееся меню

Информация, представленная на этой странице ориентирована в первую очередь для начинающих web-мастеров.

Меню с использованием CSS и изображений, оригинальное, красивое и практичное, с наименованиями подразделов. При клике мышью, подраздел открывается, обнажая ссылки. Фон каждой ссылки изменяется при наведении курсора мыши и появляется указатель (стрелочка).

Скриншот меню в обычном состоянии:

Скриншот меню в полностью раскрытом состоянии:

Демо-пример Исходники (5.8 кб)

Если возникают проблемы при скачивании файлов, например, через браузер, скопируйте ссылку (правая кнопка мыши → копировать адрес ссылки) и скачайте файл через Download Master.

Установка меню на сайт

1. Скачать архив, распаковать в текущую папку на компьютере. Папку sdmenu со всеми файлами закачать в корневую директорию сайта.

Документ demo.html содержит весь необходимый код. В браузере можно посмотреть внешний вид и работу в демо-режиме.

2. Код с вызовом CSS и скрипта в таблице внизу скопировать и поместить в раздел head страницы своего сайта. По умолчанию, эта страница должна находиться в корневой директории, там же, где и папка sdmenu.

<link rel=»stylesheet» type=»text/css» href=»sdmenu/sdmenu.css»> <script type=»text/javascript» src=»sdmenu/sdmenu.js»></script> <script type=»text/javascript»> // <!]> </script>

3. А этот код скопировать и разместить на странице между тегами body в выбранном Вами месте и заполнить своими данными:

<div style=»float: left» id=»my_menu» class=»sdmenu»> <div> <span>Название меню</span> <a href=»ваша ссылка»>Название ссылки</a> <a href=»ваша ссылка»>Название ссылки 2</a> <a href=»ваша ссылка»>Название ссылки 3</a> <a href=»ваша ссылка»>Название ссылки 4</a> <a href=»ваша ссылка»>Название ссылки 5</a> <a href=»ваша ссылка»>Название ссылки 6</a> </div> <div> <span>Название меню</span> <a href=»ваша ссылка»>Название ссылки</a> <a href=»ваша ссылка»>Название ссылки 2</a> <a href=»ваша ссылка»>Название ссылки 3</a> </div> <div class=»collapsed»> <span>Название меню</span> <a href=»ваша ссылка»>Название ссылки</a> <a href=»ваша ссылка»>Название ссылки 2</a> <a href=»ваша ссылка»>Название ссылки 3</a> <a href=»ваша ссылка»>Название ссылки 4</a> </div> <div> <span>Название меню</span> <a href=»ваша ссылка»>Название ссылки</a> <a href=»ваша ссылка»>Название ссылки 2</a> <a href=»ваша ссылка»>Название ссылки 3</a> <a href=»ваша ссылка»>Название ссылки 4</a> </div> </div>

Спасибо за внимание. Желаю успехов! L.M.

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *