I have tweaked W3Schools' responsive navbar with dropdown for my local bowling club's website which looks and works fine on pc and mobile.
With one exception - on mobile, sub-menus are initially hidden and then displayed when a button is clicked. What I would like to do is close them again when the same button is clicked. At present, this can only be achieved by clicking elsewhere on the screen.
I'm fairly new to programming (in particular Javascript) and have been unable to find a solution, therefore any help/suggestions would be gratefully appreciated.
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}@media only screen and (max-width: 499px) {
/* Set width of nav */
nav {
min-width: 100%;
}
/* Set width and style of primary container */
.topnav {
overflow: hidden;
background-color: #333;
}
/* Insert home icon */
.topnav #homebutton {
line-height: 3rem;
font-size: 2rem;
}
/* Style primary and secondary <a> links */
.topnav a {
float: left;
display: block;
color: #ffffff;
text-align: center;
padding: 0 10px;
text-decoration: none;
font-size: 1rem;
line-height: 3rem;
}
/* Set width and border of primary <a> links */
.topnav>a {
width: auto;
}
/* Set width of dropdown container */
.dropdown {
float: left;
overflow: hidden;
line-height: 3rem;
}
/* Set width, border and style of primary dropdown buttons */
.dropdown .dropbtn {
font-size: 1rem;
border: none;
outline: none;
color: #ffffff;
padding: 0 10px;
background-color: inherit;
font-family: inherit;
margin: 0;
line-height: 3rem;
width: auto;
}
/* Hide and style secondary dropdown container */
.dropdown-content {
display: none;
position: absolute;
background-color: #f2f2f2;
z-index: 1;
}
/* Style secondary dropdown <a> links */
.dropdown-content a {
float: none;
color: black;
padding: 0 30px;
text-decoration: none;
display: block;
text-align: left;
line-height: 3rem;
}
/* Style primary links on hover */
.topnav a:hover,
.dropdown:hover .dropbtn {
background-color: #555;
color: #ffffff;
}
/* Style secondary links on hover */
.dropdown-content a:hover {
background-color: #ddd;
color: #000000;
}
/* Display secondary container */
.dropdown:hover .dropdown-content {
display: block;
}
@media screen and (max-width: 499px) {
.topnav a:not(:first-child),
.dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 499px) {
.topnav.responsive {
position: relative;
}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
border-bottom: 1px solid black;
}
.topnav.responsive .dropdown {
float: none;
}
.topnav.responsive .dropdown-content {
position: relative;
}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
border-bottom: 1px solid black;
}
}
}
@media only screen and (min-width: 500px) {
/* Set width of nav */
nav {
min-width: 100%;
}
/* Set width and style of primary container */
.topnav {
overflow: hidden;
background-color: #333;
width: 100%;
}
/* Insert home icon */
.topnav #homebutton {
line-height: 3rem;
font-size: 1.5rem;
}
/* Style primary and secondary <a> links */
.topnav a {
float: left;
display: block;
color: #ffffff;
text-align: center;
padding: 0 0;
text-decoration: none;
font-size: 1rem;
line-height: 3rem;
}
/* Set width and border of primary <a> links */
.topnav>a {
width: calc(14.28571428571429% - 1px);
border-right: 1px solid #ffffff;
}
/* Set width and border of penultimate primary <a> link */
.topnav>a:nth-last-of-type(2) {
width: 14.28571428571429%;
border-right: 0;
}
/* Hide hamburger */
.topnav .icon {
display: none;
}
/* Set width of dropdown container */
.dropdown {
float: left;
overflow: hidden;
line-height: 3rem;
width: 14.28571428571429%;
}
/* Set width, border and style of primary dropdown buttons */
.dropdown .dropbtn {
font-size: 1rem;
border: none;
outline: none;
color: #ffffff;
padding: 0 0;
background-color: inherit;
font-family: inherit;
margin: 0;
line-height: 3rem;
width: calc(100% - 1px);
border-right: 1px solid #ffffff;
}
/* Hide and style secondary dropdown container */
.dropdown-content {
display: none;
position: absolute;
background-color: #f2f2f2;
width: 14.28571428571429%;
z-index: 1;
}
/* Style secondary dropdown <a> links */
.dropdown-content a {
float: none;
color: black;
padding: 0 10px;
text-decoration: none;
display: block;
text-align: left;
line-height: 3rem;
}
/* Style primary links on hover */
.topnav a:hover,
.dropdown:hover .dropbtn {
background-color: #555;
color: #ffffff;
}
/* Style secondary links on hover */
.dropdown-content a:hover {
background-color: #ddd;
color: #000000;
}
/* Display secondary container */
.dropdown:hover .dropdown-content {
display: block;
}
}<nav>
<div class="topnav" id="myTopnav">
<a href="#" id="homebutton" class="fa fa-home">Item 1</a>
<div class="dropdown">
<button class="dropbtn">Item 2
<i class="fa fa-caret-down"></i>
</button>
<div class="#">
<a href="#">Item 2.1</a>
<a href="#">Item 2.2</a>
</div>
</div>
<a href="#">Item 3</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">☰
</a>
</div>
</nav>Here is a simple example. Now you have to integrate the functions of my example into your example ... But I'll leave that up to you :) If it doesn't work you can contact me or give me your real project to manage this problem!
var showMenuText = $('#toggle').text();
var hideMenuText = 'Close';
$('#navigation ul').hide();
$('#navigation ul a.active+ul').show();
hideMenu = function() {
$('#navigation ul#menu').hide();
$('#navigation').removeClass('open');
$('#toggle').text(showMenuText);
}
$('#toggle').click(function(event){
event.stopPropagation(); event.preventDefault();
$('#navigation ul#menu').toggle();
$('#navigation').toggleClass('open');
var toggleText = $('#toggle').text();
(toggleText == showMenuText) ? $(this).text(hideMenuText) : $(this).text(showMenuText);
});
$('ul#menu > li > a').click(function(event){
$this = $(this);
if( $this.hasClass('page') ) parent.location = $this.attr('href');
if( $this.hasClass('home') ) { parent.location = '/'; }
event.preventDefault(); event.stopPropagation();
if( $this.hasClass('active') ) var justclosed = true;
$('a.active').removeClass('active').next('ul').hide();
if(!justclosed) $this.addClass('active').next('ul').show();
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="navigation">
<p><a href="" id="toggle">Menu</a></p>
<ul id="menu">
<li>
<a href="testen.html" class="book-campaigns">Menu 1</a>
<ul>
<li><a href="testen.html" class="lol">lol</a></li>
<li><a href="#" class="lol">lol2</a></li>
<li><a href="#" class="lol">lol</a></li>
<li><a href="#" class="lol">lol2</a></li>
</ul>
</li>
<li>
<a href="/#" class="book-campaigns">Menu 2</a>
<ul>
<li><a href="#" class="lol">lol</a></li>
<li><a href="#" class="lol">lol2</a></li>
<li><a href="#" class="lol">lol</a></li>
<li><a href="#" class="lol">lol2</a></li>
</ul>
</li>
<a href="https://upload.wikimedia.org/wikipedia/commons/f/f7/Stack_Overflow_logo.png" class="book-campaigns">Stackoverflow</a>
<li>
<a href="/#" class="book-campaigns">Menu 3</a>
<ul>
<li><a href="#" class="lol">lol</a></li>
<li><a href="#" class="lol">lol2</a></li>
<li><a href="#" class="lol">lol</a></li>
<li><a href="#" class="lol">lol2</a></li>
</ul>
</li>
</ul>Good succeed!