kahakaiのメニューデザインをぱくる

COREBlogの固定幅デザインをしたいわけですが、とりあえずのミッションは

• 固定幅にする
• kahakai

のメニューデザインをぱくって使ってみたい

という2点。

まずはkahakaiのメニューデザインをぱくろう。これは結構簡単。というかそのまま流用すればいいのだけど、それじゃああまり芸がないでしょうというわけで何らかの小細工を入れたい。

まず、kahakaiでは以下のようになってる。

div.menu {

    margin: 0px auto;

    border-bottom: none;

    color: white;

    width: 640px;

    margin-top: 4px;

    padding: 3px 0px 3px 0px;

    text-align: center;

}



div.menu ul {

    list-style-type: none;

    margin-left: 0px;

    padding-left: 10px;

    display: inline;

}  	



div.menu li {

    display: inline;

    background: #95b0de;

    padding: 5px;

    text-transform: uppercase;

    font-size: 8pt;

}

リストをインライン要素にしてるのがミソですな。ふーむ、おもしろい。んでもブロック要素でfloatしてもいいですな。floatだけに不安はあるけれど挑戦してみよう。

ポイントは、liをブロック要素にして左にフロートさせることですな。

基本的にこの方向でこのページの上にカテゴリリスト付けてみた（必要あるのかどうかは別だけど…）。ブロック＆フロートでいいところは、ホバーで色が変わるように設定できること。

というわけでこんな具合になりましたとさ。

#menu ul {

  margin: 0 9px;

  padding: 0;

  list-style-type: none;

}  	



#menu ul li {

  margin: 0;

  padding: 0;

  display: block;

  float: left;

}



#menu ul li a { 

  display: block;

  margin: 0 7px;

  padding: 5px 13px;

  background-color: #334D66;

  color: #fff;

  font-size: 12px;

  text-align: center;

  text-decoration: none;

}

  

#menu ul li a:hover {

  background-color: #ff8800;

  color: #fff;

}