wp_nav_menu の出力を縦にスライドするメニューで表示

2013年5月19日

それぞれの親カテゴリー（メニュー）の下の子カテゴリー（メニュー）は最初は非表示にしておいて、親カテゴリーをクリックすると、子カテゴリーが表示されるようなメニューを wp_nav_menu の出力を使って作成。

wp_nav_menu を使って出力すると、以下のようなクラスが自動的に付加されるので、子カテゴリー（メニュー）のページにアクセスした際に、その子カテゴリー（メニュー）を自動的に表示（開いた状態に）したり、そのリンクの色を変更して表示することが比較的簡単にできる。

親の ul 要素には「menu」の class が付く
子の ul 要素には「sub-menu」の class が付く
全ての li 要素には「menu-item」の class が付く
現在表示されているページの li 要素には「current-menu-item」の class が付く
現在表示されているページの親の li 要素には「current-menu-parent」の class が付く
現在表示されているページの最も上の li 要素には「current-menu-ancestor」の class が付く
カスタムリンクとして作成されたリンクの li 要素には「menu-item-type-custom」の class が付く
カスタムメニューの作成時に CSS クラスの指定するとそのリンクの li 要素に、指定したクラスが付加される。

スライドするメニューの内容は以下のようなもの。但し、この例はデザイン的なことやユーザビリティには配慮していないので、使用するアイコン画像、その表示のタイミング等に関しては別途考慮する必要がある。

「+」「-」「■」の3つの画像を用意。
親メニューにマウスオーバーすると「+」印が表示され、選択（クリック）すると「-」印に変わり、サブメニューが表示される。
サブメニューが表示されている場合は、親メニューにマウスオーバーすると「-」印が表示され、クリックするとサブメニューは非表示になる。
サブメニューがないリンクは、マウスオーバーすると「■」印が表示され、クリックするとリンク先にジャンプする。
ページのジャンプ（移動）先では、そのカテゴリーの子カテゴリーのメニューをスライドダウンで表示する。
また、そのページのリンクとその親カテゴリーのリンクに背景色をつける。

参考：jQuery を使った縦にスライドするメニュー

register_nav_menus() でカスタムメニューの機能を有効にし、メニューを表示するロケーションを作成する。functions.php に以下を記述。

register_nav_menus(array(
  'sidebar_nav'=>'Sidebar_Navigation'
));

カスタムメニューの設定画面「外観」→「メニュー」でメニューを作成。
親カテゴリー（メニュー）のリンクは、カスタムリンクとして作成（「menu-item-type-custom」の class が付く）。
親カテゴリー（メニュー）のカスタムリンクの「URL」は「#」として、クリックしても移動しないようにする。
「ホーム」もカスタムリンクなので、これは他と区別するために、カスタムメニューの作成時に CSS クラスを「home」と指定しておく。

サイドバーにカスタムメニューを出力する。

<div id="side-nav">
  <?php wp_nav_menu(array('theme_location' => 'sidebar_nav')); ?>
</div><!-- end of #side-nav -->

以下をスタイルシートに記述する。

#side-nav ul.menu{
  margin: 5px;  /*デザインにあわせて指定*/
}

#side-nav ul.menu li {  /*デザインにあわせて指定*/
  font-size: 13px; font-size: 1.3rem; 
  color: #888;
  line-height: 20px;
  margin: 5px 0 0 0;
  padding-left: 10px;  
}

#side-nav ul.menu li a {
  color: #888;
  padding-left: 20px;
  display: block;   /*要素の幅いっぱいにするために指定*/
}
#side-nav ul.sub-menu {
  padding-left: 20px;  /*デザインにあわせて指定*/
  margin-top: 0;
}

