スマホで横長メニュー部分だけをスクロールするCSS装飾

スマホで横長メニュー部分だけをスクロールするCSS装飾

当記事のアイキャッチに使っているGoogleのスマホ検索ページの横長メニューを簡単WEBサイトテンプレート（PHP）に実装してみました。
CSSのみで実装しましたので、実際のGoogleスマホ仕様とは異なりますが、まぁだいたい似たような動作をしてくれています。

簡単WEBサイトテンプレート（PHP）をつくって見直すうちに気になる箇所の一つになっていたのですが、スマホページの横長メニューをあまり見かけることがなかったので、そのままになっていました。
そのままになっていた理由として、スクロールバーの有無によってPCから見た時にスクロールが出来るか出来ないか・・・という（どうでもいいかもしれない）難問にぶち当たっていたというところでして・・・。汗

今回の実装ではスクロールバーを無しにしていまして、PCブラウザで見る時にはスクロールが出来なくなっていると思います。
スクロールする方法はあるかもしれませんが、その点については今回は無視しています。
ただ、CSS装飾で高さの指定を削除すればスクロールバーは表示されるので、後はご自由に調整して頂ければと思っています。

phptemp_spmenu_160706.zip

サンプルです。

• 組み込み済みサンプル

当サイト内の「SEOの基礎知識」の中のコンテンツです。

• コンテンツSEOのためのWEBサイトテンプレート（PHP）

組み込み手順は非常にシンプルです。

テンプレート内にあるsp_main.cssとtbl_main.cssの「グローバルメニュー」部分を修正するだけでした。
今回の配布テンプレートの中には、以前のグローバルメニューの装飾をコメントアウトで残しています。
特に理由はないんですが、残しています。

当サイトで配布しているテンプレートのsp_main.cssとtbl_main.cssの中にある「グローバルメニュー」の箇所を修正してください。

#globalbg {
	width: 100%;
	margin: 0 auto 25px auto;
	overflow: hidden;
	height: 3em;
}

#global {
	width: 100%;
	height: 5em;
	overflow-x: scroll;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
}

#global:after {
	content:".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

#global ul {
	width: 650px;
}

#global ul li {
	float: left;
	width: 130px;
	text-align: center;
}

#global ul li a {
	display: block;
	padding-top: 8px;
	padding-bottom: 8px;
}

#global ul li a:hover {
}

#global ul li#now a {
	background-color: #efefef;
}

#global ul li#now a:hover {
}

#globalbg {
	width: 100%;
	margin: 0 auto 25px auto;
	overflow: hidden;
	height: 3em;
}

#global {
	width: 100%;
	height: 5em;
	overflow-x: scroll;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
}

#global:after {
	content:".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

#global ul {
	width: 650px;
}

#global ul li {
	float: left;
	width: 130px;
	text-align: center;
}

#global ul li a {
	display: block;
	padding-top: 8px;
	padding-bottom: 8px;
}

#global ul li a:hover {
}

#global ul li#now a {
	background-color: #efefef;
}

#global ul li#now a:hover {
}

今回の配布ファイル内には「旧グローバルメニュー」として、以前の記述をコメントアウトでそのまま残しています。
また、上述の部分は「新グローバルメニュー」として追記しています。
ですので、「旧グローバルメニュー」の部分を削除して頂き、上記の部分を「グローバルメニュー」として記述して頂いても問題ございません。

「#globalbg」と「#global」で高さをそれぞれ指定していますが、この高さを削除すると横スクロールバーが表示されます。

ということで、それぞれの記述が出来ましたらそのままアップしてください。
特に問題なく表示されれば完了です。

WEBサイトテンプレート（PHP）の修正にあたって、以下の点に配慮しています。

• 今回、サンプルにしたWEBサイトテンプレート（PHP）は「 phptemp_160202.zip 」です。

見た目的には、この仕様のほうが個人的には好みだったりします。
Googleでは、フェードアウトのような装飾が入っていたりしますので、その仕様を取り入れてみようかと思いましたが、時間がかかるような気がしましたので、追々どこかで対応してみたいと思っています。

まだ色々と気になるところがあるので、今回のバージョンを最新バージョンにしようとは考えていません。
今回のCSSの内容はプラグイン的な感じで使って頂ければと思います。

執筆 : 清水 隼斗

スマホで横長メニュー部分だけをスクロールするCSS装飾の通常ページ