Apple風メニューバーの作り方（CSS Sprite版）

プレビュー

PC版

Apple風メニューバー（CSS Sprite版） - jsdo.it - share JavaScript, HTML5 and CSS

スマートフォン版

コード

HTML

<div id="globalheader" class="nav02">
    <ul id="globalnav">
	<li id="nav01"><a href="#">Apple</a></li>
	<li id="nav02"><a href="#">Store</a></li>
	<li id="nav03"><a href="#">Mac</a></li>
	<li id="nav04"><a href="#">iPod</a></li>
	<li id="nav05"><a href="#">iPhone</a></li>
	<li id="nav06"><a href="#">iPad</a></li>
	<li id="nav07"><a href="#">iTunes</a></li>
	<li id="nav08"><a href="#">Support</a></li>
    </ul>
</div>

CSS

#globalheader { 
    width: 834px; 
    height: 38px; 
    margin: 18px auto; 
    position: relative; 
    z-index: 9998; 
}
#globalheader #globalnav { 
    margin: 0; 
    padding: 0; 
}
#globalheader #globalnav li { 
    display: inline; 
}
#globalheader #globalnav li a { 
    float: left; 
    width: 103px; 
    height: 0; 
    padding-top: 38px; 
    overflow: hidden; 
}
#globalheader #globalnav li a { 
    background-image: url(http://jsrun.it/assets/4/l/v/2/4lv2S.png); 
    background-repeat: no-repeat; 
}

/* オフマウス時 */
#globalheader #globalnav li#nav01 a { background-position: 0 0; }
#globalheader #globalnav li#nav02 a { background-position: -103px 0; }
#globalheader #globalnav li#nav03 a { background-position: -206px 0; }
#globalheader #globalnav li#nav04 a { background-position: -309px 0; }
#globalheader #globalnav li#nav05 a { background-position: -412px 0; }
#globalheader #globalnav li#nav06 a { background-position: -515px 0; }
#globalheader #globalnav li#nav07 a { background-position: -618px 0; }
#globalheader #globalnav li#nav08 a { background-position: -721px 0; }

/* hover時 */
#globalheader #globalnav li#nav01 a:hover { background-position: 0 -38px; }
#globalheader #globalnav li#nav02 a:hover { background-position: -103px -38px; }
#globalheader #globalnav li#nav03 a:hover { background-position: -206px -38px; }
#globalheader #globalnav li#nav04 a:hover { background-position: -309px -38px; }
#globalheader #globalnav li#nav05 a:hover { background-position: -412px -38px; }
#globalheader #globalnav li#nav06 a:hover { background-position: -515px -38px; }
#globalheader #globalnav li#nav07 a:hover { background-position: -618px -38px; }
#globalheader #globalnav li#nav08 a:hover { background-position: -721px -38px; }

/* active時 */
#globalheader #globalnav li#nav01 a:active { background-position: 0 -76px; }
#globalheader #globalnav li#nav02 a:active { background-position: -103px -76px; }
#globalheader #globalnav li#nav03 a:active { background-position: -206px -76px; }
#globalheader #globalnav li#nav04 a:active { background-position: -309px -76px; }
#globalheader #globalnav li#nav05 a:active { background-position: -412px -76px; }
#globalheader #globalnav li#nav06 a:active { background-position: -515px -76px; }
#globalheader #globalnav li#nav07 a:active { background-position: -618px -76px; }
#globalheader #globalnav li#nav08 a:active { background-position: -721px -76px; }

/* 選択中 */
/* #globalheaderのclass名を変更する */
#globalheader.nav01 #globalnav li#nav01 a:hover { background-position: 0 0; cursor: default; }
#globalheader.nav02 #globalnav li#nav02 a { background-position: -103px -114px !important; }
#globalheader.nav03 #globalnav li#nav03 a { background-position: -206px -114px !important; }
#globalheader.nav04 #globalnav li#nav04 a { background-position: -309px -114px !important; }
#globalheader.nav04 #globalnav li#nav05 a { background-position: -412px -114px !important; }
#globalheader.nav05 #globalnav li#nav06 a { background-position: -515px -114px !important; }
#globalheader.nav06 #globalnav li#nav07 a { background-position: -618px -114px !important; }
#globalheader.nav07 #globalnav li#nav08 a { background-position: -721px -114px !important; }