Chat with us, powered by LiveChat

Mobile sites have come a long way since flip phones and their websites have as well. One of the most common mobile elements is the jquery slideToggle menu. This mobile jquery event instantly gives any mobile site a more professional appearance and superior functionality.

Reference Jquery Library

Before we begin, you will need to reference the jquery library, which can be done through a library reference in your site <header>. Make sure your javascript references a recent version that supports slideToggle as well as does not interfere with any other jquery references you’ve made.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

Implementing Mobile Dropdown Menu in HTML

What we’re doing is instructing our website to show the menu, and give it a fancy slide-out effect when it does. We have two elements we need to worry about in our HTML and then a simple jquery command. First, we need to label our Navigation Button, then label our Navigation Menu Container. We’re going to use classes for this. Let’s give them both html id’s so we don’t interfere with any existing classes.

<div id="menuDrop" ><img src="/mobile/images/mobile-menu.png"/></div>

I’m going to call my Menu Button #menuDrop. This will wrap our navigational icon. When clicked, it will fire the jquery event and show our dropdown menu. So, let’s setup our menu.

<div id="menuBox" style="display:none;">
<ul>
<li><a href="/">Nav Item </a></li>
<li><a href="/">Nav Item </a></li>
<li><a href="/">Nav Item </a></li>
</ul></div>

I’m going to call my Naviagation Menu Container #menuBox and tuck my main navigation list inside of it. To make sure the menu is hidden on page load give it an inline-style of “display:none;”.

Defining event in Jquery

$('#menuDrop').click(function() {
 $('#menuBox').slideToggle('fast', function() {
 // Animation complete.
 });
 });

If you are including a javascript functions document, you may either place the event in that document or within the HTML. If you place it within the HTML, make sure to wrap it in <script> tags. What this says is when div id menuDrop(our nav button) is clicked, slideToggle div id menuBox(our nav menu). Once clicked again, the menu will hide itself as the display:none; takes over again.

*Want to see it live? Grab the corner of your browser window and narrow it until our own menu icon appears in the top right!