Многоуровневое выпадающее меню

Всего пару строк на js позволят создать многоуровневое выпадающее меню для вашего сайта.

HTML

Шапка будет состоять из главного списка, представляющего из себя меню. Части которого будут содержать вложенные ul списки.

  <header>
    <div class="container">
      <ul class="menu">
        <li class="main">Категория 1
          <ul>
            <li><a href="#">Подкатегория 1</a></li>
            <li>Подкатегория 2
              <ul>
                <li><a href="#">Подкатегория 1</a></li>
                <li>Подкатегория 2
                  <ul>
                    <li><a href="#">Подкатегория 1</a></li>
                    <li><a href="#">Подкатегория 2</a></li>
                    <li><a href="">Подкатегория 3</a></li>
                  </ul>
                </li>
                <li><a href="">Подкатегория 3</a></li>
              </ul>
            </li>
            <li><a href="">Подкатегория 3</a></li>
          </ul>
        </li>
        <li class="main"><a href="#">Категория 2</a></li>
        <li class="main"><a href="#">Категория 3</a></li>
        <li class="main"><a href="#">Категория 4</a></li>
      </ul>
    </div>
  </header>

<li class="main">Категория 1

<ul>

<li><a href="#">Подкатегория 1</a></li>

<li>Подкатегория 2

<ul>

<li><a href="#">Подкатегория 1</a></li>

<li>Подкатегория 2

<ul>

<li><a href="#">Подкатегория 1</a></li>

<li><a href="#">Подкатегория 2</a></li>

<li><a href="">Подкатегория 3</a></li>

</ul>

</li>

<li><a href="">Подкатегория 3</a></li>

</ul>

</li>

<li><a href="">Подкатегория 3</a></li>

</ul>

</li>

<li class="main"><a href="#">Категория 2</a></li>

<li class="main"><a href="#">Категория 3</a></li>

<li class="main"><a href="#">Категория 4</a></li>

</ul>

</div>

</header>

CSS

В CSS стилизуем шапку, главное меню и позиционируем вложенные списки при помощи position: absolute, не забыв назначить родительскому блоку position: relative (это позволит указывать положение top, left и т.д. относительно этого блока).

.container {
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 10px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box; }

header {
  background-color: #333; }
  header .menu {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    height: 48px; }
    header .menu .main {
      list-style-type: none;
      color: #fff;
      position: relative;
      padding: 0 20px;
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -webkit-align-items: center;
          -ms-flex-align: center;
              align-items: center;
      cursor: default; }
      header .menu .main a {
        color: #fff; }
      header .menu .main:hover {
        background-color: #444; }
      header .menu .main ul {
        display: none;
        background-color: #333;
        position: absolute;
        left: 0;
        top: 100%;
        width: 210px; }
        header .menu .main ul li {
          padding: 6px 10px;
          list-style-type: none;
          position: relative; }
          header .menu .main ul li:hover {
            background-color: #444; }
          header .menu .main ul li ul {
            display: none;
            position: absolute;
            top: 0;
            left: 100%; }

.container {

max-width: 1170px;

margin: 0 auto;

padding: 0 10px;

-webkit-box-sizing: border-box;

box-sizing: border-box; }

header {

background-color: #333; }

header .menu {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-align: stretch;

-webkit-align-items: stretch;

-ms-flex-align: stretch;

align-items: stretch;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

height: 48px; }

header .menu .main {

list-style-type: none;

color: #fff;

position: relative;

padding: 0 20px;

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

cursor: default; }

header .menu .main a {

color: #fff; }

header .menu .main:hover {

background-color: #444; }

header .menu .main ul {

display: none;

background-color: #333;

position: absolute;

left: 0;

top: 100%;

width: 210px; }

header .menu .main ul li {

padding: 6px 10px;

list-style-type: none;

position: relative; }

header .menu .main ul li:hover {

background-color: #444; }

header .menu .main ul li ul {

display: none;

position: absolute;

top: 0;

left: 100%; }

Воспользуемся методами mouseover (мышь навелась на что-либо) и mouseout(мышь ушла). При наведении, с помощью метода find() , будем искать ближайший соседний список ‘ul’. Если такой есть, то ему присваивается свойство display: block. Когда мышь «уходит» с блока, то прячем этот список — display: none.

$('.menu li').mouseover(function(){
    $(this).find('ul').first().css('display', 'block');
});

$('.menu li').mouseout(function(){
    $(this).find('ul').first().css('display', 'none');
});

$('.menu li').mouseover(function(){

$(this).find('ul').first().css('display', 'block');

});

$('.menu li').mouseout(function(){

$(this).find('ul').first().css('display', 'none');

});

See the Pen Многоуровневое меню by webgrind (@webgrind) on CodePen.

Возможно, вам будет интересно:

Плавная анимация фона css

13.02.2018

Как верстать pixel perfect без плагинов

24.11.2018