ナビゲーションをドロップダウンメニューに変更する

以前独自レイアウトでナビゲーションを横書きにする方法を紹介しましたが、jQueryのプラグインを使ってナビゲーションをドロップダウンメニューに変更する方法を考えてみます。

 

droppyをダウンロードする

まずはこちらのサイトからdroppy-0.1.2.zipをダウンロードしてください。

 

http://plugins.jquery.com/node/2946/release

 

 

HTMLを編集する

ダウンロードしたzipファイルを解凍すると、docフォルダの下にindex.htmlがあります。これをブラウザで開いてHTMLの枠の中をコピーし、「レイアウト」→「独自レイアウト」→「HTML」のHeadlineとheader.jpgの間にペーストします。

 

内容はあとで修正するので、とりあえずサンプルのまま貼り付けます。

 

 

 

保存すると右のように表示されます。

 

この時点ではただのリストです。

 

 

 

 

 

 

CSSを編集する

次にCSSをコピー&ペーストします。

 

droppy.cssをエディタで開いて全体をコピーし、「レイアウト」→「独自レイアウト」→「CSS」の末尾にペーストします。

 

改行やインデントは気にせずそのまま貼ってしまいます。

 

 

 

保存すると右のような表示になります。

 

だいぶそれっぽくなりましたが、まだドロップダウンは動作しません。

 

 

 

JavaScriptを編集する

次にJavaScriptですが、ここで注意があります。

 

Jimdoでは「レイアウト」→「独自レイアウト」→「ファイル」でJavaScriptをアップロードすることが出来るのですが、jQueryのプラグインでこれを行うと問題があります。

 

このアップローダでアップロードすると、勝手にヘッダ部に次のようなコードが書き込まれます。

 

<script type="text/javascript" src="http://kuriclio.jimdo.com/s/js/jquery-droppy.js?t=1274971602"></script> 

 

 ※ファイル名はアップロード時に jquery.droppy.js から jquery-droppy.js に変わります。

 

このコードは「設定」→「ヘッダ部を編集」でも表示されず、実行時に展開されます。

 

JimdoでjQueryを使う為の準備に書きましたが、Jimdo では prototype という JavaScript ライブラリが使われており、jQueryを使うためには工夫が必要です。

衝突を回避する noConflict() と外部スクリプトの読み込み順が重要になるのですが、アップローダを使うと意図しない位置に上記のコードが書き込まれてしまう為、うまく動作しないのです。

 

これを回避するために、SyntaxHighLighter で紹介した別サーバに jquery.droppy.js を配置する方法がありますが、

幸い droppy のコードは短いので、コードすべてを「設定」→「ヘッダ部を編集」に貼り付けることにします。

 

以下は jQuery のロードを含めた「ヘッダ部を編集」の全文です。

 

<script type="text/javascript" src="http://www.google.com/jsapi">
</script>

<script type="text/javascript">
//<![CDATA[
google.load("jquery","1.3");
//]]>
</script>
 
<script type="text/javascript">
//<![CDATA[
jQuery.noConflict();
//]]>
</script>

<script type="text/javascript">
//v![CDATA[
(function($) {
// ここから jquery.droppy.js の内容そのまま
/*
 * Droppy 0.1.2
 * (c) 2008 Jason Frame (jason@onehackoranother.com)
 */
$.fn.droppy = function(options) {
 
  options = $.extend({speed: 250}, options || {});
 
  this.each(function() {
 
    var root = this, zIndex = 1000;
 
    function getSubnav(ele) {
      if (ele.nodeName.toLowerCase() == 'li') {
        var subnav = $('> ul', ele);
        return subnav.length ? subnav[0] : null;
      } else {
        return ele;
      }
    }
 
    function getActuator(ele) {
      if (ele.nodeName.toLowerCase() == 'ul') {
        return $(ele).parents('li')[0];
      } else {
        return ele;
      }
    }
 
    function hide() {
      var subnav = getSubnav(this);
      if (!subnav) return;
      $.data(subnav, 'cancelHide', false);
      setTimeout(function() {
        if (!$.data(subnav, 'cancelHide')) {
          $(subnav).slideUp(options.speed);
        }
      }, 500);
    }
 
    function show() {
      var subnav = getSubnav(this);
      if (!subnav) return;
      $.data(subnav, 'cancelHide', true);
      $(subnav).css({zIndex: zIndex++}).slideDown(options.speed);
      if (this.nodeName.toLowerCase() == 'ul') {
        var li = getActuator(this);
        $(li).addClass('hover');
        $('> a', li).addClass('hover');
      }
    }
 
    $('ul, li', this).hover(show, hide);
    $('li', this).hover(
      function() { $(this).addClass('hover'); $('> a', this).addClass('hover'); },
      function() { $(this).removeClass('hover'); $('> a', this).removeClass('hover'); }
    );
  });
};
//ここまで
})(jQuery);
//]]>
</script>

<script type="text/javascript">
//<![CDATA[
(function($) {
  $(function() {
    $("#nav").droppy();
  });
})(jQuery);
//]]>
</script>

 

動きました!

 

あと少しです。

 

 

ナビゲーションへのリンクを張る

 

ナビゲーションの内容とURLをdroppyのHTML部分に書き込みます。

 

 

こんな感じにナビゲーションをクリックしながらエディタにURLをコピペすると、後の作業が楽です。

 

再び「レイアウト」→「独自レイアウト」→「HTML」を開き、HTMLを編集します。

    <ul id='nav'>
        <li>
            <a href='http://demo01-liyuanslab.jimdo.com/'>ホーム</a>
        </li>
        <li>
            <a href='http://demo01-liyuanslab.jimdo.com/about-me/'>About me</a>
        </li>
        <li>
            <a href='http://demo01-liyuanslab.jimdo.com/%E6%97%85%E8%A1%8C/'>旅行</a>

 

これでナビゲーションと同等の機能になりました。

 

 

 

ナビゲーションは編集時以外は不要になったので、全て非表示にしておきます。

 

 

以上で完成です。

 

ナビゲーションの"変更"というより実際は"追加"ですね。

いつものことですが、泥臭いことをやってしまいました…。

 

完成版はこちらで公開します。

 

http://demo01-liyuanslab.jimdo.com/

 

「旅行」の部分が3階層目までドロップダウンします。

 

この方法では、ナビゲーションのCSSを修正する場合と比較して簡単に導入できることと、同じ方法で色々なプラグインを試すことができるという長所があります。

 

一方、ナビゲーションに変更があった場合に、それに合わせてHTMLも編集しなければならないという短所があります。

 

HTMLを編集すると言ってもそれほど手間ではないのですが、ホームページ作成業者の方がベースを作成してクライアントが自由に変更できるようにする場合には適用は難しいかもしれませんね。

 

一旦ページ構成を決めたらあまり変更を加えないようなケースで使われるとよいと思います。

 

 

ではまた。

コメント: 3 (ディスカッションは終了しました。)
  • #1

    uki0809 (木曜日, 22 9月 2011 19:21)

    JavaScriptを編集するって部分で躓いてしまったのですが,原因がわかりません。
    JAVASCRIPTが動作しないのです。
    なにか助言をお願いします。

  • #2

    kaz (土曜日, 26 1月 2013 13:30)

    プルダウンメニューを施した場合、スマホサイトでも問題ないですか?

  • #3

    Best Juicer (日曜日, 21 4月 2013 10:54)

    This informative article was just what I was looking for!