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

南の島の仲間たち　3C

2009年3月04日　配布
2010年6月15日　拍手機能に対応しました。
9月13日　新フッターに対応。コメント投稿者のメールアドレスを非公開にしました。
2012年2月　　　削除されました。フラッシュテンプレート全面削除のためのようです。

拍手機能に対応しました。

表示確認データはテクニカルデータを参照してください。

プラグインは左が1+2、右が3+4+5になっています。

Flash でページの下に魚を泳がせました。魚が見えない方はADOBEのホームページでFlash Player をダウンロードしてください。ADOBE Flash Player のページへ行く

記事の下にランキング用バナー設置個所があります。バナーや広告を貼り付けたい方はこちらを参照してください。

更新前：コメント投稿者名に付くメールアドレスリンクの色は、文章と同じです。マウスオーバーでリンクの有無を確認してください。詳しい説明はこちらにあります。
更新後：コメント投稿者のメールアドレスは非公開です。アドレスの有無は、コメント一覧ページで確認してください。

SEO・検索エンジン最適化してあるので、GoogleやYahooなどの検索エンジンに引っ掛かりやすくなっています。ブログ管理ページ左側の「便利ツール」にある「検索エンジン登録」をすると確率が上がります。

画像はもずねこ様よりお借りしています。画像がお気に召しましたら、もずねこ様のサイトよりオリジナルをダウンロードしてください。

素材の加工、他での使用は厳禁です。テンプレートご使用の際には利用規約を一読ください。

ブログパーツは170px (ピクセル) 以下のものを使用してください。

画像をクリックするとプレビューが見られます。

[0回]

南の島の仲間たち　2C

2009年3月04日　配布
2010年6月15日　拍手機能に対応しました。
9月13日　新フッターに対応、コメント投稿者のメールアドレスを非公開にしました。
2012年9月03日　ページ下のフラッシュを画像に変更しました。

拍手機能に対応しました。

表示確認データはテクニカルデータを参照してください。

プラグインは切り替え式になっています。ボタンを押すと入れ替わります。メニュー1はプラグイン1+2、メニュー2はプラグイン3+4+5です。

プラグインは左右の変更ができます。詳しくはカスタマイズのこちらを参照してください。

記事の下にランキング用バナー設置個所があります。バナーや広告を貼り付けたい方はこちらを参照してください。

画像はもずねこ様よりお借りしています。画像がお気に召しましたら、もずねこ様のサイトよりオリジナルをダウンロードしてください。

素材の加工、他での使用は厳禁です。テンプレートご使用の際には利用規約を一読ください。

ブログパーツは180px (ピクセル) 以下のものを使用してください。

画像をクリックするとプレビューが見られます

[0回]

南の島の仲間たちが公開されました

登録二日目で新しいテンプレートが公開されました。
昨日は何も出てなかったけど、順番待ちだったんですね。
無事審査を通ってホッとしています。

今回は生まれて初めてのフラッシュを使ったのでいろいろと苦労しましたけど、終わりよければすべてよし、な心境です。作品第一号ということで雑なところがありますが、そこらへんは目をつぶっていただくとして（笑）、使い方は覚えたので、勉強したらもっと使えるようになるかもしれません。

２カラムのほうではプラグイン切り替え方式を採用しています。
プレビューでは全く変わらないように見えますが、メニューボタンを押してからページをスクロールすると、プラグインの数が変わっているのがわかります。
あまり使わないプラグインをメニュー2にしておけば、画面がすっきりするし無駄に長くなりません。

記事のタイトルでは、ペンギンが少しずつ顔を出していきます。気が付かれなかった方用に説明しときます（笑）

ページ下で魚が泳いでいない方は、ADOBEのホームページでFlash Player をダウンロードしてください。
ADOBE Flash Player のページへ行く

今時間がないので、テンプレートの詳細は後でここに載せます。

[0回]

ただいま修正中

プレビューで次のテンプレートがここにきておりますが、ちょーっと修正が出てきましたので、登録はもう少し先になります。
本当ならまたここから降ろさなきゃいけないんですけど、めんどくさいのでこのままにしときます（＾＾；）
どうせこれが配布開始になったらここに持ってくるんだし・・・・・・

３月１０日から１０日間ほどマルタ（イタリアの南の島）に飛ぶことになったので、がんばって処理します。
ついでと言っちゃあなんですが、今回は２カラムと３カラムを作りましたので、同時に出す予定です。
では、また頑張ってきまーす

[0回]