- У нас Вы можете бесплатно скачать sitebar с menu accordion
- Прежде, чем скачивать и устанавливать sitebar с menu accordion, ознакомьтесь с комментариями.
- Администрация uCoz-Net.Ru не несет ответственности за содержимое sitebar с menu accordion.
3


[url=http://bestoloch.ucoz.com/]DEMO[/url]
Ширина сайтбара с меню 200px
Установка:
1)Качаем архив (в архиве содержатся: картинки сайтбара и меню +PSD)
2)Папку sidebar_menu кидаем в корень сайта
3)Файл ddaccordion.js кидаем в папку js
4)Этот код ставим в css
.bnavi .dcont { width: 196px; }
.bnavi ul, .bnavi ul li { display: inline; }
.bnavi ul b a, .bnavi ul b span { background: url(/sidebar_menu/sprite_menu.png) no-repeat 2px 0px; text-indent: 8px; display: block; height: 40px; line-height: 40px; margin-bottom: 1px; text-decoration: none; color: #393939; cursor: pointer; }
.bnavi ul b a:hover, .bnavi ul b span:hover, .bnavi ul b a.active { background-position: 2px -40px; color: #2681a3; }
.bnavi ul b a.active { background-position: 2px 0; }
.bnavi ul b span.closed { background-position: 2px 0px; }
.bnavi ul b span.closed:hover { background-position: 2px -40px; }
.bnavi ul b span.opened { background-position: 2px 0px; margin: 0; }
.bnavi .submenu, .bnavi .submenu div { overflow: hidden; width: 196px; }
.bnavi .submenu { margin-bottom: 1px; background: #fff url(/sidebar_menu/fon_menu.png) no-repeat 0 100%; }
.bnavi .submenu div { background: url(/sidebar_menu/fon_menu.png) no-repeat 0 0px; }
.bnavi .submenu ul { display: block; margin-left: 0px; padding: 0px 0; width: 196px; }
.bnavi .submenu a { color: #2b7fa1; text-decoration: none; display: block; height: 19px; line-height: 18px; text-indent: 17px; }
.bnavi ul, .bnavi ul li { display: inline; }
.bnavi ul b a, .bnavi ul b span { background: url(/sidebar_menu/sprite_menu.png) no-repeat 2px 0px; text-indent: 8px; display: block; height: 40px; line-height: 40px; margin-bottom: 1px; text-decoration: none; color: #393939; cursor: pointer; }
.bnavi ul b a:hover, .bnavi ul b span:hover, .bnavi ul b a.active { background-position: 2px -40px; color: #2681a3; }
.bnavi ul b a.active { background-position: 2px 0; }
.bnavi ul b span.closed { background-position: 2px 0px; }
.bnavi ul b span.closed:hover { background-position: 2px -40px; }
.bnavi ul b span.opened { background-position: 2px 0px; margin: 0; }
.bnavi .submenu, .bnavi .submenu div { overflow: hidden; width: 196px; }
.bnavi .submenu { margin-bottom: 1px; background: #fff url(/sidebar_menu/fon_menu.png) no-repeat 0 100%; }
.bnavi .submenu div { background: url(/sidebar_menu/fon_menu.png) no-repeat 0 0px; }
.bnavi .submenu ul { display: block; margin-left: 0px; padding: 0px 0; width: 196px; }
.bnavi .submenu a { color: #2b7fa1; text-decoration: none; display: block; height: 19px; line-height: 18px; text-indent: 17px; }
5)Этот код ставим в глобальный блок
<!-- <blockmenu> -->
<table cellpadding="0" cellspacing="0" width="200">
<tr>
<td background="/sidebar_menu/V.png" height="43"><center><b><!-- <bt> --><!--<s5184>-->Демо меню сайта<!--</s>--><!-- </bt> --></b></center></td>
</tr>
<tr>
<td background="/sidebar_menu/C.png" align="center">
<!-- <bc> -->
<div class="block_blue bnavi">
<ul class="reset">
<li><b><a href="/">Главная</a></b></li>
<li><b><span headerindex="0h" class="sublink closed">РАЗДЕЛ</span></b>
<div style="display: none;" contentindex="0c" class="submenu"><div>
<ul class="reset" align="left">
<li><a href="/">-КАТЕГОРИЯ</a></li>
<li><a href="/">-КАТЕГОРИЯ</a></li>
<li><a href="/">-КАТЕГОРИЯ</a></li>
<li><a href="/">-КАТЕГОРИЯ</a></li>
</ul>
</div></div>
</li><li><b><span headerindex="1h" class="sublink closed">РАЗДЕЛ</span></b>
<div style="display: none;" contentindex="1c" class="submenu"><div>
<ul class="reset" align="left">
<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>
</div></div>
</li>
<li><b><span headerindex="2h" class="sublink closed">РАЗДЕЛ</span></b>
<div style="display: none;" contentindex="2c" class="submenu"><div>
<ul class="reset" align="left">
<li><a href="/">-КАТЕГОРИЯ</a></li>
<li><a href="/">-КАТЕГОРИЯ</a></li>
<li><a href="/">-КАТЕГОРИЯ</a></li>
<li><a href="/">-КАТЕГОРИЯ</a></li>
</ul>
</div></div>
</li>
<li><b><span headerindex="3h" class="sublink closed">РАЗДЕЛ</span></b>
<div style="display: none;" contentindex="3c" class="submenu"><div>
<ul class="reset" align="left">
<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>
</div></div></li><!-- </bc> -->
<!-- </bc> -->
</td>
</tr>
<tr>
<td background="/sidebar_menu/N.png" height="23"></td>
</tr>
</table>
<br>
<br>
<!-- </blockmenu> -->
<table cellpadding="0" cellspacing="0" width="200">
<tr>
<td background="/sidebar_menu/V.png" height="43"><center><b><!-- <bt> --><!--<s5184>-->Демо меню сайта<!--</s>--><!-- </bt> --></b></center></td>
</tr>
<tr>
<td background="/sidebar_menu/C.png" align="center">
<!-- <bc> -->
<div class="block_blue bnavi">
<ul class="reset">
<li><b><a href="/">Главная</a></b></li>
<li><b><span headerindex="0h" class="sublink closed">РАЗДЕЛ</span></b>
<div style="display: none;" contentindex="0c" class="submenu"><div>
<ul class="reset" align="left">
<li><a href="/">-КАТЕГОРИЯ</a></li>
<li><a href="/">-КАТЕГОРИЯ</a></li>
<li><a href="/">-КАТЕГОРИЯ</a></li>
<li><a href="/">-КАТЕГОРИЯ</a></li>
</ul>
</div></div>
</li><li><b><span headerindex="1h" class="sublink closed">РАЗДЕЛ</span></b>
<div style="display: none;" contentindex="1c" class="submenu"><div>
<ul class="reset" align="left">
<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>
</div></div>
</li>
<li><b><span headerindex="2h" class="sublink closed">РАЗДЕЛ</span></b>
<div style="display: none;" contentindex="2c" class="submenu"><div>
<ul class="reset" align="left">
<li><a href="/">-КАТЕГОРИЯ</a></li>
<li><a href="/">-КАТЕГОРИЯ</a></li>
<li><a href="/">-КАТЕГОРИЯ</a></li>
<li><a href="/">-КАТЕГОРИЯ</a></li>
</ul>
</div></div>
</li>
<li><b><span headerindex="3h" class="sublink closed">РАЗДЕЛ</span></b>
<div style="display: none;" contentindex="3c" class="submenu"><div>
<ul class="reset" align="left">
<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>
</div></div></li><!-- </bc> -->
<!-- </bc> -->
</td>
</tr>
<tr>
<td background="/sidebar_menu/N.png" height="23"></td>
</tr>
</table>
<br>
<br>
<!-- </blockmenu> -->
6)Этот код ставим перед на страницах где будет меню или в верхнюю часть сайта
<script type="text/javascript" src="/js/ddaccordion.js"></script>
<script type="text/javascript">
ddaccordion.init({
headerclass: "sublink",
contentclass: "submenu",
revealtype: "click",
mouseoverdelay: 50,
collapseprev: false,
defaultexpanded: [],
onemustopen: false,
animatedefault: false,
persiststate: false,
toggleclass: ["closed", "opened"],
togglehtml: ["none", "", ""],
animatespeed: "fast",
oninit:function(expandedindices){ //custom code to run when headers have initalized
//do nothing
},
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
//do nothing
}
})
</script>
<style type="text/css">
.submenu{display: none}
</style>
<script type="text/javascript">
ddaccordion.init({
headerclass: "sublink",
contentclass: "submenu",
revealtype: "click",
mouseoverdelay: 50,
collapseprev: false,
defaultexpanded: [],
onemustopen: false,
animatedefault: false,
persiststate: false,
toggleclass: ["closed", "opened"],
togglehtml: ["none", "", ""],
animatespeed: "fast",
oninit:function(expandedindices){ //custom code to run when headers have initalized
//do nothing
},
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
//do nothing
}
})
</script>
<style type="text/css">
.submenu{display: none}
</style>
Источник: k_84


Поделиться
Опрос
Друзья
Статистика
Апдейты
Последний