Reputation: 25
I have a single-page layout for my website.
At 767px, the menu changes to adjust different resolutions. When a link is clicked, the page scrolls to the right position, but the menu stays open and you have to close it by yourself.
I tried different JavaScript codes I found on web, but none of them seems to be working for my code. I'm not very experienced is JS so help would be great.
How can I solve this?
$(document).ready(function() {
$('.hb-button').on('click', function() {
$('nav ul').toggleClass('show');
});
});
nav {
background: #F7B0C9;
overflow: hidden;
position: fixed;
width: 100%;
z-index: 5;
-moz-box-shadow: -2px -7px 47px 9px rgba(0, 0, 0, 0.35);
-webkit-box-shadow: -2px -7px 47px 9px rgba(0, 0, 0, 0.35);
box-shadow: -2px -7px 47px 9px rgba(0, 0, 0, 0.35);
}
.logo-section {
float: left;
padding: 25px;
}
.hb-button {
float: right;
background: #F7B0C9;
color: #ffffff;
border: none;
font-size: 20px;
padding-top: -5px;
padding-right: 5px;
padding-bottom: 15px;
padding-left: 5px;
border-radius: 3px;
cursor: pointer;
display: none;
}
nav a {
text-decoration: none;
color: white;
font-size: 20px;
padding: 5px;
}
nav ul {
float: right;
overflow: hidden;
color: #fff;
margin: 0 0 5px 0;
padding: 0;
text-align: center;
transition: max-height 0.5s;
-webkit-transition: max-height 0.5s;
-moz-transition: max-height 0.5s;
-ms-transition: max-height 0.5s;
-o-transition: max-height 0.5s;
}
nav ul li {
float: left;
display: inline-block;
padding: 20px;
}
li>a {
position: relative;
color: white;
text-decoration: none;
}
li>a:hover {
color: #FBD7E0;
}
li>a:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #FBD7E0;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
li>a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
@media screen and (max-width: 768px) {
.logo-section {
float: none;
}
nav ul {
background: #F7B0C9;
color: white;
max-height: 0;
width: 100%;
}
nav ul.show {
max-height: 20em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 15px;
}
.hb-button {
display: inline;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<nav>
<div class="logo-section">
<a href="" class="logo" title=""></a>
<button class="hb-button"><i class="fa fa-bars"></i></button>
</div>
<ul>
<li><a href="#domov">Domov</a></li>
<li><a href="#o_nas">O nas</a></li>
<li><a href="#ponudba">Ponudba</a></li>
<li><a href="#kontakt">Kontakt</a></li>
</ul>
</nav>
edit: added html and css
Upvotes: 1
Views: 54
Reputation: 1515
I sort of cheated and looked at your code, and you can duplicate the existing function in /js/responsive_nav.js
to close the menu for any of the links in your navigation the same way it does for your .hb-button
. The full file would look like this:
// file found here: slascicarstvo-marta.si/js/responsive_nav.js
$(document).ready(function(){
$('.hb-button').on('click', function(){
$('nav ul').toggleClass('show');
});
$('nav ul li a').on('click', function(){
$('nav ul').toggleClass('show');
});
});
Upvotes: 2