前回の授業で作ったギャラリー部分とスライダーにナビゲーションを追加します。
レスポンシブサイトのナビゲーションを画像で作る場合、レスポンシブを加味した画像作りを心がけましょう。
また、今回のナビゲーションボタンの画像はCSSスプライトで作ります。
さらに参考サイトであるキリンのサイト同様、ボタンをホバーしたら、ボタン下部に▲とボーダーが出てくる設定にしましょう。
参考画像
nav要素の高さ：50px
li要素の高さ：30px
ホバーしたら出てくるborderの幅：3px
今回のポイント
以前はPC用とSP用に２つのnav要素を用意して、display:block と display:none で表示・非表示をコントロールしていましたが、今回は１つのnav要素でPC・SP共に使いまわす方法を取ります。もちろん「display:none」がNGでは無いですが、安易に「display:none」を使うのを辞めようという流れがあるのも事実です。
なので、ケース・バイ・ケースで常に両方の選択肢を持てるようにしましょう。
今回はこのナビゲーションにメガドロップダウンメニューを入れるので、授業ではPC用とSP用に２つのnav要素を用意する方法で進めますが、余裕のある人は自宅などで１つのnav要素のパターンもやって見て下さい。
2つのnav要素のパターン
<html lang="ja">
<head>
<meta charset="utf-8">
<title>レスポンシブでのCSSスプライト</title>
<meta name="viewport" content="width=device-width">
<style>
html,body,ul,li {
margin:0;
padding:0;
line-height:1.0;
}
ul {
list-style:none;
}
a {
text-decoration:none;
}
.pc-nav {
width:100%;
height:50px;
margin-top:50px;
border-bottom:1px solid #999999;
}
.pc-nav ul {
width:960px;
margin: 0 auto;
overflow:hidden;
height:50px;
}
.pc-nav li {
width:16.66%;
height:30px;
float:left;
border-right: 1px solid #999;
box-sizing: border-box;
}
.pc-nav li:first-child {
border-left: 1px solid #999;
box-sizing: border-box;
}
.pc-nav li a {
display:block;
line-height:50px;
text-indent:100%;
white-space:nowrap;
overflow:hidden;
background: url(img/nav.png) no-repeat center top;
}
.pc-nav li.nav2 a {
background-position:center -50px;
}
.pc-nav li.nav3 a {
background-position:center -100px;
}
.pc-nav li.nav4 a {
background-position:center -150px;
}
.pc-nav li.nav5 a {
background-position:center -200px;
}
.pc-nav li.nav6 a {
background-position:center -250px;
}
.pc-nav li a:hover {
line-height:47px;
border-bottom:3px solid #FF0000;
}
.pc-nav li.nav1 a:hover {
background: url(img/nav_h.png) no-repeat center top;
}
.pc-nav li.nav2 a:hover {
background: url(img/nav_h.png) no-repeat center -50px;
}
.pc-nav li.nav3 a:hover {
background: url(img/nav_h.png) no-repeat center -100px;
}
.pc-nav li.nav4 a:hover {
background: url(img/nav_h.png) no-repeat center -150px;
}
.pc-nav li.nav5 a:hover {
background: url(img/nav_h.png) no-repeat center -200px;
}
.pc-nav li.nav6 a:hover {
background: url(img/nav_h.png) no-repeat center -250px;
}
.sp-nav {
display:none;
}
screen and (max-width:959px) {
.pc-nav ul {
width:100%;
padding:0 1%;
box-sizing:border-box;
}
}
screen and (max-width:640px) {
.pc-nav {
display:none;
}
.sp-nav {
display:block;
width:100%;
}
.sp-nav ul {
width:100%;
overflow:hidden;
height:122px;
}
.sp-nav li {
width:50%;
height:40px;
float:left;
position:relative;
}
.sp-nav li a {
display:block;
font-size:13px;
line-height:40px;
color:#222;
padding-left:30px;
box-sizing:border-box;
border-bottom: 1px solid #999999;
}
.sp-nav li:nth-child(even) a {
border-left:1px solid #999999;
}
.sp-nav li a:after {
display:block;
content:"";
width:2px;
height:16px;
background:#F00;
position:absolute;
top:12px;
left:10px;
}
.sp-nav li a:hover {
text-decoration: underline;
}
}
</style>
</head>
<body>
<nav class="pc-nav">
<ul>
<li class="nav1"><a href="#">商品情報</a></li>
<li class="nav2"><a href="#">キャンペーン</a></li>
<li class="nav3"><a href="#">エンタメ・レシピ</a></li>
<li class="nav4"><a href="#">CSV活動</a></li>
<li class="nav5"><a href="#">企業情報</a></li>
<li class="nav6"><a href="#">お客様相談室</a></li>
</ul>
</nav>
<nav class="sp-nav">
<ul>
<li class="nav1"><a href="#">商品情報</a></li>
<li class="nav2"><a href="#">キャンペーン</a></li>
<li class="nav3"><a href="#">エンタメ・レシピ</a></li>
<li class="nav4"><a href="#">CSV活動</a></li>
<li class="nav5"><a href="#">企業情報</a></li>
<li class="nav6"><a href="#">お客様相談室</a></li>
</ul>
</nav>
</body>
</html>
1つのnav要素のパターン
htmlファイル
<html lang="ja">
<head>
<meta charset="utf-8">
<title>レスポンシブでのCSSスプライト</title>
</head>
<body>
<nav class="pc-nav">
<ul>
<li class="nav1"><a href="#">商品情報</a></li>
<li class="nav2"><a href="#">キャンペーン</a></li>
<li class="nav3"><a href="#">エンタメ</a></li>
<li class="nav4"><a href="#">CSV活動</a></li>
<li class="nav5"><a href="#">企業情報</a></li>
<li class="nav6"><a href="#">お客様相談室</a></li>
</ul>
</nav>
</body>
</html>
CSSファイル
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>レスポンシブでのCSSスプライト</title>
<meta name="viewport" content="width=device-width">
<style>
html, body, div, h1, h2, h3, h4, h5, h6,p, blockquote, pre,
address,ul, ol, li, dl, dt, dd,table, th, td, form, fieldset {
margin: 0;
padding: 0;
line-height: 1.0;
font-family:
"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
}
ul {
list-style: none;
}
a {
text-decoration: none;
color: #222;
}
img {
border: none;
}
img, input {
vertical-align: bottom;
}
.pc-nav {
margin-top:50px;
height: 50px;
border-bottom:1px solid #999;
}
.pc-nav ul {
width:960px;
margin: 0 auto;
overflow: hidden;
height:50px;
}
.pc-nav li {
float: left;
height: 30px;
width: 16.66%;
border-right: 1px solid #999;
box-sizing: border-box;
}
.pc-nav li:first-child {
border-left: 1px solid #999;
box-sizing: border-box;
}
.pc-nav li a {
display: block;
line-height: 50px;
white-space: nowrap;
text-indent: 100%;
overflow: hidden;
}
.pc-nav li.nav1 a {
background: url(img/nav.png) no-repeat center top;
}
.pc-nav li.nav2 a {
background:url(img/nav.png) no-repeat center -50px;
}
.pc-nav li.nav3 a {
background:url(img/nav.png) no-repeat center -100px;
}
.pc-nav li.nav4 a {
background:url(img/nav.png) no-repeat center -150px;
}
.pc-nav li.nav5 a {
background:url(img/nav.png) no-repeat center -200px;
}
.pc-nav li.nav6 a {
background:url(img/nav.png) no-repeat center -250px;
}
.pc-nav li a:hover {
line-height: 47px;
border-bottom:solid 3px #ed0200;
}
.pc-nav li.nav1 a:hover {
background: url(img/nav_h.png) no-repeat center top;
}
.pc-nav li.nav2 a:hover {
background:url(img/nav_h.png) no-repeat center -50px;
}
.pc-nav li.nav3 a:hover {
background:url(img/nav_h.png) no-repeat center -100px;
}
.pc-nav li.nav4 a:hover {
background:url(img/nav_h.png) no-repeat center -150px;
}
.pc-nav li.nav5 a:hover {
background:url(img/nav_h.png) no-repeat center -200px;
}
.pc-nav li.nav6 a:hover {
background:url(img/nav_h.png) no-repeat center -250px;
}
screen and (max-width:959px){
.pc-nav {
width:98%;
padding:0 1%;
}
@media screen and (max-width:640px){
.pc-nav {
width:100%;
height:120px;
margin:0;
border-bottom:none;
}
.pc-nav ul {
width: 100%;
height: 120px;
overflow:hidden;
}
.pc-nav li {
width: 50%;
height:40px;
border-right: none;
box-sizing: border-box;
border-bottom: 1px solid #CCC;
}
.pc-nav li:first-child {
border-left: none;
box-sizing: border-box;
}
.pc-nav li a {
display: block;
line-height: 40px;
white-space: normal;
text-indent: 0;
overflow: visible;
padding-left: 30px;
box-sizing: border-box;
font-size:14px;
position:relative;
}
.pc-nav li a:before {
display:block;
content:"";
position: absolute;
top:10px;
left:20px;
width:2px;
height:20px;
background:#F00;
}
.pc-nav li.nav1 a {
background: none;
}
.pc-nav li.nav2 a {
background: none;
}
.pc-nav li.nav3 a {
background: none;
}
.pc-nav li.nav4 a {
background: none;
}
.pc-nav li.nav5 a {
background: none;
}
.pc-nav li.nav6 a {
background: none;
}
.pc-nav li a:hover {
line-height: 40px;
background: none;
border-bottom:none;
text-decoration: underline;
}
.pc-nav li.nav1 a:hover,
.pc-nav li.nav2 a:hover,
.pc-nav li.nav3 a:hover,
.pc-nav li.nav4 a:hover,
.pc-nav li.nav5 a:hover,
.pc-nav li.nav6 a:hover {
background: none;
}
.pc-nav li:nth-child(odd) {
border-right: 1px solid #999999;
}
}
</style>
</head>
<body>
<nav class="pc-nav">
<ul>
<li class="nav1"><a href="#">商品情報</a></li>
<li class="nav2"><a href="#">キャンペーン</a></li>
<li class="nav3"><a href="#">エンタメ</a></li>
<li class="nav4"><a href="#">CSV活動</a></li>
<li class="nav5"><a href="#">企業情報</a></li>
<li class="nav6"><a href="#">お客様相談室</a></li>
</ul>
</nav><!--/pc-nav-->
</body>
</html>
