Smooth Horizontal Slide Image Menu with Jquery

in jQuery 25 comments

Functionality Checklist for our Sliding Image Menu for Jquery.

Here is what we need our Jquery horizontal sliding image menu to do:

Jquery compatible script.
Mootools like sliding effect.
Valid XHTML degrades well.
Lightweight customizable script.

Most of you already aware that jQuery is a lightweight JavaScript library that emphasizes interaction between JavaScript and HTML. It’s have Ajax interactions for rapid web development with the powerful scripting language that it represents (JavaScript) you can do amazing things. Sometimes you have to take a closer look to find out what is powering all of those smooth animations. jQuery is quickly becoming a favorite. If you are looking jQuery Plugins & Tutorials then you can find here Full Page Background Image Navigation with jQuery.

Now days jQuery is on top of its charm and everyone from Javascript world love to experiment with it. Because of the remarkable significance of JQuery in Designing field, it is an essential to keep yourself up-to-date with its Quality uses and Examples.

You may be interested in the following modern trends related articles as well.

Please feel free to join us and you are always welcome to share your thoughts even if you have more reference links related to other tips and tricks that our readers may like.

Don’t forget to

Save

subscribe to our RSS-feed and

Save

follow us on Twitter — for recent updates.

Horizontal Slide Image Menu Preview:

Requirement: jQuery
Demo: https://www.alohatechsupport.net/examples/image-menu-1.html
Download: https://www.alohatechsupport.net/downloads/image-menu-1.zip

Author: Muhammad Faisal
I'm Muhammad Faisal founder of GDJ and co-founder of FPD. I love all things having to do with WordPress, PHP, HTML5, CSS, or jQuery. And really enjoying to writing articles on web design and typography. You can catch me on Twitter, Facebook and Pinterest.

25+ Fresh JavaScript Resources

Full Page Background Image Navigation (Slide Effect) with jQuery

Awesome Faster Websites Creating Tool For Designers

jQuery UI Elements Kit For Websites & Web App – Wijmo

Amazing Standalone Image Slider With Awesome Effects

RocketBar jQuery And CSS3 “Stay On Top” Navigation Menu – Free Download

Catch404 – jQuery Plugin For Handling Broken Links Smartly

jQuery Validity Elegant and Powerful jQuery Plugin

Comments to Smooth Horizontal Slide Image Menu with Jquery

?????? ?????? Jul 26, 2010

Hehehehe good “gallery” with jquery

pharmacy technician Jul 26, 2010

My cousin recommended this blog and she was totally right keep up the fantastic work!

cna training Aug 21, 2010

nice post. thanks.

modu?y fotowoltaiczne Aug 24, 2010

Great work! Thanks for guys like you – this is very very nice to have everyging in one place!

emt training Aug 25, 2010

Great information! I’ve been looking for something like this for a while now. Thanks!

peter Sep 17, 2010

Hey, great horizontal menu! In Firefox this menu removes the scroll from my page. Do you guys have the css fix for this. Thanks!

Robster Oct 7, 2010

This is very cool but could you tell me how I can change the dimensions if I want to use different sized pictures?

Robsterk Oct 11, 2010

I figured out the last post I left here but have another question. How can I make the first picture be fully expanded and keep whichever picture that is rolledover expanded. That way the width that the whole menu takes up on screen does not change.

dev Oct 22, 2010

in my template it does not scroll, i have used ul in my tenplate that’s why i used ol instead, bt it does not scroll, whether i use ul or ol, bt alone it works fine,
any suggestion plz………..

dev Oct 25, 2010

i have figured it out that it is due to this line
jdoc:include type=”head”
as i am using joomla template, how can i fix it

Manu Jan 31, 2011

Hello there,

I see this plugin in action and i love it, but how i can install it in my wordpress?

What i need…?

Author

GDJ Feb 1, 2011

You don’t need any thing… just download the zip file… and extract and use where u wants…
plz follow the demo link for more details…

thanks

Requirement: jQuery
Demo: http://www.alohatechsupport.net/examples/image-menu-1.html
Download: http://www.alohatechsupport.net/downloads/image-menu-1.zip

tuba Jun 13, 2011

wow, nice menu, although I am looking something different which will give a me a smooth scroll while I mouse over on any menu, say from home to contact us then a red line will move from home to contact us position, We can see this effect in flash most.