how to create jQuery 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

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>

source: http://www.htmldrive.net/items/show/633/jQuery-horizontal-animated-menu

how to create jQuery horizontal animated menu

Posted by: Risalahati Dedic Ahmad Updated at: 00:03