<section id="jquery-side-nav" class="grid-pad">
    <script type="text/javascript">
        $(document).ready(function () {
            $('#top-nav-wrapper').hide(0);
            $('#hamburger').click(function () {
                $("#top-nav-wrapper").toggle('slide');
                $('#hamburger').toggleClass('open');
            });

            $('#top-nav li').hover(function () {
                $(this).toggleClass('parent');
            });
        });
    </script>
    <header class="masthead">
        <h2>
            jQuery Side Nav
        </h2>

        <button id="hamburger" class="button">MENU</button>
        <nav id="top-nav-wrapper">
            <ul id="top-nav">
                <li>
                    <a href="#">Menu Item</a>
                </li>
                <li>
                    <a href="#">Menu Item</a>
                </li>
                <li>
                    <a href="#">Menu Item</a>
                </li>
                <li>
                    <a href="#">Menu Item</a>
                </li>
            </ul>
        </nav>
    </header>
    <section class="container">
        <p><br/>Click the <strong>OPEN MENU</strong> link in the top right. <br/><br/></p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, aut cumque dolor enim libero nulla rem repellat sequi similique ullam. Deserunt, dolor ducimus ea expedita fuga fugiat inventore ipsam iure laudantium molestiae odio quas soluta temporibus totam voluptas voluptates voluptatum?</p>
        <p>Animi beatae cupiditate exercitationem incidunt magni non quod ratione totam voluptates. Dicta itaque quaerat reprehenderit veritatis voluptatibus. Enim facilis nemo ut. Consectetur explicabo fuga illum iste reiciendis reprehenderit similique ullam velit voluptas voluptate? Consequatur eaque mollitia nesciunt odio qui! Nostrum!</p>

        <p>Cumque exercitationem quas voluptatem! Dolor esse modi nam rerum voluptates! Ad aliquam, animi culpa doloremque fuga nostrum officia pariatur quidem. Accusantium aliquid blanditiis commodi cupiditate deleniti eveniet facere id, illo ipsum itaque modi molestiae, officia quaerat quidem repellendus sapiente suscipit.</p>

        <p>Deserunt eveniet fugit provident quod. Commodi delectus dignissimos molestias odio quaerat quisquam sit, voluptate voluptatibus? Beatae culpa debitis dolorum earum harum incidunt, laborum numquam obcaecati, officiis omnis optio pariatur quas quidem quisquam quo rerum suscipit tenetur ullam vel voluptatem, voluptates!</p>

        <p>Ab accusantium delectus error est facere quae qui sint voluptas. Alias commodi ea eveniet facere illo rem totam vel. Consequuntur dolorum ducimus fugiat ipsam minus, quae quasi quibusdam repudiandae. Ab at cumque enim facilis nam optio pariatur quis sed, soluta!</p>
        <p>Accusamus ad adipisci commodi eligendi error et illo, incidunt, inventore iusto mollitia necessitatibus officiis perspiciatis rem sunt velit veritatis vero. Dignissimos fuga impedit porro? Aliquam debitis delectus excepturi facere ipsa iste minus non provident ratione tempore totam velit, voluptatum. Magnam!</p>

        <p>Aspernatur assumenda, atque aut autem consequuntur corporis dignissimos dolor eius enim eum fuga hic molestiae nam nihil nostrum quae quisquam saepe tempora temporibus veniam! Animi architecto, asperiores dolor eius eos eum fugiat minima pariatur porro possimus rem tempora vero voluptatum?</p>

        <p>Assumenda consequatur delectus eligendi modi tempore? Aperiam asperiores commodi, consectetur consequatur consequuntur dicta eaque eligendi, eum ex ipsam laudantium magnam molestiae nostrum numquam officiis porro quia quos reiciendis saepe sapiente tempora totam ut voluptate. Consequatur dolore nemo neque quis sint.</p>

        <p>Distinctio et fugit iste rerum ullam? Corporis, dolores quae? Aut blanditiis corporis dolores facere id ipsum iste iure molestiae nam, necessitatibus nostrum odit sit tempore velit voluptas voluptates voluptatum. Adipisci dolores eveniet nesciunt odit pariatur, porro repellat? Cum recusandae, sapiente!</p>

        <p>A adipisci aliquid amet animi autem blanditiis commodi cum cumque deserunt doloremque enim eos esse ex expedita incidunt, minima minus natus nisi officia officiis perferendis praesentium quis quod quos rerum suscipit tempora velit. Cum dolor eveniet odit repellendus, voluptatem voluptatum!</p>
    </section>
</section>