堆栈内存溢出
  繁体   English   中英

CSS / JavaScript下拉菜单问题

[英]CSS/Javascript Dropdown Menu Issue

 原文  2017-05-23 14:04:30  8   4    javascript/ html/ css/ navbar/ dropdown

问题描述

大家好，我是Web设计的新手，我目前正在设计一个网站，尝试使用CSS和Javascript制作的下拉菜单。 我几乎设法使所有工作正常进行，但是要解决的唯一问题是下拉菜单内容显示在容器的左侧，而不是在相关父菜单选项的下方。

截图 

 function myFunction1() { document.getElementById("myDropdown1").classList.toggle("show"); } function myFunction2() { document.getElementById("myDropdown2").classList.toggle("show"); } function myFunction3() { document.getElementById("myDropdown3").classList.toggle("show"); } function myFunction4() { document.getElementById("myDropdown4").classList.toggle("show"); } window.onclick = function(event) { if (!event.target.matches('.dropbtn')) { var dropdowns = document.getElementsByClassName("dropdown-content1"); var i; for (i = 0; i < dropdowns.length; i++) { var openDropdown = dropdowns[i]; if (openDropdown.classList.contains('show')) { openDropdown.classList.remove('show'); } } } } window.onclick = function(event) { if (!event.target.matches('.dropbtn2')) { var dropdowns = document.getElementsByClassName("dropdown-content2"); var i; for (i = 0; i < dropdowns.length; i++) { var openDropdown = dropdowns[i]; if (openDropdown.classList.contains('show')) { openDropdown.classList.remove('show'); } } } } window.onclick = function(event) { if (!event.target.matches('.dropbtn3')) { var dropdowns = document.getElementsByClassName("dropdown-content3"); var i; for (i = 0; i < dropdowns.length; i++) { var openDropdown = dropdowns[i]; if (openDropdown.classList.contains('show')) { openDropdown.classList.remove('show'); } } } } window.onclick = function(event) { if (!event.target.matches('.dropbtn4')) { var dropdowns = document.getElementsByClassName("dropdown-content4"); var i; for (i = 0; i < dropdowns.length; i++) { var openDropdown = dropdowns[i]; if (openDropdown.classList.contains('show')) { openDropdown.classList.remove('show'); } } } } 
 .navbar { float: left; font-family: Impact, Haettenschweiler, Franklin Gothic Bold, Arial Black, " sans-serif"; height: auto; width: 100%; display: inline-block; margin: 0; padding: 0; position: relative; } .navbar a { font-size: 2em; font-weight: 100; color: white; text-align: center; } .dropdown { width: 100%; } .dropdown-content1 { display: none; position: absolute; background-color: #f9f9f9; width: 16.667%; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; padding: 0px; height: auto; } .dropdown-content1 a { text-decoration: none; display: block; width: 100%; padding: 0px; background-color: #000000; border: 1px solid white; text-align: center; height: auto; } .dropdown-content1 a:hover { color: black; padding: 12px 16px; text-decoration: none; display: block; width: 100%; padding: 0px; background-color: #FFFFFF; border: 1px solid black; font-family: Impact, Haettenschweiler, Franklin Gothic Bold, Arial Black, " sans-serif"; text-align: center; height: auto; transition-duration: 0.5s; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2) } .dropdown-content2 { display: none; position: absolute; background-color: #f9f9f9; width: 16.667%; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; padding: 0px; } .dropdown-content2 a { color: white; text-decoration: none; display: block; width: 100%; padding: 0px; background-color: #000000; border: 1px solid white; font-family: Impact, Haettenschweiler, Franklin Gothic Bold, Arial Black, " sans-serif"; text-align: center; height: auto; font-size: 2em; } .dropdown-content2 a:hover { color: black; padding: 12px 16px; text-decoration: none; display: block; width: 100%; padding: 0px; background-color: #FFFFFF; border: 1px solid black; font-family: Impact, Haettenschweiler, Franklin Gothic Bold, Arial Black, " sans-serif"; text-align: center; height: auto; transition-duration: 0.5s; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2) } .dropdown-content3 { display: none; position: absolute; background-color: #f9f9f9; width: 16.667%; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; padding: 0px; } .dropdown-content3 a { color: white; text-decoration: none; display: block; width: 100%; padding: 0px; background-color: #000000; border: 1px solid white; font-family: Impact, Haettenschweiler, Franklin Gothic Bold, Arial Black, " sans-serif"; text-align: center; height: auto; font-size: 2em; } .dropdown-content3 a:hover { color: black; padding: 12px 16px; text-decoration: none; display: block; width: 100%; padding: 0px; background-color: #FFFFFF; border: 1px solid black; font-family: Impact, Haettenschweiler, Franklin Gothic Bold, Arial Black, " sans-serif"; text-align: center; height: auto; transition-duration: 0.5s; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2) } .dropdown-content4 { display: none; position: absolute; background-color: #f9f9f9; width: 16.667%; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; padding: 0px; } .dropdown-content4 a { color: white; text-decoration: none; display: block; width: 100%; padding: 0px; background-color: #000000; border: 1px solid white; font-family: Impact, Haettenschweiler, Franklin Gothic Bold, Arial Black, " sans-serif"; text-align: center; height: auto; font-size: 2em; } .dropdown-content4 a:hover { color: black; padding: 12px 16px; text-decoration: none; display: block; width: 100%; padding: 0px; background-color: #FFFFFF; border: 1px solid black; font-family: Impact, Haettenschweiler, Franklin Gothic Bold, Arial Black, " sans-serif"; text-align: center; height: auto; transition-duration: 0.5s; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2) } .show { display: block; } .btn1 { background-color: #71aace; color: white; padding: 0px; margin: 0px; font-size: 2em; font-family: Impact; border: 1px solid white; cursor: pointer; width: 16.667%; float: left; } .btn1:hover, .btn1:focus { background-color: #FFFFFF; color: black; padding: 0px; margin: 0px; font-size: 2em; font-family: Impact; border: 1px solid black; cursor: pointer; width: 16.667%; float: left; box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19); transition-duration: 0.5s; } .dropbtn1 { background-color: #6c73b1; color: white; padding: 0px; margin: 0px; font-size: 2em; border: 1px solid white; cursor: pointer; width: 16.667%; float: left; } .dropbtn1:hover, .dropbtn1:focus { background-color: #FFFFFF; color: black; padding: 0px; margin: 0px; font-size: 2em; font-family: "Impact"; border: 1px solid black; cursor: pointer; width: 16.667%; float: left; box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19); transition-duration: 0.5s; } .dropbtn2 { background-color: #d3c530; color: white; padding: 0px; margin: 0px; font-size: 2em; font-family: Impact; border: 1px solid white; cursor: pointer; width: 16.667%; float: left; } .dropbtn2:hover, .dropbtn2:focus { background-color: #FFFFFF; color: black; padding: 0px; margin: 0px; font-size: 2em; font-family: "Impact"; border: 1px solid black; cursor: pointer; width: 16.667%; float: left; box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19); transition-duration: 0.5s; } .dropbtn3 { background-color: #82c845; color: white; padding: 0px; margin: 0px; font-size: 2em; font-family: Impact; border: 1px solid white; cursor: pointer; width: 16.667%; float: left; } .dropbtn3:hover, .dropbtn3:focus { background-color: #FFFFFF; color: black; padding: 0px; margin: 0px; font-size: 2em; font-family: "Impact"; border: 1px solid black; cursor: pointer; width: 16.667%; float: left; box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19); transition-duration: 0.5s; } .dropbtn4 { background-color: #8f65a1; color: white; padding: 0px; margin: 0px; font-size: 2em; font-family: Impact; border: 1px solid white; cursor: pointer; width: 16.667%; float: left; } .dropbtn4:hover, .dropbtn4:focus { background-color: #FFFFFF; color: black; padding: 0px; margin: 0px; font-size: 2em; font-family: "Impact"; border: 1px solid black; cursor: pointer; width: 16.667%; float: left; box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19); transition-duration: 0.5s; } 
 <div class="navbar"> <button class="btn1" value="About Us" onclick="window.location.href=" https://uklivesound.000webhostapp.com/aboutus.html>About Us</button> <div class="dropdown"> <button class="dropbtn1" onclick="myFunction1()">Rehearsals</button> <div class="dropdown-content1" id="myDropdown1"> <a href="https://uklivesound.000webhostapp.com/liveroom.html">Live Room</a> <a href="https://uklivesound.000webhostapp.com/isolationroom.html">Isolation Room</a> </div> </div> <div class="dropdown"> <button class="dropbtn2" onclick="myFunction2()">Recording</button> <div class="dropdown-content2" id="myDropdown2"> <a href="https://uklivesound.000webhostapp.com/audiorecording.html">Audio</a> <a href="https://uklivesound.000webhostapp.com/videorecording.html">Video</a> </div> </div> <div class="dropdown"> <button class="dropbtn3" onclick="myFunction3()">For Hire</button> <div class="dropdown-content3" id="myDropdown3"> <a href="https://uklivesound.000webhostapp.com/hirepackages.html">Event Packages</a> <a href="https://uklivesound.000webhostapp.com/largeevents.html">Large Events</a> <a href="https://uklivesound.000webhostapp.com/equipmenthire.html">Equipment</a> <a href="https://uklivesound.000webhostapp.com/bandhire.html">Bands</a> </div> </div> <div class="dropdown"> <button class="dropbtn4" onclick="myFunction4()">Other Services</button> <div class="dropdown-content4" id="myDropdown4"> <a href="https://uklivesound.000webhostapp.com/buyandsell.html">Buy & Sell</a> <a href="https://uklivesound.000webhostapp.com/repairs.html">Repairs</a> </div> </div> <button class="btn2" value="Contact Us" onclick="window.location.href=" https://uklivesound.000webhostapp.com/contact.html>Contact Us</button>

4 个解决方案

解决方案1
 1  2017-05-23 14:42:26

您需要使用类名下拉列表为列表项提供相对位置。

这不是您自己的代码的编辑，而是以下示例如何通过CSS中的下拉菜单处理父子之间的关系： 

.dropdown-container {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-left: -100px;
}

相关的JSFiddle

解决方案2
 1  2017-05-23 14:46:56

CSS类dropdown的宽度设置为100％，这意味着此父级中包含的所有.dropdown-content1元素将从完全相同的点开始具有完全相同的宽度。 这就解释了为什么您看到下拉列表到左侧。

将您的.dropdown类更改为以下内容： 

.dropdown {
    float: left;
}

您会注意到的第一件事是所有按钮都会变得有些有趣。

这是因为内部CSS类dropbtn1和dropbtn2等的width设置为16.667% 。 将这些宽度设置为100% ，您将开始看到下拉动作更“符合预期”。

解决方案3
 1  2017-05-23 14:59:57

您需要将16％宽度的元素更改为.dropdown父类。 然后将每个dropdown-content类设置为父级的100％。 您还需要将父下拉列表类设置为position：relative，将子内容类设置为position：absolute，然后告诉浏览器将下拉列表放在父内部的位置（距离父类最高50px，等等）。

这是对我有用的重写...

编辑：您在“关于”和“联系我们” href链接符号中有错误，并带有引号。 我还进一步简化了Javascript和CSS，结合了许多元素和类，以便您了解如何完成此工作。 它并没有简化，但是我敢肯定，您会明白的，所以我将进一步完善您。

使用Javascript： 

function myFunction(ele) {
  hideAll();
  ele.nextElementSibling.style.display="block";
}

function hideAll() {
  var dropdowns = document.getElementsByClassName("dropdown-content");
  for (var i = 0; i < dropdowns.length; i++) {
    dropdowns[i].style.display="none";
  }
}

window.onclick = function(event) {
      if (!event.target.matches('.dropbtn')) {
        hideAll();
    }
}

HTML： 

<div class="navbar">
    <div class=dropdown>
      <button class="dropbtn btn1" value="About Us" onclick="window.location.href='https://uklivesound.000webhostapp.com/aboutus.html'">About Us</button>
    </div>

    <div class="dropdown">
      <button  class="dropbtn dropbtn1" onclick="myFunction(this)">Rehearsals</button>  
      <div class="dropdown-content" id="myDropdown1">
        <a href="https://uklivesound.000webhostapp.com/liveroom.html">Live Room</a>
        <a href="https://uklivesound.000webhostapp.com/isolationroom.html">Isolation Room</a>
      </div>
    </div>

    <div class="dropdown">
      <button class="dropbtn dropbtn2" onclick="myFunction(this)">Recording</button>
      <div class="dropdown-content" id="myDropdown2">
        <a href="https://uklivesound.000webhostapp.com/audiorecording.html">Audio</a>
        <a href="https://uklivesound.000webhostapp.com/videorecording.html">Video</a>
      </div>
    </div>

    <div class="dropdown">
      <button class="dropbtn dropbtn3" onclick="myFunction(this)">For Hire</button>  
      <div class="dropdown-content" id="myDropdown3">
        <a href="https://uklivesound.000webhostapp.com/hirepackages.html">Event Packages</a>
        <a href="https://uklivesound.000webhostapp.com/largeevents.html">Large Events</a>
        <a href="https://uklivesound.000webhostapp.com/equipmenthire.html">Equipment</a>
        <a href="https://uklivesound.000webhostapp.com/bandhire.html">Bands</a>
      </div>
    </div>

    <div class="dropdown">
      <button class="dropbtn dropbtn4" onclick="myFunction(this)">Other Services</button>  
      <div class="dropdown-content" id="myDropdown4">
        <a href="https://uklivesound.000webhostapp.com/buyandsell.html">Buy & Sell</a>
        <a href="https://uklivesound.000webhostapp.com/repairs.html">Repairs</a>
      </div>
    </div>

    <div class=dropdown>
      <button class="dropbtn btn2" value="Contact Us" onclick="window.location.href='https://uklivesound.000webhostapp.com/contact.html'">Contact Us</button>
    </div>
</div>

CSS： 

.navbar {
     float:left;
     font-family:Impact, Haettenschweiler, Franklin Gothic Bold, Arial Black,sans-serif;
     height:auto;
     width:100%;
     display:inline-block;
     margin:0;
     padding:0;
     position:relative;
 }

 .navbar a {   font-size: 2em;     font-weight: 100;
     color: white;
     text-align: center; }

 .dropdown {
    position: relative;
    float:left;
    width:16%;
    }

 .dropdown-content {
     display: none;
     position: absolute;
     top: 50px;
     background-color: #f9f9f9;
     width:100%;
     box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
     z-index: 1;
     padding:0px;
     height:auto;
     }

 .dropdown-content a {
   text-decoration: none; text-align:center; height:auto;
   display: block; width:100%; padding:0px; background-color:#000000; border: 1px solid white;
   }

 .dropdown-content a:hover {
   color: black;
   padding: 12px 16px;
   text-decoration: none; text-align:center; height:auto;
   display: block; width:100%; background-color:#FFFFFF; border: 1px solid black;
   font-family:Impact, Haettenschweiler, Franklin Gothic Bold, Arial Black,sans-serif;
   transition-duration:0.5s; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2)
   }

 .dropbtn {
   color: white;
   padding:0px;  margin:0px;
   font-size:2em;
   border: 1px solid white;
   cursor:pointer; width:100%; float:left;
   }

 .dropbtn:hover, .dropbtn:focus {
   background-color:#FFFFFF;
   color: black;
   border: 1px solid black;
   font-family:Impact;
   transition-duration:0.5s;
   box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
 }

 .btn1 {
    background-color:#71aace;
  }

 .btn2 {
    background-color:#D84E92;
  }

 .dropbtn1 {
     background-color:#6c73b1;
   }

 .dropbtn2 {
     background-color:#d3c530;
   }

 .dropbtn3 {
     background-color:#82c845;
   }

 .dropbtn4 {
     background-color:#8f65a1;
   }

