Design Chemical

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:

• jQuery Social Media Tabs
• jQuery Social Share Buttons
• jQuery Social Stream

Adding Vertical Slider Animation

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

Tags: animation, images, jQuery, menu, navigation, slider, tutorial
Categories jQuery, Tutorials 6237 Views