設置サンプル
実行結果
設置サンプルのソース
<!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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>CSS Sprites2 | 設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
// remove link background images since we're re-doing the hover interaction below
// (doing it this way retains the CSS default hover states for non-javascript-enabled browsers)
// we also want to only remove the image on non-selected nav items, so this is a bit more complicated
$(".nav").children("li").each(function() {
var current = "nav current-" + ($(this).attr("class"));
var parentClass = $(".nav").attr("class");
if (parentClass != current) {
$(this).children("a").css({backgroundImage:"none"});
}
});
// create events for each nav item
attachNavEvents(".nav", "home");
attachNavEvents(".nav", "about");
attachNavEvents(".nav", "services");
attachNavEvents(".nav", "contact");
function attachNavEvents(parent, myClass) {
$(parent + " ." + myClass).mouseover(function() {
$(this).append('<div class="nav-' + myClass + '"></div>');
$("div.nav-" + myClass).css({display:"none"}).fadeIn(200);
}).mouseout(function() {
$("div.nav-" + myClass).fadeOut(200, function() {
$(this).remove();
});
}).mousedown(function() {
$("div.nav-" + myClass).attr("class", "nav-" + myClass + "-click");
}).mouseup(function() {
$("div.nav-" + myClass + "-click").attr("class", "nav-" + myClass);
});
}
});
</script>
<!-- CSS -->
<style type="text/css">
.nav { width:401px; height:48px; position:absolute; top:20px; left:0; background:url(/content/img/ajax/blue-nav.gif) no-repeat; }
.nav li { display:inline; }
.nav li a:link, .nav li a:visited { position:absolute; top:0; height:48px; text-indent:-9000px; overflow:hidden; z-index:10; }
.nav .home a:link, .nav .home a:visited { left:23px; width:76px; }
.nav .home a:hover, .nav .home a:focus { background:url(/content/img/ajax/blue-nav.gif) no-repeat -23px -49px; }
.nav .home a:active { background:url(/content/img/ajax/blue-nav.gif) no-repeat -23px -98px; }
.current-home .home a:link, .current-home .home a:visited { background:url(/content/img/ajax/blue-nav.gif) no-repeat -23px -147px; cursor:default; }
.nav-home, .nav-home-click { position:absolute; top:0; left:23px; width:76px; height:48px; background:url(/content/img/ajax/blue-nav.gif) no-repeat -23px -49px; }
.nav-home-click { background:url(/content/img/ajax/blue-nav.gif) no-repeat -23px -98px; }
.nav .about a:link, .nav .about a:visited { left:100px; width:82px; }
.nav .about a:hover, .nav .about a:focus { background:url(/content/img/ajax/blue-nav.gif) no-repeat -100px -49px; }
.nav .about a:active { background:url(/content/img/ajax/blue-nav.gif) no-repeat -100px -98px; }
.current-about .about a:link, .current-about .about a:visited { background:url(/content/img/ajax/blue-nav.gif) no-repeat -100px -147px; cursor:default; }
.nav-about, .nav-about-click { position:absolute; top:0; left:100px; width:82px; height:48px; background:url(/content/img/ajax/blue-nav.gif) no-repeat -100px -49px; }
.nav-about-click { background:url(/content/img/ajax/blue-nav.gif) no-repeat -100px -98px; }
.nav .services a:link, .nav .services a:visited { left:183px; width:97px; }
.nav .services a:hover, .nav .services a:focus { background:url(/content/img/ajax/blue-nav.gif) no-repeat -183px -49px; }
.nav .services a:active { background:url(/content/img/ajax/blue-nav.gif) no-repeat -183px -98px; }
.current-services .services a:link, .current-services .services a:visited { background:url(/content/img/ajax/blue-nav.gif) no-repeat -183px -147px; cursor:default; }
.nav-services, .nav-services-click { position:absolute; top:0; left:183px; width:97px; height:48px; background:url(/content/img/ajax/blue-nav.gif) no-repeat -183px -49px; }
.nav-services-click { background:url(/content/img/ajax/blue-nav.gif) no-repeat -183px -98px; }
.nav .contact a:link, .nav .contact a:visited { left:281px; width:97px; }
.nav .contact a:hover, .nav .contact a:focus { background:url(/content/img/ajax/blue-nav.gif) no-repeat -281px -49px; }
.nav .contact a:active { background:url(/content/img/ajax/blue-nav.gif) no-repeat -281px -98px; }
.current-contact .contact a:link, .current-contact .contact a:visited { background:url(/content/img/ajax/blue-nav.gif) no-repeat -281px -147px; cursor:default; }
.nav-contact, .nav-contact-click { position:absolute; top:0; left:281px; width:97px; height:48px; background:url(/content/img/ajax/blue-nav.gif) no-repeat -281px -49px; }
.nav-contact-click { background:url(/content/img/ajax/blue-nav.gif) no-repeat -281px -98px; }
</style>
<link rel="stylesheet" type="text/css" href="/common/css/example.css"></head>
<body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP & JavaScript Room</a> :: 設置サンプル</h1>
<h2 class='h'>設置サンプル</h2>
<h3 class='h'>実行結果</h3>
<div id="wrap">
<h1><a href='http://alistapart.com/articles/sprites2'>CSS Sprites2 - It's JavaScript Time</a> 設置サンプル/h1>
<!-- CODE -->
<div style="position:relative;">
<ul class="nav current-about">
<li class="home"><a href="#">Home</a></li>
<li class="about"><a href="#">About</a></li>
<li class="services"><a href="#">Services</a></li>
<li class="contact"><a href="#">Contact</a></li>
</ul>
</div>
<!-- / CODE -->
</div>
</body>
</html>