Гамбургер-меню с субменту

Я пытаюсь реализовать гамбургер-меню с подменю. Пока выглядит довольно уродливо, особенно в отношении последнего пункта. Как видно, у меня проблема с наведением на Dropdown1. Похоже, что наведение курсора на элемент Dropdown1 работает некорректно, а фоновое покрытие гамбургера также неверно.

function myFunction() {
  var x = document.getElementById("myTopnav");

  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}

.topnav {
  background-color: #333;
  overflow: visible;
}
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}
.menuitems a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}
.topnav a:hover {
  background-color: #ddd;
  color: black;
}
.menuitems li a:hover {
  background-color: #ddd;
  color: black;
}
.topnav a.active {
  background-color: #808080;
  color: white;
}
.topnav .icon {
  display: none;
}
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}
@media screen and (max-width: 600px) {
    .topnav li:first-child > a {
    display: none;
  }
}
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive  li > a {
    float: none;
    display: block;
    text-align: left;
  }
}

<div class = "topnav" id = "myTopnav">
  <a href = "#home" class = "active">Home</a>
    <a href = "#news">News</a>
    <a href = "#contact">Contact</a>
      <ul>
        <li>
          <a href = "#Dropdown">Dropdown</a>
          <ul class = "menuitems">
            <li>
              <a href = "#Dropdown1">Dropdown1</a>
            </li>
          </ul>
        </li>
      </ul>
    <a href = "javascript:void(0);" class = "icon" onclick = "myFunction()">
  </a>
</div>

javascript html css

23.12.2020 18:17

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

148

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Фоновая проблема выглядела так, как будто ваши поплавки не очищались на .topnav a. Я создал для вас рабочий пример, чтобы вы могли сравнить с ним свой код, и немного перетасовал ваш код.

Я переключил поплавки на display: flex и настроил выпадающую навигацию. Иногда поплавки сложнее отслеживать, поэтому display: flex может немного упростить эту задачу. Единственное, что я не сделал, так это не настроил ховер на мобильном телефоне. Очевидно, что вы не можете наводить курсор мыши на мобильном телефоне, поэтому .menuitems необходимо настроить с помощью события клика, чтобы вызвать отображение/скрытие.

function myFunction() {
    var x = document.getElementById("myTopnav");
        if (x.className === "topnav") {
            x.className += " responsive";
        } else {
            x.className = "topnav";
    }
}

.topnav {
    background-color: #333;
    overflow: visible;
}
.topnav a {
    padding: 14px 16px;
    text-decoration: none;
    color: #fff;
}
.topnav ul {
    margin: 0;
    padding: 0;
    display: flex;
}
.topnav li {
    vertical-align: top;
    list-style-type: none;
    font-size: 17px;
    position: relative;
    width: auto;
}
.topnav li > a {
    text-align: center;
    color: #f2f2f2;
    text-decoration: none;
    font-size: 17px;
    display: block;
}
.topnav li > a:hover {
    background-color: #ddd;
    color: black;
}
.topnav li ul {
    display: none;
    position: absolute;
    background-color: #333;
}
.topnav li:hover > ul {
    display: block;
}
.topnav li.menuitems li a:hover {
    background-color: #ddd;
    color: black;
}
.topnav a.active {
    background-color: #808080;
    color: white;
}
.topnav .icon {
    display: none;
}

@media screen and (max-width: 600px) {
    .topnav ul {
        flex-direction: column;
        text-align: right;
    }
    .topnav li {
        display: none;
    }
    .topnav .icon {
        display: block;
        text-align: right;
    }
    .topnav.responsive li {
        display: block;
    }
    .topnav.responsive > li > ul > li {
        display: block;
    }
    .topnav.responsive li > a {
        text-align: right;
    }
    .topnav.responsive li ul {
        width: 100%;
        right: 0;
        text-align: right;
    }
}

<div class = "topnav" id = "myTopnav">
  <a href = "javascript:void(0);" class = "icon" onclick = "myFunction()">MENU</a>
  <ul>
      <li><a href = "#home" class = "active">Home</a></li>
      <li><a href = "#news">News</a></li>
      <li><a href = "#contact">Contact</a></li>
      <li>
          <a href = "#Dropdown">Dropdown</a>
          <ul class = "menuitems">
            <li>
                <a href = "#Dropdown1">Dropdown1</a>
            </li>
          </ul>
      </li>
  </ul>
</div>

Спасибо, не могли бы вы дать мне больше пояснений по поводу .topnav li:not(.mob-nav) { display: none;}

— 26.12.2020 09:50

Упс. Сначала у меня был класс .mob-nav на одном из элементов, но я удалил его, прежде чем опубликовать. Даже если он все еще работает, на самом деле он должен быть .topnav li. Поэтому я только что обновил свой код.

— 27.12.2020 15:39

23.12.2020 19:01