/*フーバー時の文字色と背景画像「■」の指定*/
#side-nav ul.menu li a:hover {
  color: #333;
  text-decoration: none;
  background: url(images/menu_square.gif) no-repeat left center;
}
/*親カテゴリーのカスタムリンクのフーバー時の背景画像「+」の指定*/
#side-nav ul.menu li.menu-item-type-custom a:hover  {
  background: url(images/menu_plus.gif) no-repeat left center;
} 
/*親カテゴリーのカスタムリンク「ホーム」のフーバー時の背景画像「■」の指定*/
#side-nav ul.menu li.menu-item-type-custom.home a:hover  {
  background: url(images/menu_square.gif) no-repeat left center;
} 
/*選択されている子カテゴリの親カテゴリーのカスタムリンクのフーバー時の背景画像「+」の指定*/
/*クラス「selected」はスライドダウンして表示されている要素に jQuery で付与する*/
#side-nav ul.menu li.menu-item-type-custom.selected  a:hover {
  background: url(images/menu_minus.gif) no-repeat left center;
} 
/*「selected」クラスが付いた子カテゴリのフーバー時の背景画像「■」の指定*/
#side-nav ul.menu li.menu-item-type-custom.selected ul.sub-menu li a:hover {
  background: url(images/menu_square.gif) no-repeat left center;
}
/*ページが表示されているカテゴリに属するリンクのフーバー時の背景画像「■」の指定（上と同じことなので省略可能）*/
#side-nav ul.menu li.current-menu-ancestor ul.sub-menu li a:hover {
  background: url(images/menu_square.gif) no-repeat left center;
}
/*「selected」クラスが付いた子カテゴリの親カテゴリーのリンクと文字色を指定*/
#side-nav ul.menu li.menu-item-type-custom.selected a {
  background: #EEE;
  color: #333;
}
/*「selected」クラスが付いた子カテゴリの背景は「none」に指定*/
#side-nav ul.menu li.menu-item-type-custom.selected ul.sub-menu li a {
  background: none;
  color: #888;
}
/*「selected」クラスが付いた子カテゴリのフーバー時の文字色を指定*/
#side-nav ul.menu li.menu-item-type-custom.selected ul.sub-menu li a:hover {
  color: #333;
}

jQuery でナビゲーションのスライドアニメーションおよび、ページ遷移時の子カテゴリーのslideDown（該当するカテゴリーを開いた状態で表示）を記述する。

注意する点としては、クリックする要素を、$(‘#side-nav ul.menu>li’) とすると、サブメニューをクリックした際にも作動してしまうので、$(‘#side-nav ul.menu>li>a’) としている。

//sidebar ナビゲーションのスライドアニメーション
  $('#side-nav ul.sub-menu').hide();
  $('#side-nav ul.menu>li>a').click(function(event) {
    var this_ul = $(this).closest('li').find('ul');
    $('#side-nav ul.sub-menu').slideUp(300);
    $('#side-nav ul.menu>li').removeClass('selected');    
    if(this_ul.css('display') == 'none') {
      this_ul.slideDown(300);
      $(this).closest('li').addClass('selected');
    }  
  });

  //現在表示されているページの ul 要素をスライドで表示させる。
  $('#side-nav ul.menu>li.current-menu-ancestor ul').slideDown(50);
  //現在表示されているページの親の li 要素にクラス'selected'を追加（背景色が付き、フーバー時の背景画像が「－」印になる）
  $('#side-nav ul.menu>li.current-menu-ancestor ul').parent('li').addClass('selected');
  //現在表示されているページのリンクは色を変え、カーソルをデフォルトに
  $('#side-nav ul.menu>li.current-menu-item a, #side-nav ul.menu>li ul li.current-menu-item a').css({cursor:'default',color: '#333', background: '#FDF5FE'});
  //現在表示されているページのリンクはクリックしても何もしない
  $('#side-nav ul.menu>li.current-menu-item a, #side-nav ul.menu>li ul li.current-menu-item a').click(function() { return false; });

  //個別ページが表示されれいる場合は、なぜかcurrent-menu-ancestorが付かないので、個別ページの親のメニューが非表示になっていればそれをスライドダウンで表示する
  if($('#side-nav ul.menu>li ul li.current-menu-parent').parent('ul').css('display') == 'none') {
    $('#side-nav ul.menu>li ul li.current-menu-parent').parent('ul').slideDown(50);
    //現在表示されているページの親の li 要素にクラス'selected'を追加
    $('#side-nav ul.menu>li ul li.current-menu-parent').parent('ul').parent('li').addClass('selected');
    //現在表示されているページの親のリンクの背景色と文字色を変える
    $('#side-nav ul.menu>li ul li.current-menu-parent a').css({color: '#333', backgroundColor: '#FDF5FE'});
  }

Web Design Leaves

wp_nav_menu の出力を縦にスライドするメニューで表示

関連ページ