実行結果
設置サンプルのソース
<!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>設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
/* anchor */
$("body").prepend("<div id='top'>top</div>")
$("body").append("<div id='bottom'>bottom</div>");
/* scroll */
$(window).scroll(function(){
var scrollTop = $(window).scrollTop();
if(scrollTop != 0)
$('#nav').stop().animate({'opacity':'0.2'},400);
else
$('#nav').stop().animate({'opacity':'1'},400);
});
$('#nav').hover(
function (e) {
var scrollTop = $(window).scrollTop();
if(scrollTop != 0){
$('#nav').stop().animate({'opacity':'1'},400);
}
},
function (e) {
var scrollTop = $(window).scrollTop();
if(scrollTop != 0){
$('#nav').stop().animate({'opacity':'0.2'},400);
}
}
);
});
</script>
<!-- CSS -->
<style type="text/css">
#nav{
height:35px;
border-bottom:1px solid #ddd;
position:fixed;
top:0; left:0; right:0;
background:#fff url(/content/img/ajax/nav.png) repeat-x center left;
z-index:999999;
}
#nav ul{
height:25px;
list-style:none;
margin:6px auto 0 auto;
width:700px;
}
#nav ul li{
display:inline;
float:left;
margin:0 2px;
}
#nav a{
font-size:11px;
font-weight:bold;
float:left;
padding: 2px 4px;
color:#999;
text-decoration: none;
border:1px solid #ccc;
cursor: pointer;
background:transparent url(/content/img/ajax/overlay.png) repeat-x center left;
height:16px;
line-height:16px;
}
#nav a:hover{
background:#d9d9da none;
color: #fff;
}
#nav a.top span, #nav a.bottom span{
float:left;
width:16px; height:16px;
}
#nav a.top span{
background:transparent url(/content/img/ajax/top.png) no-repeat center center;
}
#nav a.bottom span{
background:transparent url(/content/img/ajax/bottom.png) no-repeat center center;
}
#nav ul li.search{
float:right;
}
#nav input.text{
float:left;
border:1px solid #ccc;
margin:0 1px 0 50px; padding:0;
line-height:20px;
}
input.searchbutton{
border:1px solid #ccc;
padding:1px;
cursor:pointer;
width:30px; height:22px;
background:#e8e9ea url(/content/img/ajax/search.png) no-repeat center center;
}
input.searchbutton:hover{
background-color:#d9d9da;
}
</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>設置サンプル</h1>
<p>【参照】<a href='http://tympanus.net/codrops/2009/12/11/fixed-fade-out-menu-a-css-and-jquery-tutorial/'>Fixed Fade Out Menu</a></p>
<!-- CODE -->
<div id="nav">
<ul>
<li><a class="top" href="#top"><span></span></a></li>
<li><a class="bottom" href="#bottom"><span></span></a></li>
<li><a>Link #1</a></li>
<li><a>Link #2</a></li>
<li><a>Link #3</a></li>
<li><a>Link #4</a></li>
<li><a>Link #5</a></li>
<li><a>Link #6</a></li>
<li class="search">
<input type="text" class="text" /><input class="searchbutton" type="submit" value=""/>
</li>
</ul>
</div>
<!-- / CODE -->
</div>
</body>
</html>