ФОРУМ PS-Studio.Info

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




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

Код

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Montserrat''>
<link rel="stylesheet" href="css/style.css">


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

Код

<ul class="accordion-menu">
  <li>
    <div class="dropdownlink"><i class="fa fa-road" aria-hidden="true"></i> History
      <i class="fa fa-chevron-down" aria-hidden="true"></i>
    </div>
    <ul class="submenuItems">
      <li><a href="#">History book 1</a></li>
      <li><a href="#">History book 2</a></li>
      <li><a href="#">History book 3</a></li>
    </ul>
  </li>
  <li>
    <div class="dropdownlink"><i class="fa fa-paper-plane" aria-hidden="true"></i> Fiction
      <i class="fa fa-chevron-down" aria-hidden="true"></i>
    </div>
    <ul class="submenuItems">
      <li><a href="#">Fiction book 1</a></li>
      <li><a href="#">Fiction book 2</a></li>
      <li><a href="#">Fiction book 3</a></li>
    </ul>
  </li>
  <li>
    <div class="dropdownlink"><i class="fa fa-quote-left" aria-hidden="true"></i> Fantasy
      <i class="fa fa-chevron-down" aria-hidden="true"></i>
    </div>
    <ul class="submenuItems">
      <li><a href="#">Fantasy book 1</a></li>
      <li><a href="#">Fantasy book 2</a></li>
      <li><a href="#">Fantasy book 3</a></li>
    </ul>
  </li>
  <li>
    <div class="dropdownlink"><i class="fa fa-motorcycle" aria-hidden="true"></i> Action
      <i class="fa fa-chevron-down" aria-hidden="true"></i>
    </div>
    <ul class="submenuItems">
      <li><a href="#">Action book 1</a></li>
      <li><a href="#">Action book 2</a></li>
      <li><a href="#">Action book 3</a></li>
    </ul>
  </li>
</ul>


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

Код

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

Хостинг от uCoz