Call me!
cell: 612-730-9540

jQuery show/hide mobile menu

Project Summer 2013:

Build a jQuery show/hide mobile menu without using a jQuery plugin

To view this menu either:

  1. resize this pages browser window smaller than 649px, or
  2. load up this page in an online mobile emulator, or
  3. view this page in a mobile phone
  4. you may need to refresh the page to reset the cache

The Code Reveal:

First: The HTML


<div class="mobile-menu">
    <a class="button">Menu</a>
</div>
<nav id="main" class="hide">
    <ul>
        <li><a href="page1.html">Page 1</a></li>
        <li><a href="page2.html">Page 2</a></li>
        <li><a href="page3.html">Page 3</a></li>
        <li><a href="page4.html">Page 4</a></li>
    </ul>
</nav>

Next: The Script


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
$(document).ready(function(){
    $('.button').click(function(){
        if ($('#main').hasClass('hide')) {
          $('#main').removeClass('hide').addClass('show');
        } 
        else {
          $('#main').removeClass('show').addClass('hide');
        }
    });
});

Place the script inbetween the <head> </head> tags.

Lastly: The CSS


/* start show-hide-menu.html css */
.mobile-menu { display: none; }
/* end show-hide-menu.html css */

@media screen and (max-width: 649px){
    /* start show-hide-menu.html css */
    .mobile-menu { display: block; clear: both; width: 100%; padding: 0; text-align: right; }
        .mobile-menu a, .mobile-menu a:visited { display: inline-block; padding: 15px; font-weight: bold; color: #fff; background: #000; text-decoration: none; text-transform: uppercase; cursor: pointer; }
        .mobile-menu a:hover, .mobile-menu a:active { color: #fff; background: #082a4d; text-decoration: none; }
    .show-hide-menu #main { text-align: left; }
        .show-hide-menu .hide { display: none; }
        .show-hide-menu .show { display: block; }
            .show-hide-menu #main ul li { display: block; }
                .show-hide-menu #main ul a, .show-hide-menu #main ul a:visited { display: block; padding: 15px; color: #fff; background: #000; }
                .show-hide-menu #main ul a:hover, .show-hide-menu #main ul a:active { color: #fff; background: #082a4d; }
                .show-hide-menu #main ul a.firstItem { padding: 15px; }
    /* end show-hide-menu.html css */
}

This mobile menu is NOT developed for devices above a breakpoint of 649px.

Contact me

If you would like to speak with me more about my qualifications, experiences and what I can do for you please feel free to contact me.