Всем привет.
Нужна помощь по скрипту. Решил запилить боковое выезжающее меню, но не могу никак с ним совладать. Скриптик маленький и вроде как простой, поэтому выбор и пал на него, но не тут-то было…
Менюшка заезжает, выезжает как положено, но не устраивает первоначальное состояние этого меню. Получается, когда мы открываем страницу, то меню уже разложено и показано. А нужно, что бы оно было спрятано, и только после нажатия - показывалось.
Вот закинул на хост, чтобы воочию видели: http://valcor[dot]tk/menu/
Это код:
CODE ( javascript):
скопировать код в буфер обмена
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Панель</title> <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script> <script type="text/javascript"> $(document).ready(function() { $("a#controlbtn").click(function(e) { e.preventDefault(); var slidepx=$("div#linkblock").width() + 10; if ( !$("div#maincontent").is(':animated') ) { if (parseInt($("div#maincontent").css('marginLeft'), 10) < slidepx) { $(this).removeClass('close').html('≡'); margin = "+=" + slidepx; } else { $(this).addClass('close').html('≡'); margin = "-=" + slidepx; } $("div#maincontent").animate({ marginLeft: margin, }, 300); } }); }); </script> </head> <body> <div style="position: relative; height: 50px;"></div> <div id="maincontent"> <div id="linkblock"> <h4>All tags</h4> <ul id="yourlist"> <li> <a href="http://domen.net" title="CSS & XHTML"> CSS & XHTML</a> </li> <li> <a href="http://domen.com" title="Resources"> PHP</a> </li> <li> <a href="http://domen.ru" title="Resources"> Resources</a> </li> <li> <a href="http://domen.ua" title="Themes & Layouts"> Themes & Layouts</a> </li> </ul> </div> <div id="text"> <div id="show"><a id="controlbtn" class="open" href="http://domen.com" title="Show Menu">≡</a></div> <br><br> Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi ... </div> </div> </body> </html>
Если не в тягость, пожалуйста, подправьте скрипт!
|