[英]how to make a drop down menu horizontal
我不确定这是否可行,但是我有一个名为“水果”的按钮。 当我单击它时,四个水果按钮垂直向下显示,但是我希望它们水平显示吗?
关于如何执行此操作的任何想法或提示?
请不要说“自己尝试一下,不是在这里为您做这件事”。我一直以来都很无知。 我所寻找的只是一个提示,不希望任何人为我编码。 谢谢 :)
HTML
<div id="myNav" class="overlay">
<!-- Button to close the overlay navigation -->
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<!-- Overlay content -->
<div class="overlay-content">
<button class="dropbtn btn-circle overlay-icon" onclick='myFunction()'>Fruits</button>
<div id="myDropdown" class="dropdown-content">
<div class="row">
<div class="col-xs-12">
<button class="dropbtn btn-circle overlay-icon">Apple</button>
<button class="dropbtn btn-circle overlay-icon">Banana</button>
<button class="dropbtn btn-circle overlay-icon">Orange</button>
<button class="dropbtn btn-circle overlay-icon">Pear</button>
</div>
</div>
</div>
</div>
</div>
JS
<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
CSS
.overlay-icon {
float: center;
width: 120px;
height: 120px;
text-align: center;
padding: 600px 0;
font-size: 12px;
line-height: 1.428571429;
border-radius: 36px;
margin-left: 660px;
margin-bottom: 20px;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #3e8e41;
}
.dropdown-content {
display: none;
position: relative;
min-width: 10px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
font-size: 10px;
margin-left: 0px;
}
.dropdown-content dropbtn {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
font-size: 10px;
}
我认为您需要将按钮显示为嵌入式块。 这是CSS代码:
.dropdown-content dropbtn {
display: inline-block;
}
在您的CSS中更改,我删除了margin-left
并将padding
从600px 0
更改为60px 0
600px 0
CSS:
.overlay-icon {
float: center;
width: 120px;
height: 120px;
text-align: center;
padding: 60px 0;
font-size: 12px;
line-height: 1.428571429;
border-radius: 36px;
margin-bottom: 20px;
}
.show {
display: initial;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.