スマホ表示はサイト下部にメニューを固定配置する方法

スマホを操作する主な指は親指で、親指の可動域的に画面下部にメニューボタンなどを設置すべきとのこと。

そういうわけで画面下部にメニューを固定配置する方法を調べました。参考にしたのは以下のリンク。

https://rmtmhome.com/under-fixmenu-342

ただ、そのままコピペでは思い通りいかなかったので、少し手を加えました。

HTML

<div id="fix-phone-under-menu">
	<ul>
		<li><a href="#"><i class="fas fa-bars"></i><br />メニュー</a></li>
		<li><a href="<?php echo home_url( '/' ); ?>contact"><i class="far fa-envelope"></i><br />お問い合わせ</a></li>
		<li><a href="#"><i class="fa fa-search"></i><br />サイト内を検索</a></li>
	  </ul>
</div>

想定はボタンを3つ並べて、メニュー展開、お問い合わせへのリンク、サイト内検索を表示するというもの。

他にもサイト上部へのボタンやサイドバーの表示とかいろいろ考えられます。

CSSで設定すれば4〜5個はボタンを並べられそうですが、押しやすさからすれば3つがベストでしょう。

CSS

#fix-phone-under-menu {
	display: block;
	width: 100%;
	position: fixed;
	left: 0px;
	bottom: 0px;
	z-index: 2;
	opacity: 0.9;
}
#fix-phone-under-menu li {
	display: inline-block;
        font-size: 80%;
        text-align: center;
	float: left;
	width: 33.3333%;
	background: #252525;
	vertical-align: middle;
	padding: 10px 0;
	border-right: 0.5px solid #fff;
}
#fix-phone-under-menu li:last-child {
	border-right: 0;
}
#fix-phone-under-menu li a {
	display:block;
        text-decoration: none;
	color: #fff;
	text-align: center;
}
@media screen and (min-width:768px) {
 	#fix-phone-under-menu{
			display: none;
	}
}

主にどこが違うかというと#fix-phone-under-menu li aのdisplay。

table-cellになっていましたが、このままだとボタンの横幅が大きい場合、文字列の範囲しかリンクが設定されずデザインが崩れてしまったのです。

あとは右端のborder-rightを表示しないようにしています。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です