ФОРУМ PS-Studio.Info

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




В шапку страницы сайта:

Код

<link href='//fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">


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

Код

<ul id="accordion" class="accordion">
  <li>
   <div class="link"><i class="fa fa-paint-brush"></i>Первый пункт меню<i class="fa fa-chevron-down"></i></div>
   <ul class="submenu">
    <li><a href="#">Подпункт 1</a></li>
    <li><a href="#">Подпункт 2</a></li>
    <li><a href="#">Подпункт 3</a></li>
    <li><a href="#">Подпункт 4</a></li>
   </ul>
  </li>
  <li class="default open">
   <div class="link"><i class="fa fa-code"></i>Второй пункт меню<i class="fa fa-chevron-down"></i></div>
   <ul class="submenu">
    <li><a href="#">Подпункт 1</a></li>
    <li><a href="#">Подпункт 2</a></li>
    <li><a href="#">Подпункт 3</a></li>
   </ul>
  </li>
  <li>
   <div class="link"><i class="fa fa-mobile"></i>Третий пункт меню<i class="fa fa-chevron-down"></i></div>
   <ul class="submenu">
    <li><a href="#">Подпункт 1</a></li>
    <li><a href="#">Подпункт 2</a></li>
    <li><a href="#">Подпункт 3</a></li>
    <li><a href="#">Подпункт 4</a></li>
   </ul>
  </li>
  <li><div class="link"><i class="fa fa-globe"></i>Четвертый пункт меню<i class="fa fa-chevron-down"></i></div>
   <ul class="submenu">
    <li><a href="#">Подпункт 1</a></li>
    <li><a href="#">Подпункт 2</a></li>
    <li><a href="#">Подпункт 3</a></li>
    <li><a href="#">Подпункт 4</a></li>
   </ul>
  </li>
    </ul>


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

Код

<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="js/index.js"></script>
Прикрепления: 7931315.png(77.5 Kb)
профиль www Вверх
Форум » Общий форум: Веб-дизайн » Готовые решения » Меню навигации » Меню аккордион на CSS и jQuery - вариант 2 (Вертикальное меню аккордион)
  • Страница 1 из 1
  • 1
Поиск: