実行結果
設置サンプルのソース
<!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>Designing the Digg Header | 設置サンプル</title>
<link rel="stylesheet" href="/content/lib/global.css" type="text/css" />
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#zone-bar li em").click(function() {
var hidden = $(this).parents("li").children("ul").is(":hidden");
$("#zone-bar>ul>li>ul").hide();
$("#zone-bar>ul>li>a").removeClass();
if(hidden){
$(this)
.parents("li").children("ul").toggle()
.parents("li").children("a").addClass("zoneCur");
}
});
});
</script>
<!-- CSS -->
<style type="text/css">
ul,li { list-style:none; margin:0; padding:0; inside; }
.floatleft { float:left; }
.floatright { float:right; }
.clear { clear:both; }
a { text-decoration:none; outline:none; color:#335588; }
a:hover { text-decoration:underline; }
#page-wrap { min-width:960px; max-width:1260px; height:500px; margin:0 auto; padding:0 10px; width:expression(document.body.clientWidth < 961? "960px" :document.body.clientWidth > 1261? "1260px" :"auto"); }
#top-bar { background:#1b5790; min-height:55px; padding:0 10px; font-size:1.3em; font-weight:bold; }
#right-side { float:right; padding-top:15px; }
#right-side img { border:1px solid #fff; vertical-align:middle; }
#right-side a { color:#fff; border-left:1px solid white; height:10px; padding-left:10px; }
#right-side a.first { border:none; padding:0; }
form#main-search { display:inline; position:relative; padding-right:10px; }
form#main-search label { display:none; }
#search-button { position:absolute; right:0; top:-6px; }
#zone-bar { background:#b2d281; min-height:30px; padding:5px 10px 0 10px; }
#zone-bar ul { display:block; }
#zone-bar ul li { height:18px; padding:5px 5px 0 5px; position:relative; float:left; margin-right:10px; line-height:1;}
#zone-bar ul li:hover { background:url(/content/img/ajax/digg_header/zonebar-navleft.png) center left no-repeat; }
#zone-bar ul li a { display:block; float:left; height:23px; position:relative; top:-5px; right:-5px; padding-right:3px; color:#383838; font-weight:bold; font-size:1.1em; text-decoration:none; }
#zone-bar ul li a:hover { background:url(/content/img/ajax/digg_header/zonebar-navright.png) center right no-repeat; }
#zone-bar ul li a span { position:relative; top:6px; }
#zone-bar ul li ul { display:none; position:absolute; top:29px; left:0px; width:150px; border:1px solid #ccc; background:white; padding:10px 0 0 0; }
#zone-bar ul li ul li { float:none; padding:0; margin:0; height:100%; }
#zone-bar ul li ul li:hover { background:none; }
#zone-bar ul li ul li a { display:block; float:none; margin-left:-5px; padding:5px 0 0 10px; width:140px; }
#zone-bar ul li ul li a:hover { background:#d9f0b7; }
</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>
<h3 class='h'>実行結果</h3>
<div id="wrap">
<h1><a href='http://css-tricks.com/designing-the-digg-header-how-to-download/'>Designing the Digg Header</a> | 設置サンプル</h1>
<!-- CODE -->
<div id="page-wrap">
<div id="top-bar">
<img src="/content/img/ajax/digg_header/logo.png" alt="DZone" class="floatleft" />
<div id="right-side">
<img src="/content/img/ajax/digg_header/usericon.jpg" alt="user icon" /> 
<a href="#" class="first">User Name</a> 
<a href="#">Submit New</a> 
<a href="#">Logout</a>  
<form id="main-search" onsubmit="return false;">
<label for="search-field" id="search-field-label">Search</label>
<input type="text" tabindex="1" maxlength="255" id="search-field"/>
<input type="image" alt="Search" value="Search" src="/content/img/ajax/digg_header/search.png" id="search-button"/>
</form>
</div>
</div><!-- #top-bar -->
<div id="zone-bar">
<ul>
<li>
<a href="#"><span>
Technology
<em class="opener-technology">
<img src="/content/img/ajax/digg_header/zonebar-downarrow.png" alt="dropdown" />
</em>
</span></a>
<ul class="technologysublist">
<li><a href="#">Apple</a></li>
<li><a href="#">Design</a></li>
<li><a href="#">Gadgets</a></li>
<li><a href="#">Hardware</a></li>
<li><a href="#">Industry News</a></li>
<li><a href="#">Linux/Unix</a></li>
<li><a href="#">Microsoft</a></li>
<li><a href="#">Mods</a></li>
<li><a href="#">Programming</a></li>
<li><a href="#">Security</a></li>
<li><a href="#">Software</a></li>
</ul>
</li>
<li>
<a href="#"><span>
World & Business
<em class="opener-world">
<img src="/content/img/ajax/digg_header/zonebar-downarrow.png" alt="dropdown" />
</em>
</span></a>
<ul class="worldsublist">
<li><a href="#">Business & Finance</a></li>
<li><a href="#">World News</a></li>
<li><a href="#">Political News</a></li>
<li><a href="#">Political Opinion</a></li>
<li><a href="#">2008 Elections</a></li>
</ul>
</li>
<li>
<a href="#"><span>
Science
<em class="opener-science">
<img src="/content/img/ajax/digg_header/zonebar-downarrow.png" alt="dropdown" />
</em>
</span></a>
<ul class="sciencesublist">
<li><a href="#">Enviornment</a></li>
<li><a href="#">General Sciences</a></li>
<li><a href="#">Space</a></li>
</ul>
</li>
<li>
<a href="#"><span>
Gaming
<em class="opener-gaming">
<img src="/content/img/ajax/digg_header/zonebar-downarrow.png" alt="dropdown" />
</em>
</span></a>
<ul class="gamingsublist">
<li><a href="#">Industry News</a></li>
<li><a href="#">PC Games</a></li>
<li><a href="#">Playable Web Games</a></li>
<li><a href="#">Nintendo</a></li>
<li><a href="#">PlayStation</a></li>
<li><a href="#">XBox</a></li>
</ul>
</li>
<li>
<a href="#"><span>
Lifestyle
<em class="opener-lifestyle">
<img src="/content/img/ajax/digg_header/zonebar-downarrow.png" alt="dropdown" />
</em>
</span></a>
<ul class="lifestylesublist">
<li><a href="#">Arts & Culture</a></li>
<li><a href="#">Autos</a></li>
<li><a href="#">Educational</a></li>
<li><a href="#">Food & Drink</a></li>
<li><a href="#">Health</a></li>
<li><a href="#">Travel & Places</a></li>
</ul>
</li>
<li>
<a href="#"><span>
Entertainment
<em class="opener-entertainment">
<img src="/content/img/ajax/digg_header/zonebar-downarrow.png" alt="dropdown" />
</em>
</span></a>
<ul class="entertainmentsublist">
<li><a href="#">Celebrity</a></li>
<li><a href="#">Movies</a></li>
<li><a href="#">Music</a></li>
<li><a href="#">Television</a></li>
<li><a href="#">Comics & Animation</a></li>
</ul>
</li>
<li>
<a href="#"><span>
Sports
<em class="opener-sports">
<img src="/content/img/ajax/digg_header/zonebar-downarrow.png" alt="dropdown" />
</em>
</span></a>
<ul class="sportssublist">
<li><a href="#">Baseball</a></li>
<li><a href="#">Basketball</a></li>
<li><a href="#">Extreme</a></li>
<li><a href="#">Football</a></li>
<li><a href="#">Golf</a></li>
<li><a href="#">Hockey</a></li>
<li><a href="#">Motorsport</a></li>
<li><a href="#">Soccer</a></li>
<li><a href="#">Tennis</a></li>
<li><a href="#">Other Sports</a></li>
</ul>
</li>
<li>
<a href="#"><span>
Offbeat
<em class="opener-offbeat">
<img src="/content/img/ajax/digg_header/zonebar-downarrow.png" alt="dropdown" />
</em>
</span></a>
<ul class="offbeatsublist">
<li><a href="#">Comedy</a></li>
<li><a href="#">Odd Stuff</a></li>
<li><a href="#">People</a></li>
<li><a href="#">Pets & Animals</a></li>
</ul>
</li>
</ul>
</div><!-- #zone-bar -->
</div><!-- #page-wrap -->
<!-- CODE / -->
</div>
</body>
</html>
