Вертикальное раздвижное меню на jQuery (гармошка, аккордеон)

Віталий

10 років ago

Доброго времени суток. 🙂

Практически у всех на сайтах есть меню. За частую, оно либо вертикальное либо горизонтальное. Если у Вас вертикальное меню и в нем немного пунктов, то их можно расположить друг по другом и все будет красиво и аккуратно. Но иногда бывает так, что на сайте очень много таких пунктов надо вместить в меню. это может быть сайт каталог или просто очень информативный и его владелец все красиво разложил по полочкам и все это вывел в меню.

Если все такие пункты разместить друг под другом, то возможно меню станет таким большим, что его высота, превысит высоту основного контента. Со стороны это будет не очень красиво, к тому же в таком сплошном списке тяжело что-то найти. Чтобы все сгруппировать и уменьшить, нужно сделать такую вещь как раздвижное меню.

Принцип раздвижного меню в том, что пункты меню разбиваются на группы, и эти группы скрываются, видно только название группы. При нажатии на название, выезжает список из определенного количества пунктов.

Как сделать раздвижное меню? В этом нам поможет - jQuery. С помощью него, все будет работать плавно и красиво, как в примере выше. Приступим к реализации раздвижного меню и выполним несколько пунктов.

jQuery скрипт

Как и обычно, при работе с jQuery, нужно подключить его библиотеку. Все как обычно, в шапке или подвале осуществляем подключение, если конечно, Вы этого не делали раньше, для других скриптов.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

После библиотеки добавляем скрипт. который будет совершать анимацию.Скриптов будет 3, каждый из них по разному совершает анимацию.

<script type="text/javascript">
$(document).ready(function() {
$("#menu ul").hide();
$("#menu li span").click(function() {
    $("#menu ul:visible").slideUp("normal");
    if (($(this).next().is("ul")) && (!$(this).next().is(":visible"))) {
        $(this).next().slideDown("normal");
    }
});
});
</script>

Данный скрипт работает так, что при нажатии на название категории выдвигается список, но при нажатии на другую категорию, она начинает раскрываться, в то время как первая закрывается. То есть открыта всегда только одна категория. Если Вам нужно, чтобы открытые категории не закрывались автоматически, то замените скрипт на новый, указанный ниже.

<script type="text/javascript">
$(document).ready(function() {
 $("#menu ul").hide();
 $("#menu li span").click(function() { $(this).next().slideToggle("normal"); });
});
</script>

Есть еще один скрипт, на который Вы можете заменить основной. Его фишка в том, что выдвижение меню при наведении происходит. Не нужно щелкать мышью, просто наведите курсор на название категории и все. Так что Выбирайте какой именно скрипт, более всего подходит Вам.

<script type="text/javascript">
$(document).ready(function() {
$("#menu ul").hide();
$("#menu li").hover(function() { $(this).children("ul").slideToggle("normal"); });
});
</script>

HTML разметка

Теперь, в нужном месте на Вашем сайте, нужно вывести HTML-разметки. Ну или немного переделать свою, чтобы она стала похожей как в примере.

<ul id="menu">
 <li><span>Пункт меню 1</span>
    <ul>
     <li><a href="">подпункт 1</a></li>
     <li><a href="">подпункт 2</a></li>
     <li><a href="">подпункт 3</a></li>
     <li><a href="">подпункт 4</a></li>
     <li><a href="">подпункт 5</a></li>
    </ul>
 </li>
 <li><span>Пункт меню 2</span>
    <ul>
        <li><a href="">подпункт 1</a></li>
        <li><a href="">подпункт 2</a></li>
        <li><a href="">подпункт 3</a></li>
        <li><a href="">подпункт 4</a></li>
        <li><a href="">подпункт 5</a></li>
    </ul>
 </li>
  <li><span>Пункт меню 3</span>
    <ul>
        <li><a href="">подпункт 1</a></li>
        <li><a href="">подпункт 2</a></li>
        <li><a href="">подпункт 3</a></li>
    </ul>
 </li>
</ul>

Сложного ничего нет, все организовано с помощью - ul-списков.

CSS стили

Ну и напоследок, чтобы задать корректный вид нашему меню, надо прописать стили. Если Вы не впервые работаете с CSS, то сможете с легкостью настроить стили под себя.

ul#menu, ul#menu ul{
  list-style:none;
  margin: 0px;
  padding: 0px;
  width: 250px;
  -webkit-box-shadow:0px 0px 5px 0px rgba(50, 50, 50, 0.2);
  -moz-box-shadow:0px 0px 5px 0px rgba(50, 50, 50, 0.2);
  box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.2);}
ul#menu a,ul#menu span{display: block; text-decoration: none;}
ul#menu li {margin-top: 1px;}
ul#menu li a,ul#menu li span{
  background: #1ba600;
  color: #fff;
  padding: 7px;}
ul#menu li a:hover,ul#menu li span:hover{background: #333;}
ul#menu li ul li a{
  background: #eee;
  color: #000;
  padding-left: 20px;}
ul#menu li ul li a:hover{background: #ddd;}

Больше ничего не нужно. Данный способ не очень сложный и имеет несколько видов реализации, все зависит от выбранного Вами скрипта.

На этом все, спасибо за внимание. 🙂

Exit mobile version