html - 如何从导航栏中的图标制作下拉菜单？

Question

我已经创建了我的下拉菜单以在图标悬停时打开，但我希望它实际在单击时打开而不是悬停并在菜单外单击时关闭。该图标是导航栏左侧的一个简单的汉堡菜单图标，它会打开一个附加到页面左侧的下拉栏。如何在对代码进行最少更改的情况下实现我想要的目标？

.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>

Answer 1

我所知道的仅使用 CSS 执行此操作的唯一方法是使用复选框来向上/向下转换菜单。我看到您正在使用输入标签，所以也许还有另一种纯 CSS 方法可以做到这一点。

使用 jQuery，您可以使用 slideToggle() 获得所需的效果

$(".icon").on("click", function(){
  $('.dropdown-content').slideToggle();
});

.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:hover .dropbtn {
    background-color: #ffffff;
}


/*# sourceMappingURL= main.css.map */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
        <div class="dropdown">
            <h3 class="icon">MY ICON</h3>
            <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>