スマホ用2回タップ式ドロップダウンメニューを設置する方法

スマホ画面でスライドダウン、ドロップダウン式のメニューの項目をタップすると、サブメニューがあるのに展開される時間が与えられないままジャンプしてしまう。

トップメニューしか開くことができない。

サブメニュー、サブサブメニューをクリック、タップすることができないという問題があった。

 

 

サブメニューが隠れている場合に、一階目のタップをするとリンク先に飛んでしまわないで、まずはドロップダウンメニューを広げ、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;
}

これで横にスライドできるようになるが、スマホ画面でトップメニューをタップしても上下に展開してサブメニューを表示することができなくなる。

 

 

  • Google の Indexing API を使うと、新しい投稿記事を瞬時にGoogleの検索エンジンに登録できる。 WordPress のプラグインとしてインデックスAPIが利用できる。使い方は英語 ...
  • Yoast SEO を停止して、Rank Math SEO プラグインを使ってみたらGoogle の検索結果に表示される記事抜粋スニペットの文字数が短過ぎに見えてびっくりした。#1 Yoast Alt ...
  • WP_CRON を停止して、Linux の crontab に移行する設定をこれまでに何度も試みたがうまくいかなかった。 毎日バックアップされるはずの、UpdraftPlus プラグインのクロンが動い ...
  • Kusanagi WordPress プラットフォームでは Fcache とBcache がある。 Fcache とはNginx ヱブサーバーのキャッシュ機能であり、Kusanagi の独自機能ではな ...
  • 目次 1 HTTPD アクセスログの日本語化 2 Logwatch も日本語化 HTTPD アクセスログの日本語化 Nginx,  Apache ヱブサーバーのアクセスログを見ると、日本語URLはエン ...
  • ヱブサイトの再構築中には、スタイルシート、style.css を頻繁に調整更新する。 CSSを追加、編集する度に再読み込みを繰り返して、変更の反映を確認していた。 これで編集者は反映を確認できるのだが ...
  • WordPressで使える頁カウンターをいくつか同時に使ってカウントの仕方の違いを比べてみた。WP-PostViews    長期常用中 Post Views Counter  新規インストール Go ...
  • Pjax で非同期画面遷移するWordpress テーマ Pjax Blog に変えてみた。 Pjax Blog テーマでは、Barba.js が使用されている。Pjax Blog | Unique ...

タグクラウド

WordPress カテゴリ人気記事 Views most

WordPress・スマホ カテゴリ人気記事 月間

20190721

タグ関連記事

閲覧履歴

    //cookieが無い場合の処理
2019
GA-views: 50
20190721