html - How to stop mobile menu from jumping when clicked? -

html - How to stop mobile menu from jumping when clicked? -

i using next mobile menu class within responsive website

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

it uses next html -

<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>

and next css -

#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 { 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 > { height: 100%; font-size: 1.5em; /* 24 */ line-height: 2.5em; /* 60 (24) */ text-align: center; } #nav > ul > li:not( :last-child ) > { border-right: 1px solid #cc470d; } #nav > ul > li:hover > a, #nav > ul:not( :hover ) > li.active > { background-color: #cc470d; } /* sec 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 { 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 { background-color: #e15a1f; } @media screen , ( max-width: 62.5em ) /* 1000 */ { #nav { width: 100%; position: static; margin: 0; } } @media screen , ( 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; } /* sec level */ #nav li ul { position: static; padding: 1.25em; /* 20 */ padding-top: 0; }

it utilizes doubletaptogo.js command touch taps on mobile.

everything looks/works cool - other fact browser jumps top of #nav element when clicked - annoying - (you can see in url http://www.liquidclients.co.uk/landsail/ls4/tester.html @ mobile screen width).

is there cross-device / browser solution viewport remain in place rather jump #nav anchor point?

alternatively can recommend improve responsive menu solution?

if you're using jquery, utilize this:

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

right "#" links think they're id's they'll seek jumping part of page. since there's nil there, goes top.

here fiddle added code. added 2 classes work correctly.

http://jsfiddle.net/lb0hwj8p/

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

html css html5 css3