How to prevent page from jumping on menu open?

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">
    <a href="#nav" title="Show navigation">☰ MAIN MENU</a>
    <a href="#" title="Hide navigation">☰ MAIN MENU</a>
    <ul id="main-menu" class="main-nav left">
        <li class="first leaf" title=""><a href="/" title="">Home</a></li>
        <li class="expanded has-dropdown" title=""><a href="/" title="">About</a> 
            <ul class="dropdown">
                <li class="expanded show-for-small"><a href="/" title="">About</a></li>
                <li class="first leaf"><a href="/">About</a></li>
                <li class="leaf" title=""><a href="/" title="">Our Team</a></li>
            </ul>
        </li>
        <li class="leaf" title=""><a href="/" title="">Publications</a></li>
        <li class="leaf" title=""><a href="/" title="">Events</a></li>
        <li class="leaf active" title=""><a href="/" title="" class="active">Blog</a></li>
        <li class="last leaf"><a href="/">Contact</a></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=""><a href="/" title="">Home</a></li>
        <li class="expanded has-dropdown" title="">
            <a href="/" title="">About</a> 
            <ul class="dropdown">
                <li class="expanded show-for-small"><a href="/" title="">Sub menu 1</a></li>
                <li class="first leaf"><a href="/">Sub menu 2</a></li>
                <li class="leaf" title=""><a href="/" title="">Sub menu 3</a></li>
            </ul>
        </li>
        <li class="leaf" title=""><a href="/" title="">Publications</a></li>
        <li class="leaf" title=""><a href="/" title="">Events</a></li>
        <li class="leaf active" title=""><a href="/" title="" class="active">Blog</a></li>
        <li class="last leaf"><a href="/">Contact</a></li>
    </ul>
</nav>