グローバルナビをHTMLとCSSのみで追加しました。
先日、ブログのヘッダーにカテゴリー用のグローバルナビを追加しました。
ずっとテンプレのデザインだったので、追加したいなぁーと。
ボンヤリ思っていたのに、重い腰が動かず。
と言っても、コード的にはほんの数行です。
HTML <ul id="gnav"> <li><a href="http://">音楽</a></li> <!--任意のURLと文言--> <li><a href="http://">デザイン</a></li> <!--任意のURLと文言--> <li><a href="http://">オピニオン</a></li> <!--任意のURLと文言--> <li><a href="http://">ライフハック</a></li> <!--任意のURLと文言--> <li><a href="http://">Twitter</a></li> <!--任意のURLと文言--> <li><a href="http://">note</a></li> <!--任意のURLと文言--> </ul>
CSS #gnav{ width:800px; /*任意の幅で*/ height: 30px; /*任意の高さで*/ margin:0 auto; /*センタリング用*/ list-style:none; } #gnav a{ display:block; line-height:30px; /*任意の高さで(基本heightと同じ数値)*/ vertical-align: baseline; } #gnav a:hover{text-decoration:none;} #gnav li{ width: 133px; /*任意の幅*/ float: left; background-color: #4d4d4d; /*任意の色*/ text-align: center; color: #fff; /*任意の色*/ } #gnav li:hover{background-color:#47a89c;} /*任意の色*/
実装の際、気をつけるポイントは
HTML
- aタグはliタグにネストする。
- liタグの文言の高さは、line-heightで指定。
- aタグをブロック要素にする。
たったの3つです。
aタグはliタグにネストする。
入れ子の構造を考えると当たり前ですね。
liタグの文言の高さは、line-heightで指定。
指定しないと文言が要素の一番上に張り付きます。
line-heightが無い場合
line-heightをheightと同じ数値に指定した場合
aタグをブロック要素にする。
以上の工程のままだとマウスオーバーした時に、liタグは色が変わるのにリンクへ飛べない状態になっています。
これはliタグ全体にaタグのリンクが掛かっていないためです。
aタグはインライン要素なのでdisplay:block;でブロック化しちゃいましょう。
まだブログデザインもちょこちょこ仕様変更する構想はあるので、
変更の際にはブログ記事に出来ていけたらなーと。