解决方案4
 1 已采纳  2017-05-23 16:28:45

您的帖子中有很多不必要的代码和代码重复。 大部分可以删除。 您也没有正确设置HTML结构，类名和ID，以避免过多的代码或提供良好的语义。

菜单实际上只是美化的选择列表。 因此，用于创建一个元素的最佳语义元素是其中包含<li>元素的<ul>元素。 使用CSS样式，您可以删除项目符号，并将其从垂直布局更改为水平布局。 通常，这是菜单的制作方式。

接下来，关于类和ID。 提供需要在唯一id属性上使用的元素，并将类分配给需要作为组的一部分进行样式设置的元素。 这使样式变得更加简单，并且消除了冗余需求。

谈到JavaScript时，请勿使用内联HTML事件属性（ onclick ， onmouseover等）。 这是我的另一篇文章 ，解释了许多不使用古老的方法来设置事件处理程序的原因。

因此，这是菜单的修改版本。 您将看到代码少了多少，理解起来也更简单了。 

 // Get references to all elements you'll be working with: // All the drop downs var dd = document.querySelectorAll(".db"); // Set up each of the drop downs to invoke the toggleElement function when clicked // and to hide the menu when the mouse moves off an open menu for(var i = 0; i < dd.length; i++){ dd[i].addEventListener("click", function(evt){ toggleElement(evt.target); }); dd[i].addEventListener("mouseout", function(evt){ hideElement(evt.target); }); } // This one function does the job of the myFunction1 - myFunction4 functions function toggleElement(element) { element.querySelector("ul").classList.toggle("hide"); } function hideElement(element) { // If the element is not one of the two link buttons, hide its menu var el = element.querySelector("ul"); if(el){ el.classList.add("hide"); } } 
 /* Master styles for menu. The font will inherit down to children. When specifying font names, use quotes around font names that contain spaces. You had " sans-serif", which would never work because you included a leading space in the string. Plus sans-serif doesn't have a space in it, so it doesn't need quotes anyway. */ .navbar { font-family: Impact, Haettenschweiler, Franklin Gothic Bold, Arial Black, "sans-serif"; margin: 0; padding: 0; list-style:none; } /* These are the actual menu items*/ li { text-align:center; color: white; margin:0; padding:0; } a { text-decoration: none; } /* This simple class is applied to the drop down content from the start and then simply removed or added via JavaScript to show/hide them. */ .hide { display: none; } /* All drop buttons have many property values in common. Specify those once. */ .db { cursor: pointer; display:inline-block; width:calc(16.667% - 4px); } /* Then just worry about what's different between them */ #dropbtn1, #dropbtn6 { background-color: #71aace; } #dropbtn2 { background-color: #6c73b1; } #dropbtn3 { background-color: #d3c530; } #dropbtn4 { background-color: #82c845; } #dropbtn5 { background-color: #8f65a1; } .dropdown-content { background-color: #f9f9f9; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; list-style:none; position:absolute; /* This keeps the drop down from throwing off the layout when shown */ padding:0; width:calc(16.667% - 4px); /* You have to account for the width of the borders. */ } .dropdown-content li { text-align:left; } .dropdown-content:hover { color: black; background-color: #FFFFFF; border: 1px solid black; transition-duration: 0.5s; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index:-1; display:block; } /* All drop button and regular button hover and focus styles are the same, just specify once */ .db:hover, .db:focus, .btn:hover, .btn:focus { background-color: #FFFFFF; color: black; cursor: pointer; box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19); transition-duration: 0.5s; } 
 <ul class="navbar"> <li id="dropbtn1" class="db"><a href="https://uklivesound.000webhostapp.com/aboutus.html">About Us</a></li> <!-- Use id for unique identifiers, Use classes for common traits This button is specifically dropbtn1, but it is styled like all other drop buttons. --> <li id="dropbtn1" class="db">Rehearsals <ul class="dropdown-content hide" id="myDropdown1"> <li><a href="https://uklivesound.000webhostapp.com/liveroom.html">Live Room</a></li> <li><a href="https://uklivesound.000webhostapp.com/isolationroom.html">Isolation Room</a></li> </ul> </li> <li id="dropbtn2" class="db">Recording <ul class="dropdown-content hide" id="myDropdown2"> <li><a href="https://uklivesound.000webhostapp.com/audiorecording.html">Audio</a></li> <li><a href="https://uklivesound.000webhostapp.com/videorecording.html">Video</a></li> </ul> </li> <li id="dropbtn3" class="db">For Hire <ul class="dropdown-content hide" id="myDropdown3"> <li><a href="https://uklivesound.000webhostapp.com/hirepackages.html">Event Packages</a></li> <li><a href="https://uklivesound.000webhostapp.com/largeevents.html">Large Events</a></li> <li><a href="https://uklivesound.000webhostapp.com/equipmenthire.html">Equipment</a></li> <li><a href="https://uklivesound.000webhostapp.com/bandhire.html">Bands</a></li> </ul> </li> <li id="dropbtn4" class="db">Other Services <ul class="dropdown-content hide" id="myDropdown4"> <li><a href="https://uklivesound.000webhostapp.com/buyandsell.html">Buy & Sell</a></li> <li><a href="https://uklivesound.000webhostapp.com/repairs.html">Repairs</a></li> </ul> </li> <li id="dropbtn6" class="db"><a href="https://uklivesound.000webhostapp.com/contact.html">Contact Us</a></li> </ul>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 CSS下拉菜单和JavaScript CSS下拉菜单-使用JavaScript jQuery + CSS下拉菜单问题 CSS和JavaScript菜单出现问题 下拉菜单 html css javascript Javascript 和 css 可访问下拉菜单 Javascript中的奇怪的下拉菜单问题 垂直 CSS/jQuery 下拉菜单问题？ 使用JavaScript，HTML和CSS的下拉菜单 延迟 Hover 在下拉菜单中 Javascript CSS
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM