Вертикальное меню на Ucoz. Плавное раздвижение

Вертикальное меню на Ucoz. Плавное раздвижениеСтатья Вертикальное меню на Ucoz получила большую популярность. Поэтому я решила его немного усовершенствовать. Теперь если Вы попробуете нажать на этом сайте на один из пунктов меню, то увидите, как плавно и эффектно он раздвигается. А делается это все чрезвычайно просто.Сначала я выложи простой кусочек кода меню, для тех, кто не читал предыдущие статьи. А затем покажу, что нужно изменить тем, кто использовал код для своего меню из предыдущих статей.Итак, для реализации плавного раздвижения я использовала всего лишь одну функцию jQuery — slideToggle. Так как библиотека JQuery в Ucoz уже прикреплена по умолчанию, то вызывать ее отдельным методом совершенно не нужно. Достаточно использовать примерно такой код:

Code
<script language=»JavaScript»>  
  function hide(obj) {  
   
  $(obj).slideToggle(‘slow’);
  }  
   
  </script>  
   
<div class=»menu2″><a href=»/» > Главная</a></div>  
<div class=»menu2″ ><a onClick=»hide(‘#sub1’)» class=»menu2″>Пункт 1</a> </div>  

<div id=»sub1″ style=»display: none;» >  
<div class=»menu2sub»> <a href=»ссылка на подпункт 1″ class=»menu2sub»> Подпункт 1 </a></div>  
<div class=»menu2sub»> <a href=»ссылка на подпункт 2″ class=»menu2sub»> Подпункт 2 </a></div>  
<div class=»menu2sub»> <a href=»ссылка на подпункт 3″ class=»menu2sub»> Подпункт 3 </a></div>  
  </div>  

<div class=»menu2″ ><a onClick=»hide(‘#sub2’)» class=»menu2″>Пункт 2</a> </div>  

<div id=»sub2″ style=»display: none;» >  
<div class=»menu2sub»> <a href=»ссылка на подпункт 1″ class=»menu2sub»> Подпункт 1 </a></div>  
<div class=»menu2sub»> <a href=»ссылка на подпункт 2″ class=»menu2sub»> Подпункт 2 </a></div>  
<div class=»menu2sub»> <a href=»ссылка на подпункт 3″ class=»menu2sub»> Подпункт 3 </a></div>  
  </div>  

Работает он следующим образом. При нажатии на пункт 1, вызывается функция hide с параметром #sub1.
В результате срабатывает функция $(‘#sub1’).slideToggle(‘slow’)
Эта функция раздвигает или наоборот задвигает все содержимое внутри div с id=»sub1″.

Вот и все. Как видите, все гениальное просто.

А теперь, как и обещала инструкции тем, кто использовал прежнее меню с этого сайта.
Нужно сделать следующие изменения:
1. Code<script language=»JavaScript»>  
  function hide(obj) {  
  if(document.getElementById(obj).style.display == »)
  {document.getElementById(obj).style.display = ‘none’;  
  }
  else
  {document.getElementById(obj).style.display = »;  
  }
  }  
  </script>
заменить на
Code
<script language=»JavaScript»>  
  function hide(obj) {  
   
  $(obj).slideToggle(‘slow’);
  }  
   
  </script>
2. вызов функции вида hide(‘sub1’) заменить на hide(‘#sub1’)
3. span заменить на div. Те. , например, код
Code<span id=»sub1″ style=»display: none; «>  
  ваши подпункты
  </span>
заменить на
Code<div id=»sub1″ style=»display: none; «>  
  ваши подпункты
  </div>

Теперь Ваше меню станет более красивым и профессиональным!

Комментарии на Facebook