SAMPLE

サンプルはこちら.

CODE

ナビゲーションバーのスタイルです. これを style.css に追加します.

#nav
{
    margin-top:20px;
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.9) 100%);
    background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.9) 100%);
    background: -o-linear-gradient(top, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.9) 100%);
    background: linear-gradient(top, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.9) 100%);
    border-top: 1px solid rgb(227, 224, 213);
    border-bottom: 1px solid rgb(227, 224, 213);
}

#nav .inner
{
    width: 1200px;
    margin:0px auto;
}

#nav ul
{
    display: -webkit-box;
    display: -moz-box;
    display: -o-box;
    display: box;
    width: 1200px;
    height: 40px;
    margin: 0px auto;
    
    list-style: none;
}

#nav ul li
{
    text-align: center;
    border-left: 1px solid rgb(227, 224, 213);
}

#nav ul li:last-child
{
    border-right: 1px solid rgb(227, 224, 213);
}

#nav ul li a
{
    display: block;
    width: 120px;
    height: 40px;
    padding-top: 10px;
    
    color: black;
    -webkit-transition: 250ms;
    -moz-transition: 250ms;
    -o-transition: 250ms;
    -ms-transition: 250ms;
    transition: 250ms;
}

#nav ul li a:hover
{
    box-shadow: 0px 0px 10px #aaa;
    background: white;
}

POINT

お馴染みのグラデーション

上から下にかけて白色のアルファグラデーションをかけています. 背景の青が透けてちょっと良い感じ♪♪

background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.9) 100%);
background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.9) 100%);
background: -o-linear-gradient(top, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.9) 100%);
background: linear-gradient(top, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.9) 100%);

display: box; でフレキシブルボックスレイアウト

横並びにするための設定です. 詳しくはこちら.

display: -webkit-box;
display: -moz-box;
display: -o-box;
display: box;

リストの横の点々を非表示に

ul 要素はデフォルト左側に点が表示されてしまうので表示されないよう設定します.

list-style: none;

左右にラインを入れて区切りを

全てのli要素の左側に縦ラインを入れて, 最後の要素のみ右側にもラインを入れています.

#nav ul li
{
    text-align: center;
    border-left: 1px solid rgb(227, 224, 213);
}

#nav ul li:last-child
{
    border-right: 1px solid rgb(227, 224, 213);
}

transition と hover の組み合わせで簡単アニメーション

トランジションアニメーションについてはこちら.

#nav ul li a
{
    display: block;
    width: 120px;
    height: 40px;
    padding-top: 10px;
    
    color: black;
    -webkit-transition: 250ms;
    -moz-transition: 250ms;
    -o-transition: 250ms;
    -ms-transition: 250ms;
    transition: 250ms;
}

#nav ul li a:hover
{
    box-shadow: 0px 0px 10px #aaa;
    background: white;
}