Webサイトを作る度に調べては忘れ、毎度毎度一から調べ直していたので自分用の備忘録として。
↑こんな感じのヘッダーにする
HTML
test.html
<header><navid="list"><ulid="means"><ahref="index.html"target="blank"><liid="home"class="content">Home</li></a><ahref="info.html"target="blank"><liid="info"class="content">info</li></a><ahref="contact.html"target="blank"><liid="contact"class="content">contact</li></a></ul></nav></header>ul内でliタグをaタグで囲むのがポイント。逆にすると文字にしかハイパーリンクがかからず、リストの端をクリックしても正常に動作しない。
CSS
test.css
a{text-decoration:none;color:white;}#list{overflow:hidden;text-align:center;list-style:none;background-color:black;width:100%;position:fixed;padding:0;margin:0;margin-top:0px;}.content{display:inline-block;padding:10px;padding-left:5%;padding-right:5%;border-left:1pxsolid#eee;transition:1.0s;}.content:hover{background-color:gray;transition:1.0s;}リストごとに色を変えたい時はclassで個々に色指定すれば良い。
aタグ
a{text-decoration:none;color:white;}text-decoration:noneでハイパーリンク指定時にできる青い下線を消す。
文字色を指定することでハイパーリンクを指定しても文字が青くならないようにする。(#list,.contentで指定しても良い)
↓こんな感じの青線と文字色を消す。
#list
#list{overflow:hidden;text-align:center;list-style:none;background-color:black;width:100%;position:fixed;padding:0;margin:0;margin-top:0px;}overflowはレイアウト崩れ防止。
text-alignでメニューの中心をページの中央にする。（floatではダメ）
list-styleでliタグを使用すると左側につくデカイ黒丸を消す。
positionでスクロールしてもヘッダーを固定したままにする。
ヘッダーを固定するとなぜか位置がずれたりするのでpaddingとmarginで調整する。
.content
.content{display:inline-block;padding:10px;padding-left:5%;padding-right:5%;border-left:1pxsolid#eee;transition:1.0s;}.content:hover{background-color:gray;transition:1.0s;}display:inline-blockで横並びにする。
paddingは別々に指定しているが本来1行で指定した方が効率良い（今回はそこまでコードが長くないので放置）。
borderとかhoverのトランジションとかはオプション。
これだけ書いとけば忘れないはず...