Home > XHTML CSS > CSS メニューボタン

CSS メニューボタン

  • Posted by: wu
  • August 24, 2005 8:45 AM
  • XHTML CSS

2007-01/20更新しました。

ソースコードを見直してボタン化の方法を変えました。CSSによる横並びメニューと同じ方法でボタン化しています。

変更点は以下の通りです。

  • a要素にwidthを指定していたのを、親要素に変更。これにより、a要素には自由にpaddingが指定できるようになった。
  • HTML側でulとliのセットのみでボタン化できるようにした。
  • プロパティの記述順序を変更

マウス反応範囲が横まで広がったメニューのスタイル。

<ul id="globalNavi">
 <li><a href="./">List1</a></li>
 <li><a href="./">List2</a></li>
 <li><a href="./">List3</a></li>
 <li><a href="./">List4</a></li>
</ul>

コピーペーストですぐに使用できるように作りましたが、id名、marginやcolorプロパティなどはサイトに合わせて適切に変更してください。

Comments:5

Comment Form
wu 2005年8月24日 11:52

何気に生徒の中にはBazookaでCSS勉強してる人がいたりする。授業より先に。

wu 2005年8月24日 13:05

liのdisplay:inlineもそうだけど、aのposition: relativeとかの回避策って説明するの大変だなぁ・・・。

Leo 2005年8月25日 23:17

授業より先にBazookaでCSS勉強した奴デス。
しかし自分のサイトでどんなに調節しても、Bazookaの文章の読みさすさには敵わない。うーむ。

行間と字間、リキッドデザイン、グリッドデザイン。等等の話をしてるときのwuはカッコヨク、サトで熱く語ったのは忘れられません。

そんなこんなでもう僕ももうヒヨコ。がんばるぞー

wu 2005年8月26日 14:42

WEBの話するとテンションあがるからねー！

通 2005年8月30日 20:08

めもメモ。

Trackbacks:0

TrackBack URL for this entry
http://3ping.org/mt/mt-tb.cgi/50
Listed below are links to weblogs that reference
CSS メニューボタン from 3ping.org

Home > XHTML CSS > CSS メニューボタン

Categories
Tag Cloud
Archives
Book

実践 Web Standards Design

拙著「実践 Web Standards Design」ではXHTMLやCSSの仕様からマークアップの手法・考え方をはじめ、レイアウトや実践的なWebサイト構築のワークフロー、そしてCSSを利用したさまざまな技術的Tipsを解説しています。

Products
Works

テクノスカレッジ 専門学校

mt.Vicuna x 専門学校

2009年度に向けた学院サイトを制作しました。

Search
Feeds

Return to page top