Kwicks for jQuery and an awesome horizontal animated menu
Spread it!
Menu of a web page is the most important and maybe the most clicked link on your web page. Do you want your menu look sexy with an awesome animation on your website? Follow me, I will walk you to the final result of using Kwicks – jQuery Plugin to build an horizontal menu with a nice effect like Mootools but more customizable and versatile.
Always begin with the Demo and Download, huh?
In the example above, the block width of menu item will be changed when the mouse goes over. This tut also show you how to work with css sprites – a popular css technique (not a new anymore, huh?).
HTML code:
HTML code seem to be simple. Simply copy and paste these all code below to your new HTML page.
<div class="kwicks_container"> <ul class="kwicks"> <li id="kwick_1"> <a href="http://aext.net/" >Home <h3>Front page</h3> </a> </li> <li id="kwick_2"> <a href="http://aext.net/category/css/">CSS & XHTML <h3>Makeup web page</h3> </a> </li> <li id="kwick_3"> <a href="http://aext.net/category/java/">Java <h3>Learning Java</h3> </a> </li> <li id="kwick_4"> <a href="http://aext.net/category/others">Others <h3>In the other hand</h3> </a> </li> <li id="kwick_5"> <a href="http://aext.net/category/php/">PHP <h3>PHP Programming</h3> </a> </li> <li id="kwick_6"> <a href="http://aext.net/category/resources/">Resources <h3>Resources for Web Developers</h3> </a> </li> <li id="kwick_7"> <a href="http://aext.net/category/theme-layout/">Themes <h3>Bloggers - Wordpress Themes</h3> </a> </li> </ul> </div>
CSS code:
The CSS code below maybe a bit long, but I think it’s easy to read. I separated the code into individual so that you can easy to customize later.
body, h3, div, ul, p { margin:0; padding:0; } body { background-color:#FFFF99; line-height:18px; } div.kwicks_container { width: 840px; margin: 100px auto 0 auto; } /*-------------------------KWICKS--------------------*/ .kwicks { list-style: none; position: relative; margin: 0; padding: 0; width:840px; height:50px; z-index:2; } .kwicks li { display: block; float: left; overflow: hidden; padding: 0; cursor: pointer; width: 100px; height: 35px; z-index:2; cursor:pointer; border-left-width: 1px; border-left-style: solid; border-left-color: #FF9933; } .kwicks li a { background-image:url(images/sprites_menu.png); background-repeat:no-repeat; font-family: "Lucida Grande", "Lucida Sans Unicode", Arial; font-size: 14px; letter-spacing: -0.07em; color: #AA0000; height: 40px; outline:none; display:block; z-index:100; cursor:pointer; text-transform: uppercase; font-weight: bold; margin-top: -3px; margin-left: 5px; text-decoration: none; } .kwicks li h3 { position: absolute; width: 120px; font-family: "Lucida Grande", "Lucida Sans Unicode", Arial; font-size: 10px; color: #FF6600; letter-spacing: -0.02em; outline:none; z-index:0; cursor:pointer; text-transform: uppercase; font-weight: normal; margin-left: 5px; text-decoration: none; left: 0px; top: 15px; right: 0px; bottom: 0px; } .kwicks li a:hover { } #kwick_1, #kwick_2, #kwick_3, #kwick_4, #kwick_5, #kwick_6, #kwick_7 { margin: 0pt; overflow: hidden; position: absolute; display: block; width: 120px; } #kwick_1 { left: 0px; border: none; } #kwick_2 { left: 120px; } #kwick_3 { left: 240px; } #kwick_4 { left: 360px; } #kwick_5 { left: 480px; } #kwick_6 { left: 600px; } #kwick_7 { right: 0px; } #kwick_1 a { background-position:0px 0px; } #kwick_1 a:hover, #kwick_2 #aktiv { background-position:0px 0px !important; } #kwick_2 a { background-position:0px -50px; } #kwick_2 a:hover, #kwick_2 #aktiv { background-position:0px -50px!important; } #kwick_3 a { background-position:0px -192px; } #kwick_3 a:hover, #kwick_3 #aktiv { background-position:0px -192px!important; } #kwick_4 a { background-position:0px -100px; } #kwick_4 a:hover, #kwick_4 #aktiv { background-position:0px -100px!important; } #kwick_5 a { background-position:0px -150px; } #kwick_5 a:hover, #kwick_5 #aktiv { background-position:0px -150px!important; } #kwick_6 a { background-position:0px -250px; } #kwick_6 a:hover, #kwick_6 #aktiv { background-position:0px -250px!important; } #kwick_7 a { background-position:0px -300px; } #kwick_7 a:hover, #kwick_6 #aktiv { background-position:0px -300px!important; }
Javascript
Here is the list of javascript lib that we need to make the menu works
- jquery-1.2.3.js: Off course.
- jquery.easing.1.3.js: Easing function for the animation.
- jquery.kwicks-1.5.1.js: our dude here.
And ….
Copy & paste the hold thing below for the job done, but it’s just a little bit code I got. Put it in <head> tag:
<script type="text/javascript" src="javascript/jquery-1.2.3.js"></script> <script type="text/javascript" src="javascript/jquery.easing.1.3.js"></script> <script type="text/javascript" src="javascript/jquery.kwicks-1.5.1.js"></script> <script type="text/javascript"> $().ready(function() { $('.kwicks').kwicks({ max : 200, duration: 800, easing: 'easeOutQuint' }); }); </script>
Read the Kwicks documentation for available options. See more …
One more thing
If you’re gonna use this menu for wordpress and want to select the active menu. Just do the simple way right below, all the css code you need has already put in css code at the middle of this tutorial. Edit something likes:
............. <li id="kwick_1"> <a href="http://aext.net/" id="active">Home <h3>Front page</h3> </a> </li> .............
Add the id attribute into the link with value: “active”. That’s it, and content inside <h3> tag is good for category decription, right?
Some words:
This tutorial only show you how to work with Kwicks and the method I’m using is the text only with one background. You can do the way with only background to make your menu cooler, because you can add effect to your text by images. Thanks for visiting. Enjoy it!
Related Posts
- 15 Awesome Examples and Tutorials Slide Animated Menu
- Learning jQuery: Horizontal Panel Sliding With animate() function
- Why Do We Love These 5 Fresh and Awesome jQuery Plugins?
- Perfect signin dropdown box likes Twitter with jQuery
- Make a most beautiful tags cloud on over the world with Facelift and jQuery
52 User Comments
Trackbacks/Pingbacks
-
-
17. Aug, 2009
Kwicks for jQuery and an awesome horizontal animated menu…
[..]Menu of a web page is the most important and maybe the most clicked link on your web page[..]
-
-
18. Aug, 2009
[...] Read this article: Kwicks for jQuery and an awesome horizontal animated menu | AEXT.NET [...]
-
-
18. Aug, 2009
[...] Kwicks for jQuery and an awesome horizontal animated menu | AEXT.NETaext.net [...]
-
-
18. Aug, 2009
[...] Kwicks for jQuery and an awesome horizontal animated menu [...]
-
-
18. Aug, 2009
[...] This post was Twitted by media_dsign [...]
-
-
19. Aug, 2009
[...] This post was Twitted by ozrabal [...]
-
-
19. Aug, 2009
[...] 5. Awesome Horizontal Animated menu using Kwicks for jQuery [...]
-
-
19. Aug, 2009
[...] Kwicks for jQuery and an awesome horizontal animated menu | AEXT.NET (tags: jquery menu navigation) [...]
-
-
19. Aug, 2009
[...] Awesome Horizontal Animated menu using Kwicks for jQuery 使用 jQuery Kwicks 插件建立一个可定制的，灵活的横向动画菜单。演示 | [...]
-
-
20. Aug, 2009
[..] Kwicks for jQuery and an awesome horizontal animated menu…[..]
-
-
01. Sep, 2009
[...] Kwicks for jQuery and an awesome horizontal animated menu [...]
-
-
02. Sep, 2009
[...] 1. Animated menu using Kwicks for jQuery [...]
-
-
03. Sep, 2009
[...] Kwicks for jQuery and an awesome horizontal animated menu By Lam Nguyen, August 17th, 2009 Site: AEXT [...]
-
-
20. Sep, 2009
[...] Kwicks for jQuery and an awesome horizontal animated menu [...]
-
-
25. Sep, 2009
[...] 5.Awesome Horizontal Animated menu using Kwicks for jQuery [...]
-
-
06. Nov, 2009
[...] Link: http://aext.net/2009/08/kwicks-for-jquery-and-an-awesome-horizontal-animated-menu/ [...]
-
-
24. Nov, 2009
[...] Menú horizontal animado con jQuery [...]
-
-
04. Dec, 2009
[...] Tutorial Tutorial and Documentation [...]
-
-
21. Jan, 2010
[...] Awesome Horizontal Animated menu using Kwicks for jQuery 使用 jQuery Kwicks 插件建立一个可定制的，灵活的横向动画菜单。演示 | [...]
-
-
25. Jan, 2010
[...] 5. Awesome Horizontal Animated menu using Kwicks for jQuery [...]
-
-
30. Jan, 2010
[...] Awesome Horizontal Animated menu using Kwicks for jQuery 使用 jQuery Kwicks 插件建立一个可定制的，灵活的横向动画菜单。演示 | [...]
Leave a Reply
About AEXT.NET
AEXT is a design magazine that publishes all things web design. Articles here are published by web professionals for web professionals featuring tutorials, collections, and resources.
Like the effect plenty of CSS to go with it!
Would be awesome if there were a drop down oprion on this to.
I’m imaging how it would be if there were a drop down option
oops replied to the wrong one Lam.
Perhaps you should add dropdown functionality to it instead of hoping someone else will?
i’m trying to implement this but having trouble. I can get the dropdown to show using simple css (display:block on hover) but once I move mouse off from the button, the submenu disappears. I think it has something to do with the animate function used in jquery. Anyone got this working?
sorry but:
<a href=”http://aext.net/category/theme-layout/” rel=”nofollow”>Themes
Bloggers – Wordpress Themes
</a>
You have lock-level elements (such as “”) inside an inline element
<a> </a>
I’m sorry but I don’t get what you mean. Could you please tell more clearly?
For Example:
<a href=”http://aext.net/category/theme-layout/” rel=”nofollow”>Themes
Bloggers – Wordpress Themes
</a>
Is not valid. You have Block Elements such h3 “inside” elements as A.
<a href=”http://aext.net/category/theme-layout/” rel=”nofollow”>Themes</a>
<a href=”http://aext.net/category/theme-layout/” rel=”nofollow”>
Bloggers – Wordpress Themes
</a>
Oh, yup. Sorry about that! H3 and A should be exchanged the position and the CSS need to be updated. Thanks!
Good post.
Thaks !
i like it is
Wow, nice dude. Absolutely easy to include it and looks very nice!
!
publish more
greez thom
I like this menu very much indeed.. very nice..! thanks
Look at my website homepage ive got it right there second column.
Ive added spice with some gimpped images.PNG of course.
My Site Homepage
Oh, it’s cool. You did well Tim. You’re using two of my tutorials and really did good two all.
I like this menu very much
Can you use it with lightbox?
@aya I can not imagine what the menu looks like when using with lightbox. What do you want to do with lightbbox?
http://www.huddletogether.com/projects/lightbox2/
I am javascript beginner.
When it is an impertinent question, I’m sorry.
@aya I’m sorry. I know what you talking about lightbox, but I was confused about the implement. Did you mean when click on item in this Kwicks menu, the lightbox will display? If so, it’s not a menu anymore…
It is not told to want to tell it.
After English is studied, it questions more.
thankyou so much
The ease with which this tutorial allows us to add this cool looking feature to a site makes me wanna spice up my site too. At the moment, it is just raw php. Maybe this will give it some more life. Thanks buddy.
OK I dont get one thing, where is the code for those pics, in every tab, that reveales when mouse moves on?
Thanks
There
.kwicks li a {
background-image:url(images/sprites_menu.png);
nice work ;
but please how switch text & image ?
i want see only image and onmouseover i want rollover text…
thank you
Is there a way to have one of the menu items open by default?
Something like when the page loads, the last menu item is in the hover state.
Nice work! Like it but keyboard navigation would be really good for those that don’t use the mouse to navigate with.
How do I make active menu
doesn’t work with i.e 6 png and png fix
Yeah, nice work man! Thanks a lot!
thnx dude its reall nice,i guess i need to boookmark your blog,as you have so much to offer .thnx again
shoaib hussain´s last blog ..Windows 7 Tip-Make System Restore Image