如何从导航栏中的图标制作下拉菜单? [英] How to make a drop down menu from an icon in a navbar?
本文介绍了如何从导航栏中的图标制作下拉菜单?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我创建了下拉菜单以在图标悬停时打开,但是我希望它实际上在单击时打开,而不是悬停并在菜单外单击时关闭.该图标是导航栏左侧的简单汉堡菜单图标,可打开一个附加到页面左侧的下拉栏.只需对代码进行最小的更改,我将如何实现我想要的?
I have created my dropdown menu to open on hover of the icon, but I want it to actually open on click instead of hover and close when clicked outside the menu. The icon is a simple burger menu icon on the left hand side of the navbar which opens a dropbar that is attached to the left hand side of the page. How would I achieve what I want to with minimal change to my code?
.search {
display: block;
margin-left: 1300px;
margin-right: auto;
margin-bottom: auto;
margin-top: -30px;
cursor: pointer;
}
.burger-menu {
display: block;
margin-left: 100px;
margin-right: auto;
margin-bottom: auto;
margin-top: 1px;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #000000;
min-width: 250px;
z-index: 1;
}
.dropdown-content a {
color: white;
padding: 30px 16px;
text-align: center;
text-decoration: none;
display: block;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
font-size: 24px;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}
.dropdown-content a:hover {
background-color: #ffffff;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #ffffff;
}
<nav>
<div class="dropdown">
<input type="image" width="30" height="30" src="images/burger-menu.png" class="burger-menu" />
<div class="dropdown-content">
<a href="#">HEADWEAR</a>
<a href="#">HOODIES/JACKETS/LONG SLEEVES</a>
<a href="#">SHIRTS</a>
<a href="#">BOTTOMS</a>
<a href="#">TOTE BAGS</a>
</div>
</div>
<img class="search" src="images/search-icon.png" width="30" height="30">
</nav>
推荐答案
您需要使用
$('.burger-menu').click(function(){
$('.dropdown-content').toggleClass('show');
});
$(document).click(function(event) {
if(!$(event.target).closest('.burger-menu').length) {
if($('.dropdown-content').is(":visible")) {
$('.dropdown-content').toggleClass('show');
}
}
});
$(document).ready(function(){
$('.burger-menu').click(function(){
$('.dropdown-content').toggleClass('show');
});
$(document).click(function(event) {
if(!$(event.target).closest('.burger-menu').length) {
if($('.dropdown-content').is(":visible")) {
$('.dropdown-content').toggleClass('show');
}
}
});
});
.search {
display: block;
margin-left: 1300px;
margin-right: auto;
margin-bottom: auto;
margin-top: -30px;
cursor: pointer;
}
.burger-menu {
display: block;
margin-left: 100px;
margin-right: auto;
margin-bottom: auto;
margin-top: 1px;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #000000;
min-width: 250px;
z-index: 1;
}
.dropdown-content a {
color: white;
padding: 30px 16px;
text-align: center;
text-decoration: none;
display: block;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
font-size: 24px;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}
.dropdown-content a:hover {
background-color: #ffffff;
color: black;
}
.dropdown .dropdown-content.show {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #ffffff;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<nav>
<div class="dropdown">
<i class="fa fa-bars fa-2x burger-menu" ></i>
<div class="dropdown-content">
<a href="#">HEADWEAR</a>
<a href="#">HOODIES/JACKETS/LONG SLEEVES</a>
<a href="#">SHIRTS</a>
<a href="#">BOTTOMS</a>
<a href="#">TOTE BAGS</a>
</div>
</div>
<img class="search" src="images/search-icon.png" width="30" height="30">
</nav>
这篇关于如何从导航栏中的图标制作下拉菜单?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文