Kwicks for jQuery - horizontal animated menu

11 January 2010 Monday

This application was viewed 1935 times

0

Kwicks for jQuery and an awesome horizontal animated menu

View the DEMO

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.

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!

Tags: navigation, jquery, menu,