Вертикальное выдвижное меню на jQuery/CSS. Не используется ни единая картинка,можно настроить меню под любой дизайн.
1.В <head></head> подключаем скрипт:
Code
<script src="http://www.studioac.ru/uploads/menu-collapsed.js" type="text/javascript"></script>
2.В CSS где угодно вставляем:
Code
ul#menu, ul#menu ul {
list-style-type:none;
margin: 0;
padding: 0;
width: 15em;
}
ul#menu a {
display: block;
text-decoration: none;
}
ul#menu li {
margin-top: 1px;
}
ul#menu li a {
background: #333 /* Фон меню */;
color: #fff;
padding: 0.5em;
}
ul#menu li a:hover {
background: #000 /* Фон при наведении */;
}
ul#menu li ul li a {
background: #ccc /* Фон подменю */;
color: #000;
padding-left: 20px;
}
ul#menu li ul li a:hover {
background: #aaa / Фон подменю при наведении */;
border-left: 5px #000 solid;
padding-left: 15px;
}
3. Там где хотим видеть меню ставим:
<ul id="menu">
Code
<ul id="menu"><li>
<a href="#">Главная</a>
<ul>
<li><a href="#">Ссылка</a></li>
<li><a href="#">Ссылка</a></li>
<li><a href="#">Ссылка</a></li>
<li><a href="#">Ссылка</a></li>
</ul>
</li>
<li>
<a href="#">Файлы</a>
<ul>
<li><a href="#">Ссылка</a></li>
<li><a href="#">Ссылка</a></li>
<li><a href="#">Ссылка</a></li>
<li><a href="#">Ссылка</a></li>
<li><a href="#">Ссылка</a></li>
<li><a href="#">Ссылка</a></li>
</ul>
</li>
</ul>
Ссылки заменяем на свои. Если вы не хотите использовать подменю, используйте структуру:
Code
<li><a href="#">Ссылка</a></li>