ナビゲーションメニュー中
以下のコードをデザイン>カスタマイズ>ヘッダ>タイトル下へ追記。(リンク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>