How to stop mobile menu from jumping when clicked?

Question

I am using the following mobile menu class within a responsive website

http://osvaldas.info/examples/drop-down-navigation-touch-friendly-and-responsive/

It uses the following HTML -

  #nav {
  width: 60em;
  /* 1000 */
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  position: absolute;
  top: 25%;
  left: 50%;
  margin-left: -30em;
  /* 30 480 */
}

#nav>span {
  display: none;
}

#nav li {
  position: relative;
}

#nav li a {
  color: #fff;
  display: block;
}

#nav li a:active {
  background-color: #c00 !important;
}

#nav span:after {
  width: 0;
  height: 0;
  border: 0.313em solid transparent;
  /* 5 */
  border-bottom: none;
  border-top-color: #efa585;
  content: '';
  vertical-align: middle;
  display: inline-block;
  position: relative;
  right: -0.313em;
  /* 5 */
}


/* first level */

#nav>ul {
  height: 3.75em;
  /* 60 */
  background-color: #e15a1f;
}

#nav>ul>li {
  width: 25%;
  height: 100%;
  float: left;
}

#nav>ul>li>a {
  height: 100%;
  font-size: 1.5em;
  /* 24 */
  line-height: 2.5em;
  /* 60 (24) */
  text-align: center;
}

#nav>ul>li:not( :last-child)>a {
  border-right: 1px solid #cc470d;
}

#nav>ul>li:hover>a,
#nav>ul:not( :hover)>li.active>a {
  background-color: #cc470d;
}


/* second level */

#nav li ul {
  background-color: #cc470d;
  display: none;
  position: absolute;
  top: 100%;
}

#nav li:hover ul {
  display: block;
  left: 0;
  right: 0;
}

#nav li:not( :first-child):hover ul {
  left: -1px;
}

#nav li ul a {
  font-size: 1.25em;
  /* 20 */
  border-top: 1px solid #e15a1f;
  padding: 0.75em;
  /* 15 (20) */
}

#nav li ul li a:hover,
#nav li ul:not( :hover) li.active a {
  background-color: #e15a1f;
}

@media only screen and ( max-width: 62.5em)
/* 1000 */

{
  #nav {
    width: 100%;
    position: static;
    margin: 0;
  }
}

@media only screen and ( max-width: 40em)
/* 640 */

{
  html {
    font-size: 75%;
    /* 12 */
  }
  #nav {
    position: relative;
    top: auto;
    left: auto;
  }
  #nav>span {
    width: 3.125em;
    /* 50 */
    height: 3.125em;
    /* 50 */
    text-align: left;
    text-indent: -9999px;
    background-color: #e15a1f;
    position: relative;
  }
  #nav>span:before,
  #nav>span:after {
    position: absolute;
    border: 2px solid #fff;
    top: 35%;
    left: 25%;
    right: 25%;
    content: '';
  }
  #nav>span:after {
    top: 60%;
  }
  #nav:not( :target)>span:first-of-type,
  #nav:target>span:last-of-type {
    display: block;
  }
  /* first level */
  #nav>ul {
    height: auto;
    display: none;
    position: absolute;
    left: 0;
    right: 0;
  }
  #nav:target>ul {
    display: block;
  }
  #nav>ul>li {
    width: 100%;
    float: none;
  }
  #nav>ul>li>span {
    height: auto;
    text-align: left;
    padding: 0 0.833em;
    /* 20 (24) */
  }
  #nav>ul>li:not( :last-child)>span {
    border-right: none;
    border-bottom: 1px solid #cc470d;
  }
  /* second level */
  #nav li ul {
    position: static;
    padding: 1.25em;
    /* 20 */
    padding-top: 0;
  }

<nav id="nav" role="navigation">
  <span href="#nav" title="Show navigation">Show navigation</span>
  <span href="#" title="Hide navigation">Hide navigation</span>
  <ul class="clearfix">
    <li><a href="">Home</a></li>
    <li>
      <a href="" aria-haspopup="true"><span>Blog</span></a>
      <ul>
        <li><a href="">Design</a></li>
        <li><a href="">HTML</a></li>
        <li><a href="">CSS</a></li>
        <li><a href="">JavaScript</a></li>
      </ul>
    </li>
    <li>
      <a href="" aria-haspopup="true"><span>Work</span></a>
      <ul>
        <li><a href="">Web Design</a></li>
        <li><a href="">Typography</a></li>
        <li><a href="">Front-End</a></li>
      </ul>
    </li>
    <li><a href="">About</a></li>
  </ul>
</nav>

It then utilizes the doubletaptogo.js to control touch taps on mobile.

everything looks/works cool - other than the fact that the browser jumps to the top of the #nav element when clicked - which is slightly annoying - (you can see in this url http://www.liquidclients.co.uk/landsail/ls4/tester.html at mobile screen width).

Is there a good cross-device / browser solution for the viewport to stay in place rather than jump to the #nav anchor point?

Alternatively can anyone recommend a better responsive menu solution?

Answer 1

If you're using jQuery, use something like this:

$("a[href*=#]").click(function(e) {
    e.preventDefault();
});  

Right now those "#" links think they're ID's so they'll try jumping to that part of the page. Since there's nothing there, it goes to the top.

Here is the fiddle with the added code. I added two classes for this to work correctly.

http://jsfiddle.net/Lb0hwj8p/

$('.nav-show').on('click',function(e){
    e.preventDefault();
    $('.menu').slideToggle();
});

Answer 2

try href="javascript:void(0)" instead of href="#"