使图像成为下拉菜单
[英]Make Image a DropDown menu
问题描述
Does anyone know how I can use an image as a nav bar,
有谁知道我如何将图像用作导航栏，
I want to use my logo as a button so that when users click on the logo, a drop down menu appears that fills the entire page.我想将我的徽标用作按钮，以便当用户单击徽标时，会出现一个填充整个页面的下拉菜单。
Currently I have a burger Tab and am implementing the drop down menu like so目前我有一个汉堡标签，正在实现下拉菜单
<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;
}
2 个解决方案
解决方案1
1 2017-12-26 22:32:13
Since you said you're fine with using JavaScript. 既然您说过，就可以使用JavaScript。
Add the following code to your HTML document: 将以下代码添加到您的HTML文档中：
<!DOCTYPE html>
...
<script type="text/javascript" src="thePathToYourJSfile.js"></script>
</body>
</html>
With CSS, style your menu however you wish to, but also add: 使用CSS，可以根据需要设置菜单样式，还可以添加：
display: none;
And your JavaScript could look something like the following: 您的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"
}
解决方案2
0 2017-12-26 22:17:54
Your html had some small errors. 您的html有一些小错误。 It should have been like this 应该是这样的
<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>
If you encounter any trouble just tell us 如果您遇到任何麻烦，请告诉我们
解决方案3
-3 2021-12-18 17:33:29
are any of you open for commission work?你们中有人愿意接受委托工作吗？ I am looking for someone to do exactly this.我正在寻找可以做到这一点的人。 I want a graphic as my menu drop down display and I have no real coding experience.我想要一个图形作为我的菜单下拉显示，但我没有真正的编码经验。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.