スマホ画面でスライドダウン、ドロップダウン式のメニューの項目をタップすると、サブメニューがあるのに展開される時間が与えられないままジャンプしてしまう。
トップメニューしか開くことができない。
サブメニュー、サブサブメニューをクリック、タップすることができないという問題があった。
サブメニューが隠れている場合に、一階目のタップをするとリンク先に飛んでしまわないで、まずはドロップダウンメニューを広げ、2回目のタップでリンク先に飛ぶようにしたい。
doubletaptogo.js を利用する。
doubletaptogo.js の設置
まず、doubletaptogo.js をサーバーに設置する。
- https://makotoiwasaki.com/wp-content/themes/jstork_custom/doubletaptogo.js
;(function( $, window, document, undefined )
{
$.fn.doubleTapToGo = function( params )
{
if( !( 'ontouchstart' in window ) &&
!navigator.msMaxTouchPoints &&
!navigator.userAgent.toLowerCase().match( /windows phone os 7/i ) ) return false;
this.each( function()
{
var curItem = false;
$( this ).on( 'click', function( e )
{
var item = $( this );
if( item[ 0 ] != curItem[ 0 ] )
{
e.preventDefault();
curItem = item;
}
});
$( document ).on( 'click touchstart MSPointerDown', function( e )
{
var resetItem = true,
parents = $( e.target ).parents();
for( var i = 0; i < parents.length; i )
if( parents[ i ] == curItem[ 0 ] )
resetItem = false;
if( resetItem )
curItem = false;
});
});
return this;
};
})( jQuery, window, document );
$( function()
{
$( '#g_nav li:has(ul)' ).doubleTapToGo();
});
$( function()
{
$( '#f_nav li:has(ul)' ).doubleTapToGo();
});
#g_nav はヘッダー部分のメニュー、
#f_nav はフッター部分のメニューに作動させる。
functions.php に次のように記述する。jqueryとdoubletaptogo.jsを読み込むようにする。
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles', 100 );
function theme_enqueue_styles() {
wp_deregister_script( 'jquery' );
wp_register_script('jquery', 'https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js', array(), '1.12.4' );
wp_register_script( 'doubletaptogo', '/wp-content/themes/jstork_custom/doubletaptogo.js', array('jquery'));
wp_enqueue_script( 'doubletaptogo' );
}
// defer 遅延読込する場合に追加
if(!is_admin()){
function replace_script_tag ( $tag ) {
return str_replace( "type='text/javascript'", 'defer ', $tag );
}
add_filter( 'script_loader_tag', 'replace_script_tag' );
}
メニューの設置
header.php のドロップダウンメニューを表示したいところに、次のように記述する。赤字の部分のみ重要。
<nav id="g_nav" role="navigation"> <?php wp_nav_menu(array( 'container' => false, 'container_class' => 'menu cf', 'container_id' => 'nav_1', 'menu' => __( 'グローバルナビ' ), 'menu_class' => 'nav top-nav cf clearfix', 'theme_location' => 'main-nav', 'items_wrap' => '<ul id="nav_1_ul" class="%2$s">%3$s</ul>', 'before' => '', 'after' => '', 'link_before' => '', 'link_after' => '', 'depth' => 0, 'fallback_cb' => '' )); ?> </nav>
CSSの設置
CSSを次の様に追加する。
#g_nav .nav li a > ul:after{color: #adff2f;}
#logo a:hover,#g_nav .nav li a:hover,.nav_btn:hover{color:#eeeeee;}
.header.headercenter #g_nav {
float: none;
}
#g_nav,
#g_nav .nav {
display: inline-block;
}
#g_nav {
float: left;
}
.nav {
margin: 0;
border: 0;
border-bottom: 0;
}
.nav ul {
margin-top: 0;
}
.nav > li {
float: left;
position: relative;
font-size: .79em;
display: table-cell;
text-align: center;
vertical-align: middle;
font-weight: bold;
margin-bottom: -6px;
width: auto;
margin-right: 1px;
}
.nav li a {
color: #adff2f;
font-weight: 500;
border-radius: 1em;
background: linear-gradient(to bottom,#00b100 0%,#003100 100%);
text-shadow: 1px 1px 2px #003100;
line-height: 1em;
font-size: 1.2em;
width: max-content;
max-width: 9em;
border-bottom: 0;
padding: 7px 6px;
display: block;
text-decoration: none;
bottom: 0;
}
.nav > li > a:after {
content: "";
display: block;
margin: 5px auto 0;
width: 0;
height: 1px;
background: #eeeeee;
transition: .25s ease-out;
-webkit-transition: .25s ease-out;
-moz-transition: .25s ease-out;
-o-transition: .25s ease-out;
-ms-transition: .25s ease-out;
opacity: .5;
filter: alpha(opacity=50);
-ms-filter: "alpha(opacity=50)";
}
.nav > li > a:hover:after {
width: 100%;
}
.nav li li {
text-align: left;
}
.nav li ul.sub-menu li a,
.nav li ul.children li a {
}
.nav li ul.sub-menu,
.nav li ul.children {
font-weight: bold;
margin: 0;
position: absolute;
z-index: 8999;
border-radius: 3px;
background: transparent;
}
.nav li ul.sub-menu li,
.nav li ul.children li {
position: relative;
overflow: hidden;
height: 0;
transition: .2s;
margin-bottom: -2px;
}
.nav li:hover > ul.sub-menu > li,
.nav li:hover > ul.children > li {
overflow: visible;
height: 37px;
border-bottom: 1px solid rgba(255,255,255,0.2);
}
.nav li ul.sub-menu li a,
.nav li ul.children li a {
display: block;
}
.nav li ul.sub-menu li a:hover,
.nav li ul.children li a:hover {
filter: alpha(opacity=80);
-ms-filter: "alpha(opacity=80)";
opacity: 0.8;
}
.nav li ul.sub-menu li:last-child a,
.nav li ul.children li:last-child a {
border-bottom: 0;
}
.nav li ul.sub-menu li ul,
.nav li ul.children li ul {
top: 0;
left: 100%;
}
dl,
menu,
ol,
ul {
margin: 0em 0;
}
.nav li ul.sub-menu li a,
.nav li ul.children li a {
display: block;
background-color: rgba(0,100,0,0.6);
color: #adff2f !important;
max-width: max-content;
}
.nav li ul.sub-menu li a{color: #f7f7f7;}
.nav li:hover > ul.sub-menu > li,
.nav li:hover > ul.children > li {
overflow: visible;
height: auto;
border-bottom: none;
}
#g_nav ul.sub-menu li ul.sub-menu li {
position: relative;
left: 2em;
}
@media only screen and (max-width: 767px) {
.nav > li > a:after {
margin: 0px auto 0;
}
.nav > li > a:hover:after {
width: 100%;
}
.nav li a {
border-bottom: 0;
}
}
@media only screen and (max-width: 480px) {
.nav li a {
font-size: 0.8em;
padding: 5px 6px;
}
}
以上で完了。
このサイトの最上部のメニュー部分のように表示される。
これをスマホで表示してタップすると、サブメニューがある場合には1回目のタップではリンク先にジャンプしないことが確認できる。
頁を表示すると、ソースのメニュー部分には次のように記述されている
<nav id="g_nav" role="navigation">
<ul id="nav_1_ul" class="nav top-nav cf clearfix"><li><a href="https://makotoiwasaki.com/category/travel">旅々</a>
<ul class="sub-menu">
<li><a href="https://makotoiwasaki.com/category/onsen">温泉</a></li>
<li><a href="https://makotoiwasaki.com/category/travel/thailand">タイ</a></li>
<li><a href="https://makotoiwasaki.com/category/travel/myanmar">ミャンマー</a></li>
<li><a href="https://makotoiwasaki.com/category/travel/ind">ヒンド</a></li>
<li><a href="https://makotoiwasaki.com/category/travel/車世界一周">車世界一周</a></li>
<li><a href="https://makotoiwasaki.com/category/travel/other-travel">その他-旅</a></li>
</ul>
</li>
<li><a href="https://makotoiwasaki.com/category/onsen">温泉</a>
<ul class="sub-menu">
<li><a href="https://makotoiwasaki.com/category/onsen/onsen-thai">温泉タイ</a></li>
<li><a href="https://makotoiwasaki.com/category/onsen/温泉ミャンマー">温泉ミャンマー</a></li>
<li><a href="https://makotoiwasaki.com/category/onsen/温泉ラオス">温泉ラオス</a></li>
<li><a href="https://makotoiwasaki.com/category/onsen/onsen-nihon">温泉日本</a>
<ul class="sub-menu">
<li><a href="https://makotoiwasaki.com/category/onsen/onsen-nihon/yukawauti">湯川内温泉</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="https://makotoiwasaki.com/category/food">食物</a></li>
<li><a href="https://makotoiwasaki.com/category/pc-mobile">PC通信</a>
<ul class="sub-menu">
<li><a href="https://makotoiwasaki.com/category/pc-mobile/wordpress">WordPress</a></li>
<li><a href="https://makotoiwasaki.com/category/pc-mobile/concrete5">concrete5</a></li>
</ul>
</li>
<li><a href="https://makotoiwasaki.com/category/travel/tabiwaza">旅術</a></li>
<li><a href="https://makotoiwasaki.com/作者">作者</a></li>
<li><a href="https://makotoiwasaki.com/contact">Mail</a></li>
</ul></nav>
上方展開式のメニュー
ついでにフッター部分に、上方展開式のメニューを設置する。
ドロップダウンは下方に展開するが、フッター部分では上方に展開させたい。
footer.php のメニューを表示したい部分に次のように記述する。
<nav id="f_nav" role="navigation"> <?php wp_nav_menu(array( 'container' => false, 'container_class' => 'menu cf footernavi', 'container_id' => 'nav_1', 'menu' => __( 'グローバルナビ' ), 'menu_class' => 'nav top-nav cf clearfix footernavi', 'theme_location' => 'footer-links', 'items_wrap' => '<ul id="nav_1_ul" class="%2$s">%3$s</ul>', 'before' => '', 'after' => '', 'link_before' => '', 'link_after' => '', 'depth' => 0, 'fallback_cb' => '' )); ?> </nav>
CSSには次を追加する。上記のCSSは共用する。
/* フッターメニュー 上に開く */
#f_nav * {
}
#f_nav {
margin: 0 auto;
width: max-content;
}
#f_nav a {
}
#f_nav a:hover {background: #00b100;}
#f_nav ul li ul li a:hover {
background: #00b100;
}
#f_nav ul li ul li {
width: 9em;
}
#f_nav ul li ul li a {
font-weight:normal;
font-variant: small-caps;
padding-top: 4px;
padding-bottom: 4px;
}
#f_nav ul li {
float: left;
}
#f_nav ul li a {
padding: 10px 10px;
}
#f_nav li{
position:relative;
float:left;
}
#f_nav ul li ul, #f_nav:hover ul li ul, #f_nav:hover ul li:hover ul li ul{
display:none;
list-style-type:none;
width: 9em;
}
#f_nav:hover ul, #f_nav:hover ul li:hover ul, #f_nav:hover ul li:hover ul li:hover ul {
display:block;}
#f_nav:hover ul li:hover ul li:hover ul {
position: absolute;
margin-left: 145px;
margin-top: -22px;
font: 10px;
}
#f_nav:hover ul li:hover ul {
position: absolute;
margin-top: 1px;
font: 10px;
}
#f_nav>ul>li:hover>ul {
bottom:100%;
border-bottom: 1px solid transparent
}
#f_nav ul.sub-menu li ul.sub-menu li {
position: relative;
right: 14em;
bottom: -1.8em;
}
@media only screen and (max-width: 480px) {
#f_nav ul li a {
font-size: 0.8em;
padding: 5px 6px;
}
}
以下の様に表示される。スマホで表示すると、1回目のタップでサブメニューを展開表示できる。
横にスライドさせると上下に展開しなくなる
メニューの幅が広くなって、スマホの狭い横幅に全部表示できない場合に、横方向にスクロールさせる方法がある。
#g_nav .nav {
width: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
}これで横にスライドできるようになるが、スマホ画面でトップメニューをタップしても上下に展開してサブメニューを表示することができなくなる。
