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

コラム

今回は、簡単WEBサイトテンプレート（PHP）のスマホページのグローバルメニューをGoogleのスマホページのようなメニューにしようと思い修正を加えてみました。
Googleのスマホページはグローバルメニュー部分が横長になっており、スクロールするようになっています。
当記事に掲載している画像の赤枠の箇所です。
同等に実装したのではなく、CSSのみの修正で実装をしています。
よく似たjQueryプラグインもありましたが、出来るだけ軽い内容で実装したいと思いました。

「ちょっとは役に立ったかな？」や「ちょっと面白いな（笑）」みたいなことを感じられましたら、シェアして頂けますと幸いです。

CSS Chipsに投稿したコラム記事

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

CSS Chips

Googleスマホページのメニューをイメージしたメニュー

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

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

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

ダウンロードと組み込みサンプル

組み込み済みファイルのダウンロード

phptemp_spmenu_160706.zip

組み込み済みサンプル

サンプルです。

組み込み済みサンプル

元になるWEBサイトテンプレート（PHP）について

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

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

組み込み手順

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

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

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）の修正にあたって、以下の点に配慮しています。