@Grizar

Меню закрыть и открыть при клике только CSS?

Имею меню как ниже, html менять не могу ( могу только добавить css - before или after например)
Задачи две -
1. Нужно открывать подменю при клике, и так чтобы другое открытое подменю не закрывалось
2. Как закрыть открытое подменю при клике на основной пункт меню

вот пример здесь меню
но тут только открывается при клике

использую
.sub-menu 
{ 
   display: none; 
} 
.menu-item:focus ~ .sub-menu, 
.menu-item:active ~ .sub-menu, 
.sub-menu:hover 
{ 
   display: block; 
}


вот меню
<div class="menu-top-menu-left-container">
 <ul  class="menu">
  <li class="menu-item">
   <a title="Бонусная программа	" href="#">Бонусы</a>
    <ul class="sub-menu">
     <li class="menu-item">
      <a title="Сборник рецептов" href="#">Рецепты</a></li>
    </ul>
   </li>
   <li class="menu-item">
    <a title="Ждем ваших предложений о сотрудничестве" href="#">Сотрудничество</a>
 <ul class="sub-menu">
	<li class="menu-item">
   <a title="Если вы поставщик" href="#">Поставщикам</a>
  </li>
	<li class="menu-item">
   <a title="Если вы покупатель" href="#">Покупателям</a>
  </li>
</ul>
</li>
</ul>
</div>
  • Вопрос задан
  • 671 просмотр
Решения вопроса 1
Shev_Art_V
@Shev_Art_V
Занимаюсь разработкой сайтов на Modx Revolution
В css нет псеадокласса для клика и для потери фокуса нет, поэтому если вёрстку менять нельзя, нужно для решения задачи использовать js, с его помощью по клику переключать класс например show. Ну и в разметку html нужно будет добавить идентификаторы, чтобы было проще находит в DOM нужные узлы.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы