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

プレビュー

PC版

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

スマートフォン版

コード

HTML

<div id="wrapper">
    <nav>
	<ul id="appleNav">
	    <li><a href="#"><img src="http://jsrun.it/assets/5/q/n/W/5qnWX.png" alt="Apple Logo"></a></li>
            <li><a href="#" class="current">ストア</a></li>
            <li><a href="#">Mac</a></li>
            <li><a href="#">iPod</a></li>
            <li><a href="#">iPhone</a></li>
            <li><a href="#">iPad</a></li>
            <li><a href="#">iTunes</a></li>
            <li><a href="#">サポート</a></li>
            <li>
		<form>
		    <input type="text">
                </form>
            </li>
	</ul>
    </nav>
</div>

CSS

/* リセット */
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input{
    margin:0;
    padding:0;
}
/* wrapper */
#wrapper { 
    width:980px; 
    margin:40px auto; 
}
/* appleNav */
#appleNav { 
    margin:40px 0; 
    list-style:none;
    
    font-family: 
	"Lucida Grande",
	Helvetica,
	Arial,
	Verdana,
	sans-serif;
    letter-spacing:-0.5px; 
    font-size:13px;
    font-weight: bold;
    
    /* text-shadow: 横方向へのずれ 下方向へのずれ ぼかし具合 影の色; */
    text-shadow:0 -1px 3px #202020;
    
    width:980px; 
    height:36px;
    
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border-radius:4px;
    
    /* box-shadow: 横方向へのずれ 下方向へのずれ ぼかし具合 影の色; */
    -moz-box-shadow: 0px 3px 3px #cecece;
    -webkit-box-shadow: 0px 3px 3px #cecece;
    box-shadow: 0 3px 4px #8b8b8b;
}
#appleNav li { 
    width:104px; 
    height:36px; 
    display:block; 
    float:left; 
    border-right:1px solid #5d5d5d; 
    border-left:1px solid #929292; 
    border-bottom:1px solid #575757; 
    border-top:1px solid #797979;

    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #787878), color-stop(0.5, #5E5E5E), color-stop(0.51, #707070), color-stop(1, #838383));
    background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%);
    background-color: #5f5f5f;　/* フォールバック */
}
/* hover */
#appleNav li:not(:last-child):hover {
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #3F3F3F), color-stop(0.5, #383838), color-stop(0.51, #434343), color-stop(1, #555555));
    background-image: -moz-linear-gradient(center bottom, #3F3F3F 0%, #383838 50%, #434343 51%, #555555 100% );
    background-color: #383838; /* フォールバック */
    
    -moz-box-shadow: inset 0 0 5px 5px #535353;
    -webkit-box-shadow: inset 0 0 5px 5px #535353;
    box-shadow: inset 0 0 5px 5px #535353;
}
/* active */
#appleNav li:not(:last-child):active {
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #3F3F3F), color-stop(0.5, #383838), color-stop(0.51, #434343), color-stop(1, #555555));
    background-image: -moz-linear-gradient(center bottom, #3F3F3F 0%, #383838 50%, #434343 51%, #555555 100% );
    background-color:#383838; /* フォールバック */
    
    -moz-box-shadow: inset 0 1px 6px 1px #000;
    -webkit-box-shadow: inset 0 1px 6px 1px #000;
    box-shadow: inset 0 1px 6px 1px #000;
}
/* 現在のページ */
#appleNav li .current,#appleNav li .current:hover { 
    background-image:-webkit-gradient(linear, left bottom, left top, from(#373737), to(#525051)); 
    background-image:-moz-linear-gradient(center bottom, #373737, #525051); 
    background-color:#373737;
    
    
    -moz-box-shadow:inset 0 10px 20px rgba(0,0,0,.5), inset 0 2px 5px #363636, inset 0 0 0 1px rgba(255,255,255,.1);
    -webkit-box-shadow:inset 0 10px 20px rgba(0,0,0,.5), inset 0 2px 5px #363636, inset 0 0 0 1px rgba(255,255,255,.1); 
    box-shadow:inset 0 10px 20px rgba(0,0,0,0.5), inset 0 2px 5px #363636, inset 0 0 0 1px rgba(255,255,255,.1); 
}
#appleNav li a { 
    color:#fff; 
    text-decoration:none; 
    text-align:center; 
    display:block; 
    line-height:36px; 
    outline:none; 
}
/* 検索フィールド */
#appleNav form input { 
    width:84px; 
    height:20px; 
    margin-left:9px; 
    margin-top:8px; 
    border:none; 
    padding-left:20px; 
    padding-right:10px; 
    color:#eee;

    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
    
    background-image: url("http://jsrun.it/assets/y/J/1/I/yJ1Ii.png"), -webkit-gradient(linear, left bottom, left top, color-stop(0, #747474), color-stop(0.5, #6E6E6E), color-stop(0.51, #7E7E7E), color-stop(1, #8D8D8D));
    background-image: url("http://jsrun.it/assets/y/J/1/I/yJ1Ii.png"), -moz-linear-gradient(center bottom, #747474 0%, #6E6E6E 50%, #7E7E7E 51%, #8D8D8D 100%);
    background-repeat: no-repeat;
    
    background-color: #6E6E6E; /* フォールバック */
    
    -moz-box-shadow: inset 0 2px 1px 1px #363636;
    -webkit-box-shadow: inset 0 2px 1px 1px #363636;
    box-shadow: inset 0 2px 1px 1px #363636;
}
/* border-radius: 左上 右上 右下 左下; */
#appleNav li:first-child {
    -moz-border-radius: 4px 0 0 4px;
    -webkit-border-radius: 4px 0 0 4px;
    border-radius: 4px 0 0 4px;
    
    border-left: none;
}
/* ロゴイメージ */
#appleNav li:first-child a img {
   vertical-align: middle; 
    margin-top: -2px;
}
#appleNav li:last-child {
    width:132px;
    
    -moz-border-radius:0 4px 4px 0;
    -webkit-border-radius:0 4px 4px 0;
    border-radius:0 4px 4px 0;
    
    border-right:none;
}
/* フェードアニメーション(Webkitブラウザのみ) */
@-webkit-keyframes showMenu {
    from { opacity: 0; top:-20px; }
    to   { opacity: 1; }
}
#appleNav {
    -webkit-animation: showMenu 1s; 
    position: relative;
}