Make Image a DropDown menu
Question
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 answers
solution1
1 2017-12-26 22:32:13
Since you said you're fine with using JavaScript.
Add the following code to your HTML document:
<!DOCTYPE html>
...
<script type="text/javascript" src="thePathToYourJSfile.js"></script>
</body>
</html>
With CSS, style your menu however you wish to, but also add:
display: none;
And your JavaScript could look something like the following:
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"
}
solution2
0 2017-12-26 22:17:54
Your html had some small errors. 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
solution3
-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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.