Верх
Код:
<!-- Стиль меню-шармошки --><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> <!-- Запуск -->