Themeforest

jQuery Tutorial – Create a jQuery Menu Slider

jQuery Menu Slider

In the following tutorial we are going to go through how to create a jQuery menu slider similar to the one used in our own website’s mega menu navigation (see “WordPress Plugins” menu item).

View Demo Download Source Code

The HTML

The HTML is very simple and basically includes:

  • A wrapper (“#menu-slider”) – only used for styling the jquery menu slider
  • An unordered list of text links (“#list-links”), which will make up the menu section
  • A list of images (“#list-images”) including captions, which will be used to create the slider
<div id="menu-slider">
    <ul id="list-links">
        <li class="hover"><a href="/blog/index.php/wordpress-plugins/wordpress-plugin-jquery-drop-down-mega-menu-widget/">Mega Menu</a></li>
        <li><a href="/blog/index.php/wordpress-plugins/wordpress-plugin-jquery-vertical-mega-menu-widget/">Vertical Mega Menu</a></li>
        <li><a href="/blog/index.php/wordpress-plugins/wordpress-plugin-jquery-vertical-accordion-menu-widget/">Vertical Accordion Menu</a></li>
        <li><a href="/blog/index.php/wordpress-plugins/wordpress-plugin-jquery-drill-down-ipod-menu-widget/">jQuery Drill Down iPod Menu</a></li>
        <li><a href="/blog/index.php/wordpress-plugins/wordpress-plugin-jquery-slick-menu-widget/">jQuery Slick Menu</a></li>
        <li><a href="/blog/index.php/wordpress-plugins/wordpress-plugin-jquery-floating-menu/">Floating Menu</a></li>
        <li><a href="/blog/index.php/wordpress-plugins/wordpress-plugin-floating-tweets/">Floating Tweets</a></li>
        <li><a href="/blog/index.php/wordpress-plugin-slick-contact-forms/">Slick Contact Forms</a></li>
        <li class="last"><a href="/blog/index.php/wordpress-plugins/wordpress-plugin-slick-social-share-buttons/">Slick Social Share Buttons</a></li>
    </ul>

    <ul id="list-images">
        <li><a href="/blog/index.php/wordpress-plugins/wordpress-plugin-jquery-drop-down-mega-menu-widget/">
            <img src="/media/images/mega_1a.jpg" alt="" />
            <span>jQuery Horizontal Mega Menu</span></a>
        </li>
        <li><a href="/blog/index.php/wordpress-plugins/wordpress-plugin-jquery-vertical-mega-menu-widget/">
            <img src="/media/images/mega_2a.jpg" alt="" />
            <span>jQuery Vertical Mega Menu</span></a>
        </li>
        <li><a href="/blog/index.php/wordpress-plugins/wordpress-plugin-jquery-vertical-accordion-menu-widget/">
            <img src="/media/images/mega_3a.jpg" alt="" />
            <span>jQuery Vertical Accordion Menu</span></a>
        </li>
        <li><a href="/blog/index.php/wordpress-plugins/wordpress-plugin-jquery-drill-down-ipod-menu-widget/">
            <img src="/media/images/mega_4a.jpg" alt="" />
            <span>jQuery Drill Down iPod Menu</span></a>
        </li>
        <li><a href="/blog/index.php/wordpress-plugins/wordpress-plugin-jquery-slick-menu-widget/">
            <img src="/media/images/mega_5a.jpg" alt="" />
            <span>jQuery Slick Menu</span></a>
        </li>
        <li><a href="/blog/index.php/wordpress-plugins/wordpress-plugin-jquery-floating-menu/">
            <img src="/media/images/mega_6a.png" alt="" />
            <span>Floating Menu Widget</span></a>
        </li>
        <li><a href="/blog/index.php/wordpress-plugins/wordpress-plugin-floating-tweets/">
            <img src="/media/images/mega_7a.png" alt="" />
            <span>Floating Tweets Widget</span></a>
        </li>
        <li><a href="/blog/index.php/wordpress-plugin-slick-contact-forms/">
            <img src="/media/images/mega_8a.jpg" alt="" />
            <span>Slick Contact Forms</span></a>
        </li>
        <li><a href="/blog/index.php/wordpress-plugins/wordpress-plugin-slick-social-share-buttons/">
            <img src="/media/images/mega_9a.jpg" alt="" />
            <span>Slick Social Share Buttons</span></a>
        </li>
    </ul>
    <div class="clear"></div>
</div>

On the first link we have added the class “hover” to show the active state for the slider when the page loads.

The Slider jQuery Code

The jQuery is surprisingly simple for the menu slider. Basically it involves 2 parts – creating the slider structure and then the function to handle the hover event when hovering over the list of links:

$(document).ready(function() {

    // Declare variables
    var width = 400; // width of slide - required for animation calculation
    var slides = $('#list-images li');
    var numSlides = slides.length;

    // Wrap the slides & set the wrap width - this will be used to animate the slider left/right
    slides.wrapAll('<div id="slide-wrap"></div>').css({'float' : 'left','width' : width});
    $('#slide-wrap').css({width: width * numSlides});

    // Hover function - animate the slides based on index of active link
    $('#list-links li a').hover(function(){
        $('#list-links li').removeClass('hover');
        var i = $(this).index('#list-links li a');
        $(this).parent().addClass('hover');
        $('#slide-wrap').stop().animate({'marginLeft' : width*(-i)});
    });
});

In the above code we wrap the sliders in a div tag (“#slide-wrap”) – this is what is actually animated to give the sliding effect when hovering over a menu item.

The hover function on the list of links calculates how far to animate the slide-wrap based on the width of the slide and the index number of the active link. The function also adds class “hover” to the active li tag, which we can use to style the menu to indicate the active menu item.

The Menu Slider CSS

Finally some CSS styles to create the required design:

#menu-slider {
background: url(images/bg_menu_slider.png) no-repeat 0 0;
padding: 15px;
margin-bottom: 20px;
}

/* Required */
#list-images, #list-images li {
height: 292px;
width: 400px;
display: block;
}
#list-images {
float: right;
overflow: hidden; /* Required to hide the inactive slides */
border: 1px solid #ccc;
}
#list-images li {
position: relative;
}

