Верх
Код:
<!-- Стиль меню-шармошки --><style>
#nav_menu_content * {
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
padding: 0!important;
}
#nav_menu_content {
list-style: none;
display:inline:block;
width:250px;
height: 330px;
border: 1px solid transparent!important;
}
#nav_menu_content li {
list-style: none;
margin: 3px 0 3px;
background-color: #E0EDED;
font-size:120%;
border: 1px solid transparent!important;
}
#nav_menu_content li .cat_link {
display: block;
height: 30px;
line-height: 28px;
width: 99%;
border: 1px solid green;
text-decoration: none;
}
#nav_menu_content li ul {
list-style-position: outside;
text-align:left;
list-style: none;
display: none;
border: 1px solid green;
height: 210px;
width: 99%;
margin-top: 3px;
}
#nav_menu_content a:hover, #nav_menu_content a:active, #nav_menu_content a:visited {
text-decoration: none;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
</style>
<!-- END Стиль меню-шармошки -->
<!-- Скрипт меню гармошки -->
<script type="text/javascript">
$.fn.tree_menu = function() {
var nav = this;
var uls = nav.find("ul");
var ulsL = uls.length-1;
nav.find("a").click(function() {
var Lnk=$(this).attr("href");
var self = $(this).next();
if ( self.length == 0 ) return;
uls.each(function( index ){
if ( this === self[0] ) {
if ( self.css('display') == "none" ) {
$(this).prev('a').addClass('active');
} else {
$(this).prev('a').removeClass('active');$(this).slideUp(400);
uls.eq(index-1).prev('a').click();return false;
}
$( this ).slideDown(400);return true;
}
if ( jQuery.inArray( this, self.parents( "ul" ) ) == -1 ) {
$(this).prev('a').removeClass('active');
$(this).slideUp(400);return true;
}
});
return false;
});
}
</script>
<!-- END Скрипт меню гармошки -->В объявление
Код:
<table cellspacing="0" cellpadding="0" border="0" style="height: 335px;">
<tr>
<td align="center" valign="top">
<ul id="nav_menu_content">
<li><a href="#0" class="cat_link">Категория 1</a>
<ul style="display:block">Тут содержимое первой категории</ul>
</li>
<li><a href="#0" class="cat_link">Категория 2</a>
<ul>Тут содержимое второй категории</ul>
</li>
<li><a href="#0" class="cat_link">Категория 3</a>
<ul>Тут содержимое третьей категории</ul>
</li>
</ul>
</td>
</tr>
</table><script>$('#nav_menu_content').tree_menu();</script> <!-- Запуск -->