Rethink navigation

CSS

色々指定個所や値を変えて、ナビゲーションのしくみを考えてみた。

縦ナビ

/* ▼縦ナビ */
#nav {
    margin: 50px 0 0 50px;
    width: 200px;
}

#nav ul {
    list-style-type: none;
    text-align: center;
}

#nav li {
}

#nav li a {
    display:block;
    margin: 20px 0 0 0;
    padding: 14px 0;
}

#nav a:link, #nav a:visited {
    color: #FFFFFF;
    background-color: #773F3F;
    text-decoration: none;
}

#nav a:hover {
    background-color: #E09898;
	
}
/* ▲縦ナビ */

nav
・height (設定不要。下段に項目が追加される可能性がある為)
・width (ナビ全体の横幅を指定)
・margin (ナビ周辺の幅を指定)

ul
・list-style-type: none (リストの黒丸を消す)

li
・設定不要

li a
・li aがliの上に乗っている為、liで指定出来るものはli aで指定可能
・margin (各ボックス間の幅を指定)
・上下のmarginは相殺される
・display: block (aに面積を持たせ、リンク文字以外にもマウスが反応する様にする。
インライン要素からブロック要素へ変換する)

a:link, a:visited, a:hover
・サイズや文字色等の文字の装飾だけ、設定すればよい
・text-decoration: none (リンク文字のアンダーラインを消す)


横ナビ

/* ▼横ナビ */
#nav2 {
    font-size: 1em;
    width: 1100px;
    margin: 50px 0 0 50px;
}

#nav2 ul {
     list-style: none;
     text-align: center;
     overflow: auto;
}

#nav2 li {
    float: left;
}

#nav2 li a {
    width: 200px;
    margin: 0 10px 0 ;
    padding: 15px 0;
    display: inline;
    display: block;
}

#nav2 a:link, #nav2 a:visited {
    color: #FFFFFF;
    text-decoration: none;
    background-color: #773F3F;
}

#nav2 a:hover {
    background-color: #E09898;
}
/* ▲ 横ナビ *>

nav
・width (ナビ全体の横幅を指定)
・height (指定不要)
・margin (ナビ周辺の幅を指定)

ul
・list-style-type: none (リストの黒丸を消す)
・text-align: center (各ボックス内の文字を中央寄せ)
・overflow: auto (文字拡大によるレイアウト崩れを防ぐ)

li
・float: left; (各ボックスを横に並べる)

li a
・li aがliの上に乗っている為、liで指定出来るものはli aで指定可能
・width (各ボックスの横幅を指定。ナビ全体の横幅から各ボックス間のpadding,border,marginを引いて、ボックス数で割った数より少ない値)
・margin (各ボックス間の幅を指定)
・左右のmarginは相殺されない
・height (特に設定は不要。line-height,padding上下でボックスの縦幅の変更可能)
・display: block (aに面積を持たせ、リンク文字以外にもマウスが反応する様にする。インライン要素からブロック要素へ変換する)
・display: inline (IE6によるバグ回避の為)

a:link, a:visited, a:hover
・サイズや文字色等の文字の装飾だけ、設定すればよい
・text-decoration: none (リンク文字のアンダーラインを消す)