Форма входа
Запомнить меня Забыл пароль ?

Аккордеон меню [RIP]


Аккордеон меню [RIP]
Рип аккордеон меню которое сделано на таких языках как: HTML, CSS и JavaScript.
Меню взято с torrentsfiles.

И так, начнем...

Для начала не забываем подключать библиотеку jQuery.

Теперь о меню:

1. Ставим HTML-код в нужное вам место, где и будет отображаться меню:
[HTML]<div class="block bnavi">
<div class="dtw">
<div class="tit_blo">Меню</div>
</div>
<div class="dcnt">

<ul class="reset catsnavi">

<li class="subbox"><a href="#web-deva.net" class="sublink">Игры для PC</a>
<ul class="reset submenu">
<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>

<ul class="reset catsnavi">

<li class="subbox"><a href="#web-deva.net" class="sublink">Фильмы</a>
<ul class="reset submenu">
<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>
</div>
<div class="dbw"></div>
</div>[/HTML]

2. Теперь после HTML кода меню нужно вставить инициализацию, она нужна для готовности к использованию данного меню:
[JavaScript]<script type="text/javascript">
ddaccordion.init({
headerclass: "sublink",
contentclass: "submenu",
revealtype: "click",
mouseoverdelay: 200,
collapseprev: false,
defaultexpanded: [],
onemustopen: false,
animatedefault: false,
persiststate: false,
toggleclass: ["closed", "opened"],
togglehtml: ["none", "", ""],
animatespeed: "slow",
oninit: function (expandedindices) {},
onopenclose: function (header, index, state, isuseractivated) {}
});
</script> [/JavaScript]

3. Ну и конечно же код CSS:
[CSS].reset, .reset li {
list-style: none;
padding: 0;
margin: 0;
}

.block {
padding-top: 15px;
width: 245px;
}
.block .dtw {
background: url("images/blocktop.png") no-repeat -245px 0;
height: 59px;
}
.block .dbw, .block .dcnt {
background: url("images/blockbg.png") no-repeat;
}
.block .dcnt {
background-position: -1026px 0;
background-repeat: repeat-y;
padding: 0 10px 5px;
}
.block .dbw {
background-position: -1271px 0;
height: 7px;
}
.block .dtw h3 {
line-height: 48px;
padding: 0 30px;
color: #fff;
font-size: 1.1em;
color: #fff;
text-shadow: 0 -1px 0 #3ba615;
}
.bnavi .dtw {
background-position: 0 0;
}
.bnavi .dbw {
background-position: -781px 0;
}
.bnavi .dcnt {
background-position: -536px 0;
}
.bnavi .dtw h3 {
text-shadow: 0 -1px 0 #0ca3d4;
}

.catsnavi {
font-size: 1.1em;
line-height: 20px;
}
.catsnavi > li + li {
margin-top: 2px;
}
.catsnavi > li > a {
color: #fff;
font-weight: bold;
text-shadow: 0 -1px 0 #0a93bf;
text-decoration: none;
display: block;
padding: 5px 10px;
}
.catsnavi > li > a:hover {
text-decoration: underline;
}
.catsnavi > .subbox {
border: 1px solid #67d1ed;
-webkit-border-radius: 6px;
border-radius: 6px;
}
.catsnavi > .subbox > .sublink {
background: url("images/sublink.png") no-repeat 99% -6px;
padding: 7px 10px;
}
.catsnavi > .subbox > .opened {
background-position: 99% -52px;
}
.submenu {
padding: 0 10px 5px;
display: none;
}
.submenu li {
list-style-type: circle;
list-style-position: inside;
color: #97e9f9;
}
.submenu a {
color: #fff;
text-decoration: none;
}
.submenu a:hover {
text-decoration: underline;
}

.block .dtw .tit_blo {
line-height: 48px;
padding: 0 30px;
font-size: 1.1em;
color: #fff;
text-shadow: 0 -1px 0 #3ba615;
font-weight:bold;
}[/CSS]

Рекомендую скачать готовый пример, в архиве присутствует графика и все библиотеки.

Аккордеон меню [RIP] Аккордеон меню [RIP]
Опубликовал: web-deva
Используемый код: HTML CSS JavaScript
Web-сайт автора: http://web-deva.net
Автор: Dark_Delphin
СКАЧАТЬ

Размер файла: 16.0 Kb

ДЕМО

Посмотреть
живой пример

Комменты


Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация ]
Отправить отзыв
Ваше имя *:
E-mail отправителя *:
Тема *:
Текст сообщения *:
Код безопасности *: