CSS3で作る可変タイプのナビゲーション

css

さてさて、そろそろCSS3が普通に利用されてきてますね。なんてったてスマートフォン市場が拡大してるので

そんで、PCやスマートフォンやタブレットにあったレスポンスデザインが今後増えていくとなると、可変に対応できるのがいいかなと思いまして。
そうなるとグローバールナビゲーションも今後はCSS3でグラデーションなどで装飾が出来るようになるので可変対応しやすいと思うので、可変に対応したナビゲーションのCSSをメモる。

CSS3を利用して横並びにする

ますはhtmlを下記のように組みました。まぁよくあるリストタグを利用したパターンです。

以前の場合だとリストタグを「float:left」のようにフローとを利用してましたが,CSS3の「display:box」を利用して横並びにします。
とりあえずグローバルナビゲーションを作りたいのでpaddingやmarginやリストなどは、無しの設定にしておきます。

nav ul{
    padding:0;
    margin:0;
    list-style-type:none;
    display:box;
    background-color:#333;
}

各ボタンをフレキシブルに対応させる

各ボタンの幅をナビゲーション全体の幅に合わせて均等にしたい場合は「box-flex」を利用する。

nav li{
    -webkit-box-flex:1;
}

上記の様に設定しておけば、仮にナビゲーションのボタンが増えたとしても、フレキシブルに対応して均等の幅に自動的になる。
またウィンドウの幅が変わっても特に幅を固定していないので自動的にボタンの幅もフレキシブルに対応します。

調整をして装飾をする

「box-flex:1」と設定しておけば一応、フレキシブルにはなりますが、後は各ボタンの装飾をしていきます
まずは余白を取りたいのでpaddingを設定して文字列を中央にしたいので「display:bolck」に設定してpaddingとtext-alignを設定します。またボタンの右側にボーダーを設定します。

nav li a{
    display:block;
    text-decoration:none;
    color:#fff;
    text-align:center;
    padding:6px;
    border-right:1px solid #fff;
}

あとは、一番右側のボタンにはボーダーは要らないのでCSS3のセレクタの「:last-child」で一番右のボタンだけボーダーを消します。

nav li:last-child a{
    border-right:none;
}

とざっくりですが、アシアルブログの「CSS3だけで作るレスポンシブデザイン対応ナビゲーションバーの作り方」を見ていただいたほうがちゃんとした記事になっていると思います。