Adding multiple actions to HTML anchor

Question

Fiddle

PS - The X is usually a Font Awesome 3 bar icon. Click on it for menu drop-down.

I'm also aware the code is a mess, I'm rebuilding it now into a much cleaner version.

<nav>
    <label for="toggle"> <span>X</span> </label>
<input id="toggle" type="checkbox" />
<div class="mobnavtxt to-be-changed">
    <a data-scroll href="#about">ABOUT</a>
    <a data-scroll href="#services">SERVICES</a>
    <a data-scroll href="#blog1">BLOG</a>
    <a data-scroll href="#blog2">REVIEWS</a>
    <a data-scroll href="#contact">CONTACT</a>
    <span class="links">
        <a href="#"><i class="fa fa-facebook"></i>
        </a>
        <a href="#"><i class="fa fa-instagram"></i>
        </a>
        <a href="#"><i class="fa fa-twitter"></i>
        </a>
        </span>
    <!-- links -->
    <span class="email"><a href="mailto: email@email.com">email@email.com</a></span>
</div>
<!-- mobnavtxt -->
</nav>

---

.mobnavtxt {
    width: 100%;
    height: 50vh;
    position: absolute;
    top: 0;
    left: 0;
    background: #fff;
    display: flex;
    z-index: -1;
    justify-content: space-around;
    align-items: flex-start;
    flex-direction: column;
    padding: 50PX 30px 30PX 40PX;
    box-sizing: border-box;
    transition: .2s;
}

.mobnavtxt .links {
    margin: 15px 0;
    letter-spacing: 10px;
}

.mobnavtxt a {
    text-decoration: none;
    color: #222;
}

label {
    background: #fff;
}

input[type=checkbox] {
    display: none;
}

input[type=checkbox]~.to-be-changed {
    top: -60vh;
}

input[type=checkbox]:checked~.to-be-changed {
    top: 0;
}

nav {
    width: 100%;
    height: 50px;
    background: #fff;
    position: fixed;
    top: 0;
    left: 0;
    padding: 20px;
    box-sizing: border-box;
    z-index: 1;
}

---

This is my mobile level menu.

Currently I need to press the X to open the menu, I choose a link which is set to scroll to position, then I need to press the X again to close the menu.

I'd like to set it up so this happens:

1. Press X to open menu
2. Select link to scroll to.
3. On select link, two actions happen: scroll to target AND menu closes.

How do I add achieve this? I'm a JS newbie and currently only know enough to edit the plugins/pieces of code I've cut into my builds.

Thanks for any help.

Answer 1

According to your JSFiddle, seems that you're stuck on point 3, meaning scroll to target and AND close the menu.

SCROLL TO TARGET

Good news for you, the scroll to target does not required any Javascript. I assume you know about HTML Bookmark link

<a href="#my-id">My link</a> is connected to a div like <div id="my-id"> So the jump to section is directly handled by the browser

W3C Sample of Bookmark link

The scroll effect can be achieved by adding this CSS property to your page

body {
    scroll-behavior: smooth;
}

CLOSE MENU

As the opening is ruled by a checkbox, which delegates with CSS the opening of your menu, you just need a JS that will uncheck it. Check here for this purpose, Code is quite simple

Check/Uncheck checkbox with JavaScript?

Answer 2

$(document).ready(function(){
  $(".menu-bars").on("click", function(){
    $("nav ul").toggleClass("showing");
  });

  $("nav ul li").on("click", function(){
    $("nav ul").removeClass("showing");
  });
});

nav ul{
  width: 100%;
  background-color: #ac5463;
  overflow: hidden;
  color: #fff;
  padding: 0;
  text-align: center;
  margin: 0;
  transition: all 200ms ease-in-out;
}

nav ul li{
  display: inline-block;
  padding: 20px;
}

nav ul li a{
  text-decoration: none;
  color: inherit;
}

nav ul li:hover {
  background-color: #ac5480;
}

.menu-bars{
  width: 100%;
  background-color: #005c48;
  text-align: right;
  box-shadow: border-box;
  padding: 20px 0px;
  cursor: pointer;
  color: #fff;
  display: none;
}

.menu-bars .fas{
  margin-right: 20px;
}

nav ul{
    max-height: 0px;
    position: fixed;
    top: 4.5em;
  }

  nav ul li{
    box-sizing: border-box;
    width: 100%;
    padding: 15px;
    text-align: left;
  }

  .menu-bars{
    display: block;
    position: fixed;
    top: 0;
  }

  .showing{
    max-height: 20em;
    position: fixed;
    top: 4.5em;
  }
  .section_content{
  height: 400px;
background-color: #cccccc;
padding-top: 60px;
  }
  .jquery{
  background-color: yellow;
  }
  .script{
  background-color: red;
  }
  .net{
  background-color: black;
  }
  .contact{
  background-color: grey;
  }
  .about{
  background-color: #f2f2f2;
  }
  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" >

<nav>
  <div class="menu-bars">
    <i class="fas fa-bars fa-2x"></i>  
  </div>
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#jQuery">jQuery</a></li>
    <li><a href="#script">Script</a></li>
    <li><a href="#net">Net</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#about">About</a></li>
  </ul>
</nav>

<div class="section_content" id="home">
<h2>Home</h2>
</div>
<div class="section_content jquery" id="jQuery">
<h2>jQuery</h2>
</div>
<div class="section_content script" id="script">
<h2>Script</h2>
</div>
<div class="section_content net" id="net">
<h2>Net</h2>
</div>
<div class="section_content contact" id="contact">
<h2>Contact</h2>
</div>
<div class="section_content about" id="about">
<h2>About</h2>
</div>

I've solve your problem. I hope It will help you to get your goal. when you click the bar icon the menu will open and close automatically.