jQuery horizontal animated menu

Home Menu & NavigationjQuery horizontal animated menu

14 years ago Views

18373

3234

aext

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="#">Home
    <h3>Front page</h3>
    </a>
  </li>
  <li id="kwick_2">
   <a href="#">CSS & XHTML
    <h3>Makeup web page</h3>
    </a>
  </li>
  <li id="kwick_3">
   <a href="#">Java
    <h3>Learning Java</h3>
    </a>
  </li>
  <li id="kwick_4">
   <a href="#">Others
    <h3>In the other hand</h3>
    </a>
  </li>
  <li id="kwick_5">
   <a href="#">PHP
    <h3>PHP Programming</h3>
    </a>
  </li>
  <li id="kwick_6">
   <a href="#">Resources
    <h3>Resources for Web Developers</h3>
    </a>
  </li>
  <li id="kwick_7">
   <a href="#">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;
}
#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;
}
.kwicks a:hover, .kwicks #active {
 color: #3399FF;
}
.kwicks li a:hover h3, .kwicks li #active h3 {
 color: #999999;
}
#kwick_2 a {
 background-position:0px -50px;
}
#kwick_3 a {
 background-position:0px -192px;
}
#kwick_4 a {
 background-position:0px -100px;
}
#kwick_5 a {
 background-position:0px -150px;
}
#kwick_6 a {
 background-position:0px -250px;
}
#kwick_7 a {
 background-position:0px -300px;
}

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>

Tag: horizontal navigation menu, animation navigation menu