HOME > コラム > WEB全般 > スマホで横長メニュー部分だけをスクロールするCSS装飾

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

コラム

今回は、簡単WEBサイトテンプレート(PHP)のスマホページのグローバルメニューをGoogleのスマホページのようなメニューにしようと思い修正を加えてみました。
Googleのスマホページはグローバルメニュー部分が横長になっており、スクロールするようになっています。
当記事に掲載している画像の赤枠の箇所です。
同等に実装したのではなく、CSSのみの修正で実装をしています。
よく似たjQueryプラグインもありましたが、出来るだけ軽い内容で実装したいと思いました。
「ちょっとは役に立ったかな?」や「ちょっと面白いな(笑)」みたいなことを感じられましたら、シェアして頂けますと幸いです。

WEB全般に投稿したコラム記事

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

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

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

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

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

ダウンロードと組み込みサンプル
組み込み済みファイルのダウンロード
phptemp_spmenu_160706.zip
組み込み済みサンプル

サンプルです。

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

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

組み込み手順

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

テンプレート内にある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)の修正にあたって、以下の点に配慮しています。

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

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

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

執筆 : 清水 隼斗

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

Facebookコメント

他のカテゴリ記事は下記からお選び下さい。
SEO対策に関する記事を投稿するカテゴリです。とにかく、SEO対策のことのみを記事にしようと思います。弊社の本業です(笑)
インターネットやWEBに関する総合情報に関する記事を投稿するカテゴリです。技術的なことでも出来るだけ分かりやすくしていこうと思います。
社内での出来事やランチのことなど、小さなことから大きなことまでを投稿するカテゴリです。少人数なのでネタは限られてますが面白可笑しくいきます!
その他、上記に当てはまらないことは全てこのカテゴリに投稿します。弊社の歴史・・・というわけではありませんが、後になって懐かしむことが出来る記事を投稿します。
株式会社SEMラボラトリー
TEL : 06-4394-8427
MAIL : info@oosaka-web.jp
PAGE TOP