NPO法人音楽の恵みネットワーク ICT構築の備忘録

Information and Communication Technology

テーマについて

sample.minimal-green.com

ナビゲーションメニュー中

以下のコードをデザイン>カスタマイズ>ヘッダ>タイトル下へ追記。(リンク1~3、サブメニュー1~3、URLは各自変更してください)

<ul id="nav-menu">
<li><a href="#">リンク1</a></li>
<li><a href="#">リンク2</a></li>
<li><a href="#">リンク3</a></li>
<!-- 端末ごとに表示する項目を調整 -->
<li class="nav-menu-hidden-phone"><a href="#">スマートフォンで非表示</a></li>
<!-- 右端の残りのドロップダウンメニュー -->
<li class="hover-click"><a href="#"><i class="blogicon-reorder"></i>More</a>
   <ul>
   <li><a href="#">サブメニュー1</a></li>
   <li><a href="#">サブメニュー2</a></li>
   <li><a href="#">サブメニュー3</a></li>
   </ul>
</li>
</ul>
<!--jQueryを使用-->
<script src="https://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
<script>
$(function() {
  var contents = $(".hover-click > ul");
  $(".hover-click > a").click(function(){
    $(contents).toggle();
    return false;
  });
  $(".hover-click")
  .mouseover(function(){
    $(contents).show();
  })
  .mouseout(function(){
    $(contents).hide();
  });
});
</script>