#list-images li img {
background: #fff;
position: absolute;
top: 0;
left: 0;
}

/* Image captions */
#list-images li span {
background: url(images/grid1.png) repeat 0 0;
position: absolute;
bottom: 0;
left: 0;
width: 362px;
display: block;
padding: 14px 20px;
font: bold 20px Arial, sans-serif;
color: #fff;
height: 20px;
line-height: 20px;
}

/* Menu text links */
#list-links {
width: 220px;
float: left;
}
#list-links li {
padding: 0 15px 0 0;
}
#list-links li a {
font: normal 12px Arial, sans-serif;
color: #222;
padding: 8px 5px 8px 8px;
border-bottom: 1px solid #ccc;
font-weight: bold;
font-size: 13px;
display: block;
}
#list-links li.hover {
background: url(images/tab_current.png) no-repeat 100% center;
}
#list-links li.hover a, #list-links li.hover a:hover {
color: #fff;
background: none;
border-bottom: none;
padding-bottom: 9px;
}
#list-links li.last a {
border-bottom: none;
}

View Demo Download Source Code

Also Check Out Our Premium jQuery Plugins:

Adding Vertical Slider Animation

Check out our follow up post – jQuery Tutorial – Adding Vertical Animation to the Slider Menu.

22 Comments

  • [...] Text should be readable at arm’s length, and broken up with “read more” links or collapsible navigation. [...]

  • [...] jQuery Menu SliderIn this tutorial by Design Chemical you will learn how to create a jQuery menu slider. The jQuery is [...]

  • any way this slider can auto play upon page load by chance?

  • [...] Text should be readable at arm’s length, and broken up with “read more” links or collapsible navigation. [...]

  • I really like the widget. Thanks for the demo. I kept wanting to click the rows, so I might remove the links.

  • tried it but throws the css off in the menu widget im using (the jquery vertical menu plug-in from your site) i know the sliders built off of it so just have to figure on adjustments.
    Thanks for the quick reply :)

  • ok ill try that thx :)

  • Still trying to figure how to add this to wordpress as a plug-in or using a short code
    anyone have any ideas?

  • Thx for the great tutorial.

    Question:
    I adjusted the menu to size of the top banner area in my wordpress theme;
    i want to use it next to the logo image. However, not sure how to add this;
    is there a way using a short code, something like this

    to the header.php? or is there another way using php.
    Not really sure on best method.

    • Hi,

      Just add the code directly to the header.php file

  • Love this tutorial..
    Thank you for Sharing!

    • No problem. glad you found it useful

  • [...] jQuery Menu Slider In this tutorial you will learn how to create a jQuery menu slider similar to the one used in [...]

  • [...] 12) jQuery Tutorial Create a jQuery Menu Slider [...]

  • Hey Lee

    Cool man really nice effect. Thanks for share.. Ill use this menu in my next project.

    • Hi,

      thank you

  • http://voodoopress.com/post-selector/

    So I dig some of your tutorials, and wanted to play around a bit. Decided to take your code, and drop it into my functions.php, and run some loops so I could output in the right format for this menu. Anyway, I’ve like… right there. The source code is outputting real nice, and everything looks right to me. The js is outputting to the head as well….. but the images are staying visible in a strip across the screen, and the area where the main image should be has wandered right..

    Anything obvious I may have screwed up that you can see?

    • Hi,

      You need to add a fixed width to the #menu-slider.

      If the images are all visible then make sure that the #list-images tag has overflow set to “hidden”

  • Did you get this idea from me? If you remember my email i´ve sent:)
    Or was it your plan all the time;) Nice to see this:D

    - Joacim

    • Hi,

      No, the slider menu is taken from our website mega menu

      • I know:) under “WordPress Plugins” :D

Leave a comment

To add code to your comments wrap the code text in [text][/text] tags