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

时间：2017-10-18 06:00:26

标签： html css drop-down-menu menu navigation

我创建了我的下拉菜单，在图标悬停时打开，但我希望它实际打开时点击而不是悬停，并在菜单外单击时关闭。图标是导航栏左侧的简单汉堡菜单图标，用于打开附在页面左侧的标记栏。如果对代码进行最小的更改，我将如何实现我想要的目标？

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
	<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>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：1)

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

使用jQuery，您可以使用slideToggle（）

获得所需的效果

＆＃13;
＆＃13; 
"theme_detail": [
            {
                "id": 1,
                "parent_theme_id": null,
                "image_url": "no_image",
                "index_value": 1,
                "status": "active",
                "theme_detail": [
                    {
                        "id": 4,
                        "theme_id": 1,
                        "language_code": "bn",
                        "theme_name": "থিম 1",
                        "theme_subtitle": "থিম 1 উপশিরোনাম",
                        "status": "active"
                    },
                    {
                        "id": 1,
                        "theme_id": 1,
                        "language_code": "en",
                        "theme_name": "Theme 1",
                        "theme_subtitle": "Theme 1 Subtitle",
                        "status": "active"
                    }
                ],
                "parent_recursive": [
                    {
                        "id": 2,
                        "parent_theme_id": 1,
                        "image_url": "no_image",
                        "index_value": 1,
                        "status": "active",
                        "theme_detail": [
                            {
                                "id": 5,
                                "theme_id": 2,
                                "language_code": "bn",
                                "theme_name": "থিম 2",
                                "theme_subtitle": "থিম 2 উপশিরোনাম",
                                "status": "active"
                            },
                            {
                                "id": 2,
                                "theme_id": 2,
                                "language_code": "en",
                                "theme_name": "Theme 2",
                                "theme_subtitle": "Theme 2 Subtitle",
                                "status": "active"
                            }
                        ],
                        "parent_recursive": [
                            {
                                "id": 3,
                                "parent_theme_id": 2,
                                "image_url": "no_image",
                                "index_value": 1,
                                "status": "active",
                                "theme_detail": [
                                    {
                                        "id": 3,
                                        "theme_id": 3,
                                        "language_code": "en",
                                        "theme_name": "Theme 3",
                                        "theme_subtitle": "Theme 3 Subtitle",
                                        "status": "active"
                                    },
                                    {
                                        "id": 6,
                                        "theme_id": 3,
                                        "language_code": "bn",
                                        "theme_name": "থিম 3",
                                        "theme_subtitle": "থিম 3 উপশিরোনাম",
                                        "status": "active"
                                    }
                                ],
                                "parent_recursive": [
                                    {
                                        "id": 4,
                                        "parent_theme_id": 3,
                                        "image_url": "no_image",
                                        "index_value": 1,
                                        "status": "active",
                                        "theme_detail": [
                                            {
                                                "id": 7,
                                                "theme_id": 4,
                                                "language_code": "bn",
                                                "theme_name": "থিম 4",
                                                "theme_subtitle": "থিম 4 উপশিরোনাম",
                                                "status": "active"
                                            },
                                            {
                                                "id": 9,
                                                "theme_id": 4,
                                                "language_code": "en",
                                                "theme_name": "Theme 4",
                                                "theme_subtitle": "Theme 4 Subtitle",
                                                "status": "active"
                                            }
                                        ],
                                        "parent_recursive": []
                                    }
                                ]
                            },
                            {
                                "id": 5,
                                "parent_theme_id": 2,
                                "image_url": "no_image",
                                "index_value": 1,
                                "status": "active",
                                "theme_detail": [
                                    {
                                        "id": 8,
                                        "theme_id": 5,
                                        "language_code": "bn",
                                        "theme_name": "থিম 5",
                                        "theme_subtitle": "থিম 5 উপশিরোনাম",
                                        "status": "active"
                                    },
                                    {
                                        "id": 10,
                                        "theme_id": 5,
                                        "language_code": "en",
                                        "theme_name": "Theme 5",
                                        "theme_subtitle": "Theme 5 Subtitle",
                                        "status": "active"
                                    }
                                ],
                                "parent_recursive": []
                            }
                        ]
                    }
                ]
            }
        ]
＆＃13; 
$(".icon").on("click", function(){
  $('.dropdown-content').slideToggle();
});
＆＃13; 
.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 */
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

你需要使用

$('.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>

相关问题
最新问题