Kwicks for jQuery and an awesome horizontal animated menu

written by aext on August 17, 2009 in Javascript with 68 comments

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?

Awesome horizontal animated menu

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

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!

Join NS0-154 online course to learn how to create successful websites using Jquery and other useful web applications. Download the 642-515 tutorials and 650-177 guide to learn about these useful plugins in easy and fast way.
AEXT.NET MAGAZINE is proudly sponsored by PSPrint. Their business card printing technology allow them to print fast and efficient, employing the latest technology and tools in the industry. Try it with them today.