ナビゲーションサンプル1
ナビゲーションサンプル1
ここ数日のナビゲーションの授業の復習の為2枚の画像をillustratorで用意し、CSSSpriteでナビを作りCSS3のtransition効果を利用してアレンジしました
所要時間:1時間半(画像作成に1時間以上)
コンセプト:ガレージ
デモはこちらから
(IEではtransitionに対応してないため見れません)
修正しましたので現在は見れません
改善点
- ガレージが開く前をスプレーアートで文字、ガレージが開いた後を内容に関連性のある写真にするとよかったが表現しきれなかった
- 7割程度開いているcurrentを用意して現在の場所をわかるようにした方がいい
ソース
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>ナビゲーションサンプル1</title> <link rel="stylesheet" href="css/navsample1style.css" media="screen,print"> </head> <body> <div id="nav"> <ul> <li id="home"><a href="#"><em>HOME</em></a></li> <li id="blog"><a href="#"><em>Blog</em></a></li> <li id="products"><a href="#"><em>Products</em></a></li> <li id="about"><a href="#"><em>About</em></a></li> <li id="contact"><a href="#"><em>Contact</em></a></li> </ul> </div> </body> </html>
@charset "UTF-8"; /* reset */ html, body, div, ul, li, em, a { margin: 0; padding: 0; } body { font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", meiryo, "メイリオ", osaka, "MS PGothic", "MS Pゴシック", sans-serif; } ul { list-style-type: none; } a { text-decoration: none; } img { border: 0; } em { visibility: hidden; } /* nav */ #nav { width: 600px; height: 60px; margin: 50px 0 0 50px; } /* GarageOpen */ #nav li { float: left; background-image: url("../img/garageopen.png"); } #nav li#home { background-position: 0 0; } #nav li#blog { background-position: -120px 0; } #nav li#products { background-position: -240px 0; } #nav li#about { background-position: -360px 0; } #nav li#contact { background-position: -480px 0; } /* GarageClose */ #nav li a { width: 120px; height: 60px; display: block; background-image: url("../img/garageclose.png"); background-repeat: no-repeat; background-position: 0 0; } #nav li#home a { background-position: 0 0; -moz-transition: background-position 1.5s 0s ease-in-out; -webkit-transition: background-position 1.5s 0s ease-in-out; -o-transition: background-position 1.5s 0s ease-in-out; transition: background-position 1.5s 0s ease-in-out; } #nav li#home a:hover { background-position: 0 -60px; -moz-transition: background-position 1.5s 0s ease-in-out; -webkit-transition: background-position 1.5s 0s ease-in-out; -o-transition: background-position 1.5s 0s ease-in-out; transition: background-position 1.5s 0s ease-in-out; } #nav li#blog a { background-position: -120px 0; -moz-transition: background-position 1.5s 0s ease-in-out; -webkit-transition: background-position 1.5s 0s ease-in-out; -o-transition: background-position 1.5s 0s ease-in-out; transition: background-position 1.5s 0s ease-in-out; } #nav li#blog a:hover { background-position: -120px -60px; -moz-transition: background-position 1.5s 0s ease-in-out; -webkit-transition: background-position 1.5s 0s ease-in-out; -o-transition: background-position 1.5s 0s ease-in-out; transition: background-position 1.5s 0s ease-in-out; } #nav li#products a { background-position: -240px 0; -moz-transition: background-position 1.5s 0s ease-in-out; -webkit-transition: background-position 1.5s 0s ease-in-out; -o-transition: background-position 1.5s 0s ease-in-out; transition: background-position 1.5s 0s ease-in-out; } #nav li#products a:hover { background-position: -240px -60px; -moz-transition: background-position 1.5s 0s ease-in-out; -webkit-transition: background-position 1.5s 0s ease-in-out; -o-transition: background-position 1.5s 0s ease-in-out; transition: background-position 1.5s 0s ease-in-out; } #nav li#about a { background-position: -360px 0; -moz-transition: background-position 1.5s 0s ease-in-out; -webkit-transition: background-position 1.5s 0s ease-in-out; -o-transition: background-position 1.5s 0s ease-in-out; transition: background-position 1.5s 0s ease-in-out; } #nav li#about a:hover { background-position: -360px -60px; -moz-transition: background-position 1.5s 0s ease-in-out; -webkit-transition: background-position 1.5s 0s ease-in-out; -o-transition: background-position 1.5s 0s ease-in-out; transition: background-position 1.5s 0s ease-in-out; } #nav li#contact a { background-position: -480px 0; -moz-transition: background-position 1.5s 0s ease-in-out; -webkit-transition: background-position 1.5s 0s ease-in-out; -o-transition: background-position 1.5s 0s ease-in-out; transition: background-position 1.5s 0s ease-in-out; } #nav li#contact a:hover { background-position: -480px -60px; -moz-transition: background-position 1.5s 0s ease-in-out; -webkit-transition: background-position 1.5s 0s ease-in-out; -o-transition: background-position 1.5s 0s ease-in-out; transition: background-position 1.5s 0s ease-in-out; }