忍者ブログ

CriCri

クリエイティブになりたいクリクリ工房

   

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

デモランキングバナー

メニューをボタンで切り替える

今回はメニューの切り替えのスクリプトをご紹介します。
これはプラグインの折りたたみの応用で、ボタンで二つのメニューが入れ替わる、一番簡単なやり方です。

ページが読み込まれた時には一番目のメニューがいつも表示されています。ボタンを押すと二番目のメニューに切り替わりますが、その時にボタンもMenu2 を表示するように設定しています。ボタンをもう一度押して一番目のメニューに戻れば、ボタンはMenu1を表示します。こうしておけば、今どのメニュー を見ているのか一目瞭然です。

まずスクリプトのほうですが、<head></head>  の中に入れます。
プラグインの折りたたみが基礎になっているので、よく似ています。
function hideshow(){
    divmenu1 = document.getElementById("menu-1");
    divmenu2 = document.getElementById("menu-2");
    changebtn = document.getElementById("btnHideShow");
    if(divmenu1.style.display == "block") {
            divmenu1.style.display = "none";
            divmenu2.style.display = "block";
            changebtn.value = "Menu 2";
        }
        else{
            divmenu1.style.display = "block";
            divmenu2.style.display = "none";
            changebtn.value = "Menu 1";
        }
    }
ここではボタンを押すと呼び出されるように、イベントハンドラをonclick にしています。
説明用に「南の島の仲間たち」のHTMLを持ってきました。ボタンはプラグインブロックの上に設置しています。
プラグインはメニューブロックを作って中に入れてやります。初期値として、スタイルでメニュー1をdisplay:block (可視)に、メニュー2をdisplay:none (不可視)に設定してあります。ここをスクリプトで書き換えるわけです。
<!-- ========== プラグインブロック ========== -->
    <div class="PluginBlock">
      <div class="Menubtn">                     
        <input id="btnHideShow" type="button" value="Menu 1" onclick="hideshow()" />
      </div>

<!-- ========== メニュー1 ========= -->
      <div id="menu-1" class="Menublock" style="display:block">           
(ここにプラグイン1とプラグイン2を入れる)
      </div>
<!-- ========== メニュー1 エンド ========= -->

<!-- ========== メニュー2 ========= -->
      <div id="menu-2" class="Menublock" style="display:none">
(ここにプラグイン3からプラグイン5までを入れる)
     </div>
<!-- ========== メニュー2 エンド ========= -->

    </div>
<!-- ========== プラグインブロック エンド ========== -->
緑色がイベントハンドラ部分、赤色がスクリプトで変更されるところです。
保障はしませんが、使用は自由にされて結構です。

拍手[0回]

デモランキングバナー
  

COMMENT

NAME
TITLE
MAIL (非公開)
URL
EMOJI
Vodafone絵文字 i-mode絵文字 Ezweb絵文字
COMMENT
PASS (コメント編集に必須です)
SECRET
管理人のみ閲覧できます
 

TRACKBACK

TrackbackURL

カレンダー

05 2017/06 07
S M T W T F S
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30

AD

PR

ブログ内検索

素材サイト様

White Board様
White Board Banner
妙の宴様
妙の宴 Banner
もずねこ様
Mozneko Banner
押し花とアイコン様
押し花 バナー
petit sozai emi様
petit sozai emi
幕末維新新選組様
幕末維新新選組
The Heart of Eternity 様
thoe バナー
Crambon様
Crambon バナー
DragonArtz Design 様

プロフィール

メール de コンタクト

このブログへのリンク

Firefoxを支援しています

管理人はFirefoxの愛好者です。Internet Explorer は大嫌い。IEよりはるかに優れたFirefoxをお試しあれ。ダウンロードは下のバナーから無料でできます。
Firefox ブラウザ無料ダウンロード

現在の閲覧者

Copyright ©  -- CriCri --  All Rights Reserved

Design by CriCri / material by DragonArtz Desighns / powered by NINJA TOOLS / 忍者ブログ / [PR]