Блог

Главная - Вопросы по программированию - Поведение кнопки меню «Гамбургер» в CSS

Поведение кнопки меню «Гамбургер» в CSS

#css #hover

#css #наведение

Вопрос:

Я пытаюсь написать поведение кнопки меню «гамбургер» для своего веб-сайта. Я хочу, чтобы на панели навигации отображались заголовок и кнопка меню. Когда пользователь нажимает на кнопку, я бы хотел, чтобы заголовок скрывался, а два пункта меню отображались.

Это не звучит сложно, но я не могу сделать это правильно.

Упрощение html заключается в 

 <div id="container">
<div id="button">B</div>
<div id="menu1">Menu 1</div>
<div id="title">Title</div>
<div id="menu2">Menu 2</div>

<div style="clear: both;"> </div>
</div>

и css является

 div {border:1px solid black;}

#menu1, #title, #menu2 {float:left;}
#button {float:right;}

#menu1, #menu2 {
  width:40%;
  display:none;
  }

#title {
  width:80%;
  display:block;
  }


#button:hover   #menu1, 
#button:hover   #menu2 {
  display:block;
  }

#button:hover   #title {
  display:none;
  }

Вот jsfiffle этого кода.
Где я ошибаюсь?

Комментарии:

1. Нажатие на #title элемент должно заставить элементы #menu1 и #menu2 отображаться (и скрывать #title сам)?

2. Спасибо @DavidThomas, это был бы простой выход (чтобы я мог писать правила на основе #container, такие как #container:hover > #title {display:none;} . Хотя это не очень элегантно. Как вы думаете, возможно ли запустить процесс только с помощью #button?

3. jsfiddle.net/MBLZx Надеюсь, это поможет вам 🙂