Простое сворачивающееся меню на JQuery

16.01.13 16.01.13 6 8987

Простое сворачивающееся меню-аккордеон на JQuery.

Пример использования:

Между <head></head>:

<script src="jquery-1.2.1.min.js" type="text/javascript"></script>
	<script src="menu.js" type="text/javascript"></script>
	<link rel="stylesheet" type="text/css" href="style.css" />
<!--[if lt IE 8]>
   <style type="text/css">
   li a {display:inline-block;}
   li a {display:block;}
   </style>
  <![endif]-->

Между <body></body>:

<h1>Simple JQuery Collapsing menu</h1>
	<ul id="menu">
 <li>
 <a href="#">Weblog Tools</a>
 <ul>
 <li><a href="http://www.pivotx.net/">PivotX</a></li>
 <li><a href="http://www.wordpress.org/">WordPress</a></li>
 <li><a href="http://www.textpattern.com/">Textpattern</a></li>
 <li><a href="http://typosphere.org/">Typo</a></li>
 </ul>
 </li>
 <li>
 <a href="#">Programming Languages</a>
 <ul>
 <li><a href="http://www.php.net/">PHP</a></li>
 <li><a href="http://www.ruby-lang.org/en/">Ruby</a></li>
 <li><a href="http://www.python.org/">Python</a></li>
 <li><a href="http://www.perl.org/">PERL</a></li>
 <li><a href="http://java.sun.com/">Java</a></li>
 <li><a href="http://en.wikipedia.org/wiki/C_Sharp">C#</a></li>
 </ul>
 </li>
 <li><a href="http://www.google.com">Marco's blog (no submenu)</a></li>
 <li>
 <a href="#">Cool Stuff</a>
 <ul>
 <li><a href="http://www.apple.com/">Apple</a></li>
 <li><a href="http://www.nikon.com/">Nikon</a></li>
 <li><a href="http://www.xbox.com/en-US/">XBOX360</a></li>
 <li><a href="http://www.nintendo.com/">Nintendo</a></li>
 </ul>
 </li>
 <li>
 <a href="#">Search Engines</a>
 <ul>
 <li><a href="http://search.yahoo.com/">Yahoo!</a></li>
 <li><a href="http://www.google.com/">Google</a></li>
 <li><a href="http://www.ask.com/">Ask.com</a></li>
 <li><a href="http://www.live.com/?searchonly=true">Live Search</a></li>
 </ul>
 </li>
	</ul>

Смотреть пример

Скачать исходник Размер: 18,11kB | Изменен: 16.01.13 | Загрузок: 322