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

08.10.2009 12:54

Представляю Вашему вниманию вертикальное выпадающее меню. Как оно выглядит и ознакомиться с ним Вы можете ниже. Файл для скачки в конце статьи.

Итак, наше меню содержит три уровня. Вы можете изменять количество уровней как Вам угодно, главное следить за правильностью открытия/закрытия тэгов.

Шаг 1

<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>

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

Шаг 2

Сначало, создаём файл "style.css" и копируем туда всё ,что относится к CSS.

.sidebarmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
font: bold 13px Verdana;
width: 150px; /*Ширина меню */
border-bottom: 1px solid #ccc;
}
 
.sidebarmenu ul li{
position: relative;
}

Все подробности я предоставил в статье о горизонтальном выпадающем меню. Здесь же я в кратце поясню, что к чему.

• padding и margin - это мы обнулили отступы у элементов меню.
• list-style-type:none - убрали буллеты из нашего списка
• font: bold 13px Verdana - текст: полужирный, размер, название шрифта
• border-bottom: 1px solid #ccc - устанавливаем стиль границы контейнера в который заключен элемент. В данном случае имеется ввиду нижняя граница тега <li> (ширина границы, solid - сплошная линия(возможные значения: dotted - пунктир, dashed - росчерк, double - двойная линия) , #ccc - цвет линии.

/* Стили ссылок для основного списка меню */
.sidebarmenu ul li a{
display: block;
overflow: auto; /*force hasLayout in IE7 */
color: white;  /*цвет шрифта*/
text-decoration: none;  /*убрали подчеркивание*/
padding: 6px; /*отступы*/
border-bottom: 1px solid #778;
border-right: 1px solid #778;
}
.sidebarmenu ul li a:link, .sidebarmenu ul li a:visited,
.sidebarmenu ul li a:active{
background-color: #012D58; /*фоновый цвет основного списка*/
}
.sidebarmenu ul li a:visited{
color: white; /*цвет шрифта после наведения курсора*/ 
}
.sidebarmenu ul li a:hover{
background-color: black; /*цвет фона после наведения курсора*/
}
/*Стили для подменю */
.sidebarmenu ul li ul{
position: absolute;
width: 170px; /*ширина подменю */
top: 0;
visibility: hidden;
}
.sidebarmenu a.subfolderstyle{
background:url(right.gif) no-repeat 97% 50%;/*изображение(стрелочка вправо)*/
}

Изображение присутствует в файле для скачивания. Вы можете поменять изображение на свое или сменить место положение стрелочки, меняя координаты (97% и 50%) , как Вам угодно.

Следующие строки, для того чтобы наше меню работало в пресловутом Internet Explorer.

/* Holly Hack for IE \\*/
* html .sidebarmenu ul li { float: left; height: 1%; }
* html .sidebarmenu ul li a { height: 1%; }
/* End */

Вот и закончили со стилями CSS. Теперь переходим к скриптам JavaScript.

Шаг 3

Создаем файл "script.js" и копируем туда ниже представленный код. Скрипт выводит изображение(стрелочку) и осуществляет корректное отображение меню в IE.

var menuids=["sidebarmenu1"] 
//Enter id(s) of each Side Bar Menu''s main UL, separated by commas
function initsidebarmenu(){
for (var i=0; i<menuids.length; i++){
   var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
     for (var t=0; t<ultags.length; t++){
       ultags[t].parentNode.getElementsByTagName("a")[0].className+=" subfolderstyle"
       if (ultags[t].parentNode.parentNode.id==menuids[i]) //if this is a first level submenu
         ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px" //dynamically position first level submenus to be width of main menu item
       else //else if this is a sub level submenu (ul)
         ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
         ultags[t].parentNode.onmouseover=function(){
         this.getElementsByTagName("ul")[0].style.display="block"
         }
         ultags[t].parentNode.onmouseout=function(){
         this.getElementsByTagName("ul")[0].style.display="none"
         }
       }
  for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars)
    ultags[t].style.visibility="visible"
    ultags[t].style.display="none"
  }
  }
}
if (window.addEventListener)
window.addEventListener("load", initsidebarmenu, false)
else if (window.attachEvent)
window.attachEvent("onload", initsidebarmenu)

Финал

Скопируйте выше приведенный код или скачайте его здесь. Затем вставьте код, представленный ниже, на страницы, где будет меню, между тегами <HEAD> и </HEAD>

<script type="text/javascript" src="/script.js"></script>
<link  rel="StyleSheet" type="text/css" href="/style.css"/>

Обязательно пропишите пути к файлам ''script.js'' и ''style.css'', чтобы они корректно подключились.

Вот и всё. Спасибо!!! за внимание.

( 1 Голос ) 

11 Комментариев