Smooth Horizontal Slide Image Menu with Jquery

Smooth Horizontal Slide Image Menu with Jquery
in jQuery 25 comments
Advertisements
1 Share

Smooth horizontal slide image menu is really cool and that it would be nice if it worked with jQuery. Introducing a Mootools image menu ported to Jquery. If you have ever seen the image menu javascript for mootools by phatfusion and liked what you saw well here is a Sliding Image Menu alternative I’ve come up with using the power of jquery javascript.

Functionality Checklist for our Sliding Image Menu for Jquery.

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

  1. Jquery compatible script.
  2. Mootools like sliding effect.
  3. Valid XHTML degrades well.
  4. 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

subscribe to our RSS-feed and
Follow  us on  Twitter
  • Save
follow us on Twitter
— for recent updates.

Horizontal Slide Image Menu Preview:

Smooth Horizontal Slide Image Menu with Jquery
  • Save

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

Author:
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.

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.

????? Jul 8, 2011

And I thank you for sharing this great and very useful to do this anyway.

La Boite Digitale Aug 18, 2011

Good issue
Thank you for sharing

tanya Aug 21, 2011

How do i change the dimensions of the pictures?

thanks

Author
GDJ Aug 21, 2011

Hi Tanya,

There is no option to change dimensions or direction.

Thanks

Trackbacks to this post.
Leave a Reply

Previous Post
«
Next Post
»
© 2010 - 2023 Graphic Design Junction.
Powered by Wordpress.
1 Share
Share via
Copy link