zana1789
zana1789

Reputation: 25

How to automatically close responsive navigation after link clicked?

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

Answers (1)

mtr.web
mtr.web

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

Related Questions