yahooのトップページのニュース欄などにも使われているタブメニュー。
このサイトのトップページ右側にもあるjavascriptとCSSを使ったタブメニューの作り方。
実際ものすごく簡単です！
わかりやいようにサンプルソース内にjava、cssのすべてを記述しています。
たった一つのhtmlファイルでOK！
気になる人はjavaとcssを外部に置くとスマートですね。
サンプルはこちら→
以下がサンプルソースです。シンプルですね〜＾＾
無駄な記述を極力省きました（汗
たったこれだけです＾＾
head部に記述 （クリックで全選択）
ここまでをhead部分に記述します。
まぁこの部分は外部に置いたほうがスマートだったりしますが・・・。
以下をbody内に記述すればOK。
一番下のjavaの記述部分はとにかく一番下に置きましょう。
じゃないと反映されません。
body部に記述（クリックで全選択）
javaの記述は2箇所だけです。
CSSで好きなようにカスタマイズできます。
IDのtab-wrapperで全体の幅を指定しているので、数値を変えれば幅を自由に変えられます。
また、これは単純にスタイルシートだけで実現していますが、画像等を使うとさらにかっこよくなりますね。
トップページのタブメニューはタブ部分に背景画像を設定しています。
参考までにこんな感じ。
また、メニューの数を増やすのも簡単です。
�．螢好班�分に項目を付け足します。
(例
�▲好織ぅ襯掘璽箸�#news1, #news2, #news3の部分に#news4を付け足す。
例）news1, #news2, #news3,#news4
�０貳峅爾�javaの部分にも付け足します。（カンマを付け忘れないように！news4の部分（最後尾）には付けません）
例）
たったこれだけで増やせます！簡単しょ！？!(^^)!
このサイトのトップページ右側にもあるjavascriptとCSSを使ったタブメニューの作り方。
実際ものすごく簡単です！
わかりやいようにサンプルソース内にjava、cssのすべてを記述しています。
たった一つのhtmlファイルでOK！
気になる人はjavaとcssを外部に置くとスマートですね。
サンプルはこちら→
以下がサンプルソースです。シンプルですね〜＾＾
無駄な記述を極力省きました（汗
たったこれだけです＾＾
head部に記述 （クリックで全選択）
ここまでをhead部分に記述します。
まぁこの部分は外部に置いたほうがスマートだったりしますが・・・。
以下をbody内に記述すればOK。
一番下のjavaの記述部分はとにかく一番下に置きましょう。
じゃないと反映されません。
body部に記述（クリックで全選択）
javaの記述は2箇所だけです。
CSSで好きなようにカスタマイズできます。
IDのtab-wrapperで全体の幅を指定しているので、数値を変えれば幅を自由に変えられます。
また、これは単純にスタイルシートだけで実現していますが、画像等を使うとさらにかっこよくなりますね。
トップページのタブメニューはタブ部分に背景画像を設定しています。
参考までにこんな感じ。
また、メニューの数を増やすのも簡単です。
�．螢好班�分に項目を付け足します。
(例
�▲好織ぅ襯掘璽箸�#news1, #news2, #news3の部分に#news4を付け足す。
例）news1, #news2, #news3,#news4
�０貳峅爾�javaの部分にも付け足します。（カンマを付け忘れないように！news4の部分（最後尾）には付けません）
例）
たったこれだけで増やせます！簡単しょ！？!(^^)!
投票数:304
平均点:6.18
 すぐに使えるJavaScript |
 すぐに使えるちょっとおしゃれなJavascriptスライドショーいろいろ。設置法、使い方など |