Блог

Главная - Вопросы по программированию - Как мне навести курсор, чтобы изменить цвет меню гамбургера, щелкнуть меню гамбургера, чтобы преобразовать его в x и открыть выпадающий список содержимого?

Как мне навести курсор, чтобы изменить цвет меню гамбургера, щелкнуть меню гамбургера, чтобы преобразовать его в x и открыть выпадающий список содержимого?

#javascript #html #css #drop-down-menu #hamburger-menu

#javascript #HTML #css #выпадающее меню #гамбургер-меню

Вопрос:

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

Ниже приведен мой код для меню гамбургера, которое преобразуется в X:

 function transformmenubar(x) {
  x.classList.toggle("change");
} 
 .menu-bar{
  display: inline-block;
  cursor: pointer;
}

.bar1, .bar2, .bar3 {
  width: 15px;
  height: 2px;
  background-color: #000000;
  margin: 3px 0;
  transition: 0.4s;
}


.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-3px, 3.5px);
  transform: rotate(-45deg) translate(-3px, 3.5px);
}

.change .bar2 {opacity: 0;}

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-3px, -4.5px);
  transform: rotate(45deg) translate(-3px, -4.5px);
} 
 <div class="menu-bar"  onclick="transformmenubar(this)"  =>
  <div class="bar1"></div>
  <div class="bar2"></div>
  <div class="bar3"></div>
</div>

Ниже приведен код для моего выпадающего содержимого:

 .dropdown-content {
  height: 100%;
  width: 200px;
  position: fixed;
  z-index: 1;
  display: none;
  overflow-x: hidden;
  margin-top: 50px;
  padding-top: 20px; 
}

.dropdown-content a {
  padding: 6px 8px 6px 16px;
  padding-left: 10px;
  text-decoration: none;
  font-size: 15px;
  color: #000000;
  display: block;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  outline: none;
  font-family: Arial Rounded MT Bold;
}

.dropdown-content a:hover {color: #C5B358;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover {color: #C5B358;} 
  <div class="dropdown-content">
      <a href="#">HOME</a>
      <a href="#">SHOP</a>
      <a href="#">CATALOGUE</a>
      <a href="#">THE COMPANY</a>
      <a href="#">CONTACT US</a>
      <a href="#">FAQ</a>
 </div>

Как мне объединить мой код, чтобы он работал?

Вот примеры изображений того, как я хочу, чтобы мой код выглядел:

введите описание изображения здесь

введите описание изображения здесь

Ответ №1:

Посмотрите. Вот мое решение.

Во-первых, как любитель программирования, я советую вам НЕ объявлять события javascript внутри тегов структуры html:

 onclick="transformmenubar(this)"

Это повлечет за собой множество недостатков. Запишите всю логику в пользовательских файлах javascript — .js или внутри <script>...</script> тегов.

Я переписал ваш код javascript, добавив переключатель для отображения самого меню:

 menu.classList.toggle("menu_change");

Кроме того, left правило отвечает за отсутствие и появление меню для анимации. Я удаляю display: none :

 .dropdown-content {
  ...
  left: -100%;
  ...
  transition: 1s;
}

И класс для отображения меню, которое добавляет / удаляет toggle() метод в логике javasript:

 .dropdown-content.menu_change {
  left: 0;
}

Чтобы изменить цвет полос кнопки меню, добавьте это правило из :hover в свой css:

 .menu-bar:hover div {
  background-color: yellow;
}

Запустите этот фрагмент и посмотрите, как он работает.

Если у вас есть какие-либо вопросы, пожалуйста, дайте мне знать. Я с удовольствием отвечу.

 let x = document.querySelector('.menu-bar');
let menu = document.querySelector('.dropdown-content');

x.onclick = function() {
  this.classList.toggle("change");
  menu.classList.toggle("menu_change");
} 
 .dropdown-content {
  height: 100%;
  width: 200px;
  position: fixed;
  z-index: 1;
  left: -100%;
  overflow-x: hidden;
  margin-top: 50px;
  padding-top: 20px;
  transition: 1s;
}

.dropdown-content.menu_change {
  left: 0;
}

.dropdown-content a {
  padding: 6px 8px 6px 16px;
  padding-left: 10px;
  text-decoration: none;
  font-size: 15px;
  color: #000000;
  display: block;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  outline: none;
  font-family: Arial Rounded MT Bold;
}

.dropdown-content a:hover {color: #C5B358;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover {color: #C5B358;}

.menu-bar{
  display: inline-block;
  cursor: pointer;
}

.menu-bar:hover div {
  background-color: yellow;
}

.bar1, .bar2, .bar3 {
  width: 15px;
  height: 2px;
  background-color: #000000;
  margin: 3px 0;
  transition: 0.4s;
}


.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-3px, 3.5px);
  transform: rotate(-45deg) translate(-3px, 3.5px);
}

.change .bar2 {opacity: 0;}

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-3px, -4.5px);
  transform: rotate(45deg) translate(-3px, -4.5px);
} 
 <div class="menu-bar">
  <div class="bar1"></div>
  <div class="bar2"></div>
  <div class="bar3"></div>
</div>

<div class="dropdown-content">
  <a href="#">HOME</a>
  <a href="#">SHOP</a>
  <a href="#">CATALOGUE</a>
  <a href="#">THE COMPANY</a>
  <a href="#">CONTACT US</a>
  <a href="#">FAQ</a>
</div>

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

1. Большое вам спасибо за вашу помощь. Действительно ценю это. Как я могу сделать это таким образом, чтобы при наведении курсора мыши на меню гамбургера и крестовую кнопку оно менялось на золотое?

2. Я обновил свой ответ. Проверьте это. Я установил указатель мыши на желтый. Но вы можете сами определить желаемый цвет и вставить его здесь — .menu-bar:hover div { background-color: yellow; }

3. Нет проблем. Всегда рад помочь. И помните, никогда не объявляйте события js внутри тегов — это плохо. Счастливого кодирования.