Многоуровневое вертикальное меню

323
11 декабря 2017, 16:58

Всем привет! У меня появилась задача сделать вертикальное многоуровневое меню (для мобильной версии сайта). Возникла проблема с отображением стрелок, чтобы распахнуть некоторые пункты. Хочется сделать эти стрелки на чистом css и чтобы при клике на них открывалось меню. Некоторые пункты меню нельзя распахнуть. По всем пунктам меню можно кликнуть и пользователь перейдет по ссылке (именно поэтому решено было сделать именно стрелку, чтобы распахнуть меню). Стрелки думаю сделать с помощью псевдоэлемента :after.

Интересуют 2 нюанса:

  1. Как обработать клик на этот самый псевдоэлемент.
  2. Как заставить псевдоэлемент поменять свой вид (например, с плюса на минус - распахнуть, скрыть).

Меню генерируется автоматически и я могу только прикрутить к нему только css и js.

На входе я получаю:

<ul>
  <li>Пункт 1</li>
  <li>Пункт 2</li>
  <li>Пункт 3</li>
</ul>

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

На данный момент у меня есть вот такая наработка:

$(function() { 
  $('.menu_mobile li a').click(function() { 
	 $(this).closest('li').find('ul').eq(0).slideToggle();  
  }); 
});
.menu_mobile ul { 
	margin: 3em 3.5em; 
	margin: 7.5vw 8.75vw; 
	padding: 0; 
} 
 
.menu_mobile li { 
	list-style: none; 
} 
 
.menu_mobile li a { 
	display: block; 
	line-height: 30px; 
	box-shadow: 0 0 5px #505050; 
	border-radius: 3px; 
	text-align: center; 
	margin: 1em 5px; 
} 
 
.menu_mobile li a:hover { 
	background: #f2f2f2; 
} 
 
.menu_mobile li ul { 
	display: none; 
} 
 
.menu_mobile ul ul { 
	margin: 0; 
} 
 
.shown { 
	display: block; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="menu_mobile"> 
  <ul> 
    <li><a href="#">Level 1-1</a></li> 
    <li><a href="#">Level 1-2</a> 
    <!--Level 2--> 
        <ul>  
          <li><a href="#">Level 2-1</a></li> 
          <li><a href="#">Level 2-2</a> 
          <!--Level 3--> 
            <ul> 
              <li><a href="#">Level 3-1</a></li> 
              <li><a href="#">Level 3-2</a></li> 
              <li><a href="#">Level 3-3</a></li> 
            </ul> 
          </li> 
          <li><a href="#">Level 2-3</a></li> 
        </ul> 
    </li> 
    <li><a href="#">Level 1-3</a></li> 
    <li><a href="#">Level 1-4</a> 
  </ul> 
</div>

При распахивании, подменю прыгает и сразу встает на место, как только распахнулось (очевидно, проблема в объединении отступов). Если кто-то знает, как поправить и вас не затруднит - напишите об этом, пожалуйста.

Answer 1

Проблема во внешних отступах тега a - отступ нужно сделать у li

$(function() { 
	$("ul li").each(function() { 
    this_li = $(this); 
    if ($(this_li).find("ul").length > 0) { 
      $(this_li).append('<button>v</button>') 
    } 
  }); 
 
  $('.menu_mobile li button').click(function() { 
	  $(this).closest('li').find('ul').eq(0).slideToggle();  
  }); 
});
.menu_mobile ul { 
	margin: 3em 3.5em; 
	margin: 7.5vw 8.75vw; 
	padding: 0 2px; 
} 
 
.menu_mobile li { 
	list-style: none; 
    margin: 1em 5px; 
    position: relative; 
} 
 
.menu_mobile li li { 
	list-style: none; 
} 
 
.menu_mobile li a { 
	display: block; 
	line-height: 30px; 
	box-shadow: 0 0 5px #505050; 
	border-radius: 3px; 
	text-align: center; 
} 
 
.menu_mobile li a:hover { 
	background: #f2f2f2; 
} 
 
.menu_mobile li ul { 
	display: none; 
} 
 
.menu_mobile ul ul { 
	margin: 0; 
} 
 
.shown { 
	display: block; 
} 
 
button{ 
  position: absolute; 
  right: 0; 
  top: 0; 
  height: 30px; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="menu_mobile"> 
  <ul> 
    <li><a href="#">Level 1-1</a></li> 
    <li><a href="#">Level 1-2</a> 
    <!--Level 2--> 
        <ul>  
          <li><a href="#">Level 2-1</a></li> 
          <li><a href="#">Level 2-2</a> 
          <!--Level 3--> 
            <ul> 
              <li><a href="#">Level 3-1</a></li> 
              <li><a href="#">Level 3-2</a></li> 
              <li><a href="#">Level 3-3</a></li> 
            </ul> 
          </li> 
          <li><a href="#">Level 2-3</a></li> 
        </ul> 
    </li> 
    <li><a href="#">Level 1-3</a></li> 
    <li><a href="#">Level 1-4</a> 
  </ul> 
</div>

READ ALSO
Последовательное выполнение js функции
javascript

Последовательное выполнение js функции

ПриветствуюПрошу сразу не пинать, я в js полный ноль но задачу надо решить, с вашей помощью будет быстрее

 290
Android приложение
javascript

Android приложение

На моем сайте имеется код: echo "<form action='/myicons' method=\"post\" enctype='multipart/form-data'>"; echo "<input type='file' name='file' /><br>";

 215
Сортировка по концу строки php
PHP

Сортировка по концу строки php

ПриветЕсть поле в которое вводится данные вида:

 284
Что использовать для парсинга сайтов на PHP?
PHP

Что использовать для парсинга сайтов на PHP?

Всем привет!

 238