ФОРУМ PS-Studio.Info

  • Страница 1 из 1
  • 1
Форум » Общий форум: Веб-дизайн » Готовые решения » Меню навигации » Многоуровневое выпадающее меню аккордион (Вертикальное меню аккордион с несколькими уровнями вложения)
Многоуровневое выпадающее меню аккордион
Дата: Сб, 19.05.2018, 12:07 Сообщение # 1
ps-studio
Администраторы




В шапку сайта подключаем:

Код

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="/css/style.css">


HTML-код структуры меню:

Код

<div id="accordian">
   <ul>
    <li>
     <h3><a href="#"><span class="icon-dashboard"></span>Первый пункт меню</a></h3>
     <ul>
      <li><a href="#">Пункт подменю</a></li>
      <li><a href="#">Пункт подменю</a></li>
      <li><a href="#">Пункт подменю</a></li>
      <li><a href="#">Пункт подменю</a></li>
     </ul>
    </li>
    <li class="active">
     <h3><a href="#"><span class="icon-tasks"></span>Второй пункт меню</a></h3>
     <ul>
      <li><a href="#">Пункт подменю</a></li>
      <li class="active">
       <a href="#">Пункт подменю</a>
       <ul>
        <li><a href="#">Пункт подменю 2-го уровня</a></li>
        <li><a href="#">Пункт подменю 2-го уровня</a></li>
        <li>
         <a href="#">Пункт подменю 2-го уровня</a>
         <ul>
                              <li><a href="#">Пункт подменю 3-го уровня</a></li>
                              <li><a href="#">Пункт подменю 3-го уровня</a></li>
                              <li><a href="#">Пункт подменю 3-го уровня</a></li>
                              <li><a href="#">Пункт подменю 3-го уровня</a></li>
                              <li><a href="#">Пункт подменю 3-го уровня</a></li>
         </ul>
        </li>
        <li><a href="#">Пункт подменю 2-го уровня</a></li>
        <li><a href="#">Пункт подменю 2-го уровня</a></li>
       </ul>
      </li>
      <li>
       <a href="#">Пункт подменю</a>
       <ul>
        <li><a href="#">Пункт подменю 2-го уровня</a></li>
        <li><a href="#">Пункт подменю 2-го уровня</a></li>
        <li><a href="#">Пункт подменю 2-го уровня</a></li>
        <li><a href="#">Пункт подменю 2-го уровня</a></li>
        <li><a href="#">Пункт подменю 2-го уровня</a></li>
       </ul>
      </li>
      <li><a href="#">Пункт подменю</a></li>
      <li><a href="#">Пункт подменю</a></li>
     </ul>
    </li>
    <li>
     <h3><a href="#"><span class="icon-calendar"></span>Третий пункт меню</a></h3>
     <ul>
      <li><a href="#">Пункт подменю</a></li>
      <li><a href="#">Пункт подменю</a></li>
      <li><a href="#">Пункт подменю</a></li>
      <li><a href="#">Пункт подменю</a></li>
      <li><a href="#">Пункт подменю</a></li>
      <li><a href="#">Пункт подменю</a></li>
      <li><a href="#">Пункт подменю</a></li>
      <li><a href="#">Пункт подменю</a></li>
      <li><a href="#">Пункт подменю</a></li>
     </ul>
    </li>
    <li>
     <h3><a href="#"><span class="icon-heart"></span>Четвертый пункт меню</a></h3>
     <ul>
      <li><a href="#">Пункт подменю</a></li>
      <li><a href="#">Пункт подменю</a></li>
      <li><a href="#">Пункт подменю</a></li>
      <li><a href="#">Пункт подменю</a></li>
     </ul>
    </li>
   </ul>
  </div>


В самом низу кода страницы подключаем скрипты:

Код

<script src="http://ps-studio.info/demoforum/accmenu3/js/prefixfree-1.0.7.js" type="text/javascript" type="text/javascript"></script>
  <script src="http://ps-studio.info/demoforum/accmenu3/js/jquery-1.7.1.min.js" type="text/javascript"></script>
  <script>
   $(document).ready(function(){
    $("#accordian a").click(function(){
     var link = $(this);
     var closest_ul = link.closest("ul");
     var parallel_active_links = closest_ul.find(".active")
     var closest_li = link.closest("li");
     var link_status = closest_li.hasClass("active");
     var count = 0;

     closest_ul.find("ul").slideUp(function(){
      if(++count == closest_ul.find("ul").length)
       parallel_active_links.removeClass("active");
     });

     if(!link_status)
     {
      closest_li.children("ul").slideDown();
      closest_li.addClass("active");
     }
    })
   })
  </script>
Прикрепления: 2008667.png(35.7 Kb)
профиль www Вверх
Форум » Общий форум: Веб-дизайн » Готовые решения » Меню навигации » Многоуровневое выпадающее меню аккордион (Вертикальное меню аккордион с несколькими уровнями вложения)
  • Страница 1 из 1
  • 1
Поиск: