Posteado por: irodriguezm | septiembre 3, 2009

Kwicks for jQuery and an awesome horizontal animated menu

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!

Enlace: http://aext.net/2009/08/kwicks-for-jquery-and-an-awesome-horizontal-animated-menu/


Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

Categorías

A %d blogueros les gusta esto: