【 HTML5, jQuery 】ヘッダー固定スムーズスクロール対応メニュー - HTML5, jQuery役立つ情報ブログ

HTML5、jQueryでヘッダー固定のスムーズスクロール対応メニューのBobMarleyのサイトを作ってみました。

ヘッダーは画面上部に固定されており、スクロールしても画面の上にありつづけます。
ナビボタンを押すと、jQueryによって自動スクロールする仕組みになっています。

情報量が少ない場合、1ページでサイトを作るのに見た目もかっこよくすっきりしているのでおすすめです。
是非テンプレートにご利用下さい。

【index.html】

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ヘッダー固定スムーズスクロール対応メニュー</title>
<link href="css/reset.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<!--[if lt IE 9]>
<script type="text/javascript" src="js/html5shiv.js"></script>
<![endif]-->
<!--[if lte IE 6]>
<script type="text/javascript" src="js/jquery.exfixed-1.3.2.js"></script>
<script type="text/javascript">
$(function(){
	$('.nav').exFixed();
});
</script>
<![endif]-->
</head>
<body id="top">
<header>
<nav>
<ul>
<li class="nav1"><a href="#top">Top</a></li>
<li class="nav2"><a href="#about">About</a></li>
<li class="nav3"><a href="#history">History</a></li>
<li class="nav4"><a href="#music">Music</a></li>
<li class="nav5"><a href="#saying">Saying</a></li>
</ul>
</nav>
<h1><img src="img/mainimg.jpg" alt="My WebSite!!" width="1000" height="172"></h1>
</header>

<div id="content">

<h2 id="about">About</h2>
<img src="img/img1.png" alt="" width="350" height="420" class="imgR">
<p>Nesta Robert Marley OM (6 February 1945 &#8211; 11 May 1981) was a Jamaican singer-songwriter who achieved international fame through a series of crossover reggae albums. Starting out in 1963 with the group the Wailers, he forged a distinctive songwriting and vocal style that would later resonate with audiences worldwide. The Wailers would go on to release some of the earliest reggae records with producer Lee Scratch Perry. After the Wailers disbanded in 1974, Marley pursued a solo career which culminated in the release of the album Exodus in 1977 which established his worldwide reputation. He was a committed Rastafarian who infused his music with a profound sense of spirituality.</p>

<h2 id="history">History</h2>
<img src="img/img2.png" alt="" width="350" height="420" class="imgL">
<p>Nesta Robert Marley was born on the farm of his maternal grandfather in Nine Mile, Saint Ann Parish, Jamaica, to Norval Sinclair Marley and Cedella Booker. Norval Marley was a European-Jamaican of British/Syrian descent whose family came from England. Norval claimed to have been a captain in the Royal Marines, though at the time of his marriage to Cedella Booker, an African-Jamaican then 18 years old, he was employed as a plantation overseer. Though Bob Marley was named Nesta Robert Marley, a Jamaican passport official would later reverse his first and middle names. Norval provided financial support for his wife and child but seldom saw them as he was often away. Bob Marley attended Stepney Primary and Junior High School which serves the catchment area of Saint Ann. In 1955, when Bob Marley was 10 years old, his father died of a heart attack at the age of 70.</p>

<h2 id="music">Music</h2>
<img src="img/img3.png" alt="" width="350" height="420" class="imgR">
<section>
<p>Studio Albums</p>
<ul>
<li>The Wailing Wailers (1965)</li>
<li>Soul Rebels (1970)</li>
<li>Soul Revolution (1971)</li>
<li>The Best of the Wailers (1971)</li>
<li>Catch a Fire (1973)</li>
<li>Burnin' (1973)</li>
<li>Natty Dread (1974)</li>
<li>Rastaman Vibration (1976)</li>
<li>Exodus (1977)</li>
<li>Kaya (1978)</li>
<li>Survival (1979)</li>
<li>Uprising (1980)</li>
<li>Confrontation (1983)</li>
</ul>
</section>
<section>
<p>Live albums</p>
<ul>
<li>Live! (1975)</li>
<li>Babylon By Bus (1978)</li>
</ul>
</section>


<h2 id="saying">Saying</h2>
<img src="img/img4.png" alt="" width="350" height="420" class="imgL">
<p>"Every man gotta right to decide his own destiny."</p>
</p>
<p>"Facts an' facts, an' t'ings an t'ings: dem's all a lotta fockin' bullshit. Hear me! Dere is no truth but de one"</p>
<p>"don´t forget yor history nor your destiny."</p>
<p>"open your eyes & look within, are you satisfied with the life you´reliving."</p>
<p>"in this great future you can`t forget your past."</p>
<p>"Just can't live that negative way...make way for the positive day!"</p>

</div><!-- #content -->

<footer>
<p id="copy"><small>Copyright &copy; TKY All rights reserved.</small></p>
</footer>
</body>
</html>

【reset.css】

/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
	display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000; 
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}

【style.css】

@charset "UTF-8";

/* body */
body  {
  background: url(../img/bg.png) 0 0 repeat;
  color: #333;
  text-align: center;
  line-height: 1.6;
}
body  {
  font-size: 15px;
}

/*  header */
header  {
  text-shadow: 1px 1px 1px #FFF;
  text-align: left;
  margin: 0 auto;
  width: 1000px;
}
header h1  {
  margin: 50px 0 30px;
}

/* nav */
nav  {
  background: url(../img/nav_bg.png) repeat-x;
  overflow: hidden;
  box-shadow: 0 1px 6px #777;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;  
}
nav ul  {
  clear: both;
  margin: 0 auto;
  width: 900px;
  height: 50px;
}
nav ul li  {
  float: left;
  padding:  0;
  vertical-align:  top;
  width: 180px;
  height:  50px;
}
nav ul li a  {
  background-image: url(../img/nav.png);
  display: block;
  height: 50px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
nav ul li.nav1 a  { background-position: 0 0; }
nav ul li.nav2 a  { background-position: -180px 0; }
nav ul li.nav3 a  { background-position: -360px 0; }
nav ul li.nav4 a  { background-position: -540px 0; }
nav ul li.nav5 a  { background-position: -720px 0; }

nav ul li.nav1 a:hover  { background-position:  0 -50px; }
nav ul li.nav2 a:hover  { background-position:  -180px -50px; }
nav ul li.nav3 a:hover  { background-position:  -360px -50px; }
nav ul li.nav4 a:hover  { background-position:  -540px -50px; }
nav ul li.nav5 a:hover  { background-position:  -720px -50px; }


/* content */
#content  {
  text-align: left;
  margin: 0 auto;
  width: 900px;
}
#content h2  {
  font-family: "Arial Black", Gadget, sans-serif;
  clear: both;
  background-color: #093;
  color: #FFF;
  font-size: 200%;
  font-weight: bold;
  text-align: center;
  margin: 0 0 40px;
  padding: 5px 0;
  box-shadow: 0 2px 4px #FF0;
}
#content p  {
  margin: 30px 30px 0;
}

/* image */
img  {
  border: none;
}
.imgL  {
  float: left;
  margin-right: 10px;
}
.imgR  {
  float: right;
  margin-left: 10px;
}
section {
  width: 200px;
  float: left;
  margin: -30px 20px 0 40px;
}
section p {
  font-size: 18px;
  font-weight: 600;
}

/* footer */
footer p#copy {
  padding: 120px 0 40px;
  text-align: center;
  font-weight: 600;
}

【common.js】

//scroll
$(function(){
     $("a[href*=#]").click(function(){
     $('html,body').animate({ scrollTop: $($(this).attr("href")).offset().top - 50 }, 'slow','swing');
     return false;
     })
});