How to prevent page from jumping on menu open? - html

Question

I have a css menu and would like to open it without moving the rest of the page.
Here is the current fiddle: http://jsfiddle.net/50c1Lhe7/
HTML
<div class="logo-container large-6 columns">
<div class="large-3 columns">IMAGE</div>
<div class="large-9 columns">
<a href="/" rel="home">
<h1 class="site-title">WORDS</h1>
<div class="site-slogan">MORE WORDS</div>
</a>
</div>
</div>
<nav id="nav" role="navigation">
☰ MAIN MENU
☰ MAIN MENU
<ul id="main-menu" class="main-nav left">
<li class="first leaf" title="">Home</li>
<li class="expanded has-dropdown" title="">About
<ul class="dropdown">
<li class="expanded show-for-small">About</li>
<li class="first leaf">About</li>
<li class="leaf" title="">Our Team</li>
</ul>
</li>
<li class="leaf" title="">Publications</li>
<li class="leaf" title="">Events</li>
<li class="leaf active" title="">Blog</li>
<li class="last leaf">Contact</li>
</ul>
</nav>
SCSS
#nav{
display: none;
width: 45%;
height: 55px;
float: left;
padding: 20px;
#main-menu {
ul { float: none; }
li.expanded.show-for-small { display: none !important; }
}
#main-menu{
margin-top: 21px;
padding: 0;
width: 100vw;
}
}
#nav > a{
display: none;
}
#nav li {
position: relative;
list-style-type: none;
padding-top: 15px;
}
#nav > ul{
height: 3.75em;
}
#nav > ul > li {
width: 25%;
height: 100%;
float: left;
}
#nav li ul{
display: none;
position: absolute;
top: 100%;
}
#nav li:hover ul,
#nav li:focus ul { display: block; }
#nav {
position: relative;
z-index: 999;
display: block;
}
#nav:not( :target ) > a:first-of-type,
#nav:target > a:last-of-type { display: block; }
#nav > ul {
height: auto;
display: none;
position: absolute;
}
#nav > ul { left: 0; }
#nav:target > ul { display: block; }
#nav > ul > li {
width: 100%;
float: none;
padding: 10px 0 10px 20px;
text-transform: uppercase;
list-style-type: none;
}
#nav > ul > li.first.leaf.active { padding-top: 5px; }
#nav li ul { position: static; }
Since the menu works by targetting the nav id, whenever the menu is clicked to open it drops down to the nav section. How would I change this so that it can be clicked and open without moving to the section? If this can be done easier with javascript please let me know.

Answer 1

The jump is a common problem for using :target for menu, suggest to use checkbox instead, it also works on more browsers. Simplified demo follows.
JSFIDDLE DEMO
/*main menu*/
nav {
margin-top: 100px;
}
.menu-label {
display: block;
background: yellow;
}
.main-nav {
display: none;
}
.menu-checkbox {
display: none;
}
.menu-checkbox:checked + .main-nav {
display: block;
}
/*sub menu*/
.dropdown {
display: none;
}
.main-nav li:hover .dropdown{
display: block;
}
<nav>
<label for="menu-1" class="menu-label">☰ MAIN MENU</label>
<input id="menu-1" class="menu-checkbox" type="checkbox" />
<ul id="main-menu" class="main-nav left">
<li class="first leaf" title="">Home</li>
<li class="expanded has-dropdown" title="">
About
<ul class="dropdown">
<li class="expanded show-for-small">Sub menu 1</li>
<li class="first leaf">Sub menu 2</li>
<li class="leaf" title="">Sub menu 3</li>
</ul>
</li>
<li class="leaf" title="">Publications</li>
<li class="leaf" title="">Events</li>
<li class="leaf active" title="">Blog</li>
<li class="last leaf">Contact</li>
</ul>
</nav>