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回]