文章/答案/技术大牛

发布

社区首页 >问答首页 >切换html/css网站菜单中的菜单问题。将光标悬停在右侧的汉堡图标上时无法获取菜单

问切换html/css网站菜单中的菜单问题。将光标悬停在右侧的汉堡图标上时无法获取菜单
EN

Stack Overflow用户

提问于 2020-05-03 17:24:53

回答 1查看 257关注 0票数 0

当@media (max-width = 1200px)时，菜单中的切换按钮出现问题。即，当我切换到切换按钮时，什么也没有出现。请帮帮忙

我在html脚本中添加了bootstrap 4.3。我想要添加到我创建的切换按钮中的菜单位于我的html脚本中切换按钮的下方。请帮我解决这个问题

ol, ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

/*********************************
*** Marque
*********************************/
.marquee {
  background: #2a4563;
  padding-top: 4px;
  padding-bottom: 3px;
  /*border: 1px;
    border-left: 10px;
    border-style: solid;
    border-color: #FF5733 ;*/
}

.marquee a {
  color: white;
  text-decoration: none;
  font-size: 18px;
  line-height: 1.5;
}

/*********************************
*** Logo Bar
*********************************/
#logo-bar {
  background: #fff;
  padding-top: 3px;
}

#logo-bar .logo {
  display: flex;
  align-items: center;
}

#logo-bar .logo img {
  max-width: 280px;
}

#logo-bar .logo-2 img {
  max-width: 200px;
  margin-left: 70px;
}

#menu {
  background: #2a4563;
  box-shadow: 0 5px 3px -3px;
  position: relative;
  z-index: 1;
}

#menu ul {
  text-align: center;
  margin-bottom: 0;
}

#menu ul li {
  display: inline-block;
  padding: 8px 20px;
}

#menu ul li:hover, .active {
  background-color: orange;
  transition: ease-in .3s;
}

#menu ul li a {
  color: #fff;
  text-decoration: none;
  font-size: 18px;
}

#menu ul li:hover a {
  color: black;
  transition: ease-in .3s;
}

#menu ul li ul {
  display: none;
  position: absolute;
  padding: 10px;
  background: orange;
}

#menu ul li:hover ul {
  display: block;
  margin-top: 10px;
  margin-left: -20px;
  z-index: 1;
  padding: 10px;
}

#menu ul li ul li {
  display: block;
}

#menu ul li ul li ul.nav-sub-sub-item{
  display: none;
  position: absolute;
  padding: 10px;
  background: orange;
}

#menu ul li:hover ul li:hover ul.nav-sub-sub-item {
  width: 100%;
  display: block;
  margin-top: -35px;
  margin-left: 200px;
  z-index: 1;
  padding: 10px;
}
#menu ul li ul li:hover {
  background: #2a4563;
  transition: ease-in .3s;
}

#menu ul li ul li:hover a {
  color: #fff;
  transition: ease-in .3s;
}

label {
  font-size: 26px;
  line-height: 70px;
  display: none;
}

#toggle {
  display: none;
}

.mobile-menu {
  display: none;
}

/*
Media Queries for Hamburger Menu
*/
@media only screen and (max-width: 1200px) {
  .logo-bar {
    display: none;
  }

  .mobile-menu {
    display: block;
    padding: 5px 0 5px;
    box-shadow: 0 0 5px 0;
    position: relative;
    z-index: 1;
  }

  .mobile-menu-1 {
    padding: 0 0 0 50px;
  }

  .mobile-menu-1 img {
    max-width: 200px;
  }

  label {
    display: block;
    pointer: cursor;
  }

  #menu ul li {
    display: none;
    width: 100%;
    text-align: center;
  }

  #menu ul li a {
    display: block;
    border-bottom: 1px solid #EAEAEB;
    margin: 0;
  }

  #toggle:checked+#menu {
    display: block;
  }
}

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <!-- Home Style Sheet -->
  <link rel="stylesheet" href="css/style.css" />
  <!-- Font Awesome JavaScript -->
  <link href="https://fonts.googleapis.com/css?family=Lato|Libre+Baskerville|Montserrat|Quicksand|Raleway|Slabo+27px&display=swap" rel="stylesheet">
  <!-- Font Awesome JavaScript -->
  <script src="https://kit.fontawesome.com/0412137e5c.js" crossorigin="anonymous"></script>
  <!-- Optional JavaScript -->

  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src='http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.js'></script>
  <script src='script/script.js' type="text/javascript"></script>
  <title>Sample Website</title>
</head>

