Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!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=iso-8859-1" />
<title>Button Test</title>
  
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<style type="text/css" media="screen">
body, ul, li {
font-family: helvetica;
margin:0;
padding:0;
}
#navigation {
list-style: none;
}
#navigation li {
float: left;
}
#navigation a { position:relative; }
#navigation a .hover { position:absolute; top:0; left:0; }
#navigation a,
#navigation a .hover {
height: 51px;
display: block;
text-indent:-1000px;
line-height:0px;
cursor: pointer;
width: 92px;
}
/* individual navigation items */
#navigation a.intro {
background-position: 0 0;
}
#navigation .highlight a.intro:hover,
#navigation a.intro .hover {
background-position: 0 -51px;
}
</style>
<script type="text/javascript" charset="utf-8">
$(function () {
$(#navigation li’)
.removeClass(’highlight’)
.find(’a')
.append(<span class="hover" />).each(function () {
var $span = $(> .hover’, this).css(’opacity’, 0);
$(this).hover(function () {
// on hover
$span.stop().fadeTo(50, 1);
}, function () {
// off hover
$span.stop().fadeTo(250, 0);
});
});
});
</script>
</head>
<body>
<ul id="navigation">
<li class="highlight"><a class="intro" href="#">test</a></li>
<li class="highlight"><a class="intro" href="#">test</a></li>
<li class="highlight"><a class="intro" href="#">test</a></li>
<li class="highlight"><a class="intro" href="#">test</a></li>
<li class="highlight"><a class="intro" href="#">test</a></li>
</ul>
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers