Hi,
How they do those menu buttons animation? HERE
Printable View
Hi,
How they do those menu buttons animation? HERE
javascript. You could do something similar using jQuery (or CSS3, once it's more widely supported).
i'm not sure
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.
Here is a DEMOCode:<!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>
azoomer: nice
Thanks Adrian. I found the original post so the credit goes to Rob Soule