Главная » Файлы » Прочие скрипты » jQuery

Ещё одно раздвижное аккордеон меню для светлых дизайнов на jQuery
23.06.14, 09:10:41

Скачать файл




Ещё одно раздвижное меню с подпунктами, открывающимися как при клике, так и при наведении. На этот раз предпочтительно устанавливать на светлый дизайн, хотя, если у вас есть навыки в css и photoshop - вы легко переделаете данный плагин под любой дизайн

Для начала посмотрите ДЕМО

Установка:

После /head на страницах, где будет отображаться данное меню, вставляйте:
Код
<style>  
  /* Styles for Example #2 */  
  #example2{  
  margin:0;  
  padding:0;  
  width:300px;  
  list-style-type:none;  
  background-color:#FFFFFF;  
  color:#000000;  
  line-height:120%;  
  height:300px;  
  }  
  #example2 a{  
  display:block;  
  font-weight:normal;  
  text-decoration:none;  
  }  
  #example2 ul{  
  overflow: hidden;  
  margin:0;  
  padding:0;  
  }  
  #example2 li{  
  margin:0;  
  padding:0;  
  list-style-type:none;  
  }  
  #example2 li a{  
  width:285px;  
  padding:5px 0 0 15px;  
  display:block;  
  color:#000000;  
  background-image:url(/images/ha-header.jpg);  
  height:25px;  
  }  
  #example2 li a.closed{  
  color:#000000 !important;  
  background-image:url(/images/ha-header.jpg) !important;  
  }  
  #example2 li.firstitem a.closed{  
  color:#000000 !important;  
  background-image:url(/images/ha-header-first.jpg) !important;  
  }  
  #example2 li.lastitem a.closed{  
  color:#000000 !important;  
  background-image:url(/images/ha-header-last.jpg) !important;  
  }  
  #example2 li li{  
  border-left:1px solid #E5E5E5;  
  border-right:1px solid #E5E5E5;  
  padding:0 15px 0 15px;  
  height:175px;  
  }  
  #example2 li a.opened{  
  background-image:url(/images/ha-header-active.jpg);  
  color:#FFFFFF;  
  }  
  #example2 li.firstitem a.opened{  
  background-image:url(/images/ha-header-first-active.jpg);  
  color:#FFFFFF;  
  }  
  #example2 li.lastitem li{  
  margin-bottom:-4px;  
  }  
  #example2 li.lastitem ul{  
  background-image:url(/images/ha-footer.jpg);  
  background-repeat:no-repeat;  
  background-position:bottom;  
  padding-bottom:4px;  
  }  
  </style>  
  <script type="text/javascript" src="/js/jquery.hoveraccordion.min.js"></script>
  <script type="text/javascript">
  $(document).ready(function(){  
// Setup HoverAccordion for Example 2 with some custom options  
$('#example2').hoverAccordion({  
activateitem: '1',  
speed: 'fast'  
});  
$('#example2').children('li:first').addClass('firstitem');  
$('#example2').children('li:last').addClass('lastitem');  
  });  
  </script>


Следующий код вставляйте в то место, где будет само меню:
Код
<ul id="example2">
<li><a href="#">Item 1</a>
<ul>

<li>Content #1 - Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam  
erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing  
elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna  
aliquyam erat, sed diam voluptua.</li>
</ul>
</li>
<li><a href="#">Item 2</a>
<ul>
<li>Content #2 - At vero eos et accusam et justo duo dolores et ea rebum.  
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum  
dolor sit amet. At vero eos et accusam et justo duo dolores et ea rebum.  
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum  
dolor sit amet.</li>
</ul>

</li>
<li><a href="#">Item 3</a>
<ul>
<li>Content #3 - Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</li>
</ul>
</li>
<li><a href="#">Item 4</a>

<ul>
<li>Content #4 - Vet clita kasd gubergren, no sea takimata sanctus est  
Lorem ipsum dolor sit amet. At vero eos et accusam et justo duo dolores  
et ea rebum. Vet clita kasd gubergren, no sea takimata sanctus est  
Lorem ipsum dolor sit amet. At vero eos et accusam et justo duo dolores  
et ea rebum.</li>
</ul>
</li>
</ul>


Далее залейте скрипт из прикреплённого архива в папку js и все картинки в папку images

Материал подготовлен Apocalypse
Категория: jQuery | Добавил: Apocalypse | Теги: одно, Ещё, аккордеон, на, JQuery, светлых, для, Меню, дизайнов, раздвижное
Просмотров: 282 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: