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.

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. http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.2.3.js&can=2&q=
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?


Demo: http://aext.net/example/kwicksmenu
Download: http://www.box.net/shared/e3yeuxajsb
Source: http://aext.net/2009/08/kwicks-for-jquery-and-an-awesome-horizontal-animated-menu/

Related Listings:

1. Get Slick Effects with MooTools Kwicks When it came time for my employer to redo their...
2. Animated Navigation with CSS & jQuery The simple and elegant roll over effects that I liked....
3. Jquery Animated Hover Animated Hover is a plugin for jQuery to create animated...
4. Animated Hover using Jquery Animated Hover provides animated transitions between hovered items for any...
5. jQuery – Horizontal Accordion Script This jQuery plugin allows you to easily transform any unordered...

Do you like this post?

Email: