使图像成为DropDown菜单
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使图像成为DropDown菜单相关的知识，希望对你有一定的参考价值。
有谁知道如何将图像用作导航栏，
我想将我的徽标用作按钮，以便当用户点击徽标时，会出现一个填充整个页面的下拉菜单。
目前我有一个汉堡标签，我正在实施下拉菜单
<nav class="navbar navbar-inverse">
<div class="container-field">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar right">
<li class="active"><a href="Health.html">Health</a></li>
<li><a href="Insurance.html">Insurance</a></li>
<li><a href="Track.html">Track</a></li>
</ul>
</div>
</div>
</nav>
.navbar {
margin-bottom: 0;
border-radius: 0;
background-color: darkgray;
color: #fff;
padding: 1% 0;
font-size: 1.2em;
border:0;
background-image: i
}
.navbar-brand {
float: right;
min-height: 55px;
padding: 0 15px 5px;
}
.navbar-inverse .navbar-nav .active a, .navbar-inverse .navbar-nav .active
a:focus, .navbar-inverse .navbar-nav .active a:hover {
color: #fff;
background-color: darkgray;
}
.navbar-inverse .navbar-nav li a {
Color:#D5D5D5;
}
答案
既然你说你使用javascript很好。
将以下代码添加到HTML文档中：
<!DOCTYPE html>
...
<script type="text/javascript" src="thePathToYourJSfile.js"></script>
</body>
</html>
使用CSS，可以根据需要设置菜单样式，还可以添加：
display: none;
您的JavaScript可能如下所示：
var logo = document.getElementById('id-of-your-logo')
var menu = document.getElementById('id-of-your-menu')
// this attaches a listener for the click event to your logo element
logo.onclick = function() {
// when your logo is clicked, the code in this function will execute
// the code below checks whether or not the menu is already displaying, and then displays the menu or hides it accordingly
menu.style.display = window.getComputedStyle(menu).display !== "none" ? "none" : "block"
}
另一答案
你的HTML有一些小错误。应该是这样的
<nav class="navbar navbar-inverse">
<div class="container-field">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar right">
<li class="active"><a href="Health.html">Health</a></li>
<li><a href="Insurance.html">Insurance</a></li>
<li><a href="Track.html">Track</a></li>
</ul>
</div>
</div>
</nav>
如果您遇到任何麻烦，请告诉我们
以上是关于使图像成为DropDown菜单的主要内容，如果未能解决你的问题，请参考以下文章