Cool buttons? How?

**auriaks** · 06-30-2010, 06:04 PM

Hi,

How they do those menu buttons animation? HERE

**traq** · 06-30-2010, 06:46 PM

javascript. You could do something similar using jQuery (or CSS3, once it's more widely supported).

**eddy86** · 06-30-2010, 06:51 PM

i'm not sure

**azoomer** · 07-01-2010, 12:40 AM

Hi auriaks! I like the animation on the page you showed us. Thought i'd try to replicate it with jQuery. A couple of months ago I found some code on the web that resembles it in a way ( unfortunately i can't remember where). I modified it a bit and here's what I have now.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>cool button</title>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>

<style type="text/css">
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" ""
}
/*end Meyer reset*/
body{ 
        background:#313131;
}
#header{
	    margin-top:30px;
        margin-left:30px; 
        margin-right:30px;
		background:#1E1E1E;
		color:#373737; 
		padding-top:20px; 
		padding-bottom:20px; 
		text-align:center;
		border:1px solid #1A1A1A;
}
h1{ 
       font-size:38px;
}
#navcontainer{
	    width:660px;
        margin-top:60px;
        margin-left:auto; 
        margin-right:auto;
}

#content #nav1 {
        height: 2.8em;
        overflow: hidden;
        border-bottom: 0; 
		padding-top:0;
		padding-right:1.0em;
		padding-bottom:0;
		padding-left:1.0em;
        float: left;
        list-style: none;
        position: relative;
}
#content #nav1 li, #content #nav1 li a {
        position: relative;
        float: left;
}      
#content #nav1 li { 
       top: 15px; 
	   margin: 0; 
	   background: none; 
	   padding: 0; 
}
#content #nav1 li a {
        display: block;
        padding-bottom:0.6em;
        padding-left:1.6em;
        padding-right:1.6em;
        padding-top:0.4em;
        background: #282828;
        color: #646464;
        text-decoration: none;
        height: 3.0em;
		margin-right:0.3em;
		border:1px solid #3C3C3C;
}

#content #nav1 li a:hover, #content #nav1 li a:hover span {
	background-position: 0 -194px;
	color: #9D9F9F;
	background-color:#1E1E1E;
}     

</style>
<script type="text/javascript"><!--
      $(document).ready(function() {

      var navDuration = 150; //time in miliseconds
      var navJumpHeight = "0.45em";

      $('#nav1 li').hover(function() {
          $(this).animate({ top : "-="+navJumpHeight }, navDuration);            
      }, function() {
          $(this).animate({ top : "15px" }, navDuration);
      });
        
      });//doc ready
// --></script>

</head>

<body>

<div id="header"><h1>Cool buttons</h1></div>
<div id="content">
<div id="navcontainer">
<ul id="nav1">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>

</div>
</body>
</html>

Here is a DEMO