Меню аккордеон на jquery.

Меню аккордеон на jquery.

Подключаем Jquery 1.7.1

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Пишем наше меню на HTML

<ul>
<ul>
     <li><a href="#">What's new?</a>
<ul class="active">
<ul class="active">
     <li><a href="#">Weekly specials</a></li>
</ul>
</ul>
&nbsp;</li>
     <li><a href="#">Last night's pics!</a></li>
     <li><a href="#">Users' comments</a></li>
</ul>
</ul>
&nbsp;
<ul>
     <li><a href="#">Member extras</a>
<ul>
<ul>
     <li><a href="#">Premium Celebrities</a></li>
</ul>
</ul>
&nbsp;</li>
     <li><a href="#">24-hour Surveillance</a></li>
</ul>
&nbsp;

&nbsp;
<ul>
     <li><a href="#">About Us</a>
<ul>
<ul>
     <li><a href="#">Privacy Statement</a></li>
</ul>
</ul>
&nbsp;</li>
     <li><a href="#">Terms and Conditions</a></li>
     <li><a href="#">Contact Us</a></li>
</ul>
&nbsp;

&nbsp;

<!-- А вот и сам Jquery код --><script type="text/javascript">// <![CDATA[

$(document).ready(function() {
  $('#menu > li > ul' )
     .hide()
     .click(function(event) {
          event.stopPropagation();
     });
 
     $('#menu > li').toggle(function() {
          $(this).find('ul').slideDown();
 }, function() {
     $(this).find('ul').slideUp();
 });
});
// ]]></script>
СТУДИЯ AD : ДИЗАЙН САЙТОВ UCOZ Очень крутой и полезный ресурс по дизайну, кодингу и мелким штучкам. СТУДИЯ AD : ДИЗАЙН САЙТОВ UCOZ...
Свежие новости веб-дизайна и разработки... Followdesign.com Followdesign предназначен для людей, интересующихся дизайном во всех его проявлениях. Но, в первую очередь, конечно, речь на страниц...
Карусель изображений jquery. fade effect... Html разметка Jquery Код //============слайдер баннеровтоп============ $(".bannerstop > div:gt(0)").hide(); setInterval(...
Простой спойлер на Jquery. Html Показать текст Текст который должен скрываться и раскрываться. Его очень много и он выезжает. Css .opened { color:green...
Читайте также  Работаем с типами записей в WordPress 3.0

Сохрани, чтобы не потерять