<body>
  <!-- Header -->

  <!-- Marquee Starts -->
  <div class="marquee">
    <marquee behavior="scroll" scrollamount="4" direction="left" class="marqueeStyle" onmouseover="this.stop();" onmouseout="this.start();">
      <a href="#" target="_blank"><i class="fas fa-newspaper"></i> Everything will remain closed upto 30th May 2020 to avoid gathering &amp; prevention of spreading Novel Corona Virus </a>
    </marquee>
  </div>
  <!-- Marquee Ends-->
  <!-- Logo Bar Starts -->
  <header class="header">
    <div id="logo-bar">
      <div class="container">
        <div class="logo-bar">
          <div class="row">
            <div class="logo col-lg-6 col-md-6">
              <a href="index.html">
                <h1>LOGO</h1>
              </a>
            </div>

            <div class="logo-2 col-lg-3 col-md-3">
              <h1>@2ND LOGO</h1>
            </div>

            <div class="col-lg-3 col-md-3">
              <button class="btn btn-sm btn-primary">Student Login</button>&nbsp;<button class="btn btn-sm btn-primary">Admin Login</button>
              <h6><strong>Call Us:</strong> +41-320-00000000</h6>
              <h6><Strong>Email Us:</Strong></h6>
              <h6>info@example.com</h6>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="mobile-menu">
      <div class="row">
        <div class="mobile-menu-1 col-10 d-flex my-auto">
          <h1>Mobile LOGO</h1>
        </div>
        <div class="mobile-menu-2 col-2 d-flex my-auto">
          <label for="toggle">&#9776;</label>
          <input type="checkbox" id="toggle" />
        </div>
      </div>
    </div>
    <!-- Logo Bar Ends -->
    <!-- Menu Bar Starts -->
    <div id="menu">
      <div class="container">
        <ul>
          <li class="active"><a href="index.html"><i class="fas fa-home"></i> </a></li>
          <li class="nav-item"><a href="#!">About Us</a>
            <ul>
              <li class="nav-sub-item"><a href="about.html">About TGU</a></li>
              <li class="nav-sub-item"><a href="vision.html">TGU Vision</a></li>
              <li class="nav-sub-item"><a href="mission.html">TGU Mission</a></li>
              <li class="nav-sub-item"><a href="board.html">Board of Mgt.</a></li>
              <li class="nav-sub-item"><a href="#!">Approval & Affiliation</a>
                <ul class="nav-sub-sub-item">
                  <li class="nav-sub-item"><a href="pdf/tgu-act.pdf" target="_blank">TGU Act</a></li>
                  <li class="nav-sub-item"><a href="pdf/UGC-consolidated-list.pdf" target="_blank">UGC List</a></li>
                </ul>
              </li>
            </ul>
          </li>
          <li class="nav-item"><a href="#!">Academic</a>
            <ul>
              <li class="nav-sub-item"><a href="department.html">Department</a></li>
              <li class="nav-sub-item"><a href="course.html">Courses</a></li>
              <li class="nav-sub-item"><a href="syllabus.html">Syllabus</a></li>
            </ul>
          </li>
          <li class="nav-item"><a href="#!">Admission</a>
            <ul>
              <li class="nav-sub-item"><a href="procedure">Procedure</a></li>
              <li class="nav-sub-item"><a href="applyonline.html">Apply Online</a></li>
              <li class="nav-sub-item"><a href="scholarship.html">Scholarship</a></li>
              <li class="nav-sub-item"><a href="download.html">Download Form</a></li>
              <li class="nav-sub-item"><a href="merit.html">Merit</a></li>
            </ul>
          </li>
          <li class="nav-item"><a href="#!">Examination</a>
            <ul>
              <li class="nav-sub-item"><a href="examform.html">Exam Form</a></li>
              <li class="nav-sub-item"><a href="examnotice.html">Exam Notice</a></li>
              <li class="nav-sub-item"><a href="admitcard.html">Admit Card</a></li>
              <li class="nav-sub-item"><a href="verification.html">Verification</a></li>
            </ul>
          </li>
          <li class="nav-item"><a href="research.html">Research</a></li>
          <li class="nav-item"><a href="facilities.html">Facilities</a>
            <ul>
              <li class="nav-sub-item"><a href="#!">Library</a></li>
              <li class="nav-sub-item"><a href="#!">WiFi Campus</a></li>
              <li class="nav-sub-item"><a href="#!">Hostel & Cafe</a></li>
              <li class="nav-sub-item"><a href="#!">Digitalization</a></li>
              <li class="nav-sub-item"><a href="#!">First Aid</a></li>
              <li class="nav-sub-item"><a href="#!">Sports</a></li>
            </ul>
          </li>
          <li><a href="contact.html">Contact</a></li>
          <li>
            <div class="search_button"><i class="fa fa-search" aria-hidden="true"></i></div>
          </li>
        </ul>
      </div>
    </div>
  </header>


  <!-- Menu Bar Ends -->

javascript

html

css

bootstrap-4

media-queries

回答 1

Stack Overflow用户

发布于 2020-05-03 17:45:06

您正在使用表单复选框来创建切换逻辑，这不是对HTMl标记的有效使用。您应该做的是向div元素mobile-menu-2添加一个JS逻辑以进行绑定，向其添加一个单击事件处理程序。

HTML

<div class="mobile-menu-2 col-2 d-flex my-auto">&#9776;</div>

var mobileMenu = document.getElementsByClassName("mobile-menu-2")[0];
//Add click event with a callback function to toggle class style
mobileMenu.addEventListener("click", toggleMenu);

function toggleMenu() {
  var activeMenu = mobileMenu.classList.contains("active");
  if (!activeMenu) {     
    mobileMenu.classList.add("active");
  } else {
    mobileMenu.classList.remove("active");
  }
}

因此，这将在div元素上添加和删除一个名为active的类。因此，现在在CSS中，您只需确保将正确的样式应用于您的目标类。

示例CSS

.mobile-menu-2 {
  background-color: red;
}

.mobile-menu-2.active {
  background-color: green;
}

如果需要在另一个div上添加/删除活动状态类，则只需将新元素document.getElementsByClassName('something')[0]作为目标，并向该新元素添加/删除该类。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/61572216

复制

相似问题

问切换html/css网站菜单中的菜单问题。将光标悬停在右侧的汉堡图标上时无法获取菜单
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问切换html/css网站菜单中的菜单问题。将光标悬停在右侧的汉堡图标上时无法获取菜单EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问切换html/css网站菜单中的菜单问题。将光标悬停在右侧的汉堡图标上时无法获取菜单
EN