【SWELL】ボックスを並べたメニュー表示をcssだけで実装

SWELLのスマホメニューのデフォルト

SWELLのスマホメニューは標準だとテキスト１列で縦にずらっと並びます。

このままでも十分綺麗に表示できて見やすいのですが、Font Awesomeや画像を挿入してボックス型のメニュー表示に変更したいと思います。

カスタマイズしたスマホメニュー

完成品がこちらです。

実際に使用しているものがこちら。マウスオーバーした時の挙動など確認して見てください。

こんな感じで表示するためのcssとhtmlを次項で説明します。

これらをブログパーツに登録し、ウィジェットの「スマホ開閉メニュー下」に追加して使用しています。

標準でグローバルナビと連動して表示されるスマホメニューを非表示にする方法は下記をご覧ください。

ボックスを並べたメニューを表示させる方法

ここからは上に記載した表示を実現するためのcssとhtmlをご紹介します。

css

/************************************
** ボックスナビボタン
************************************/
.nav-box{
margin:2em 0;/* 全体 */
padding:0.1em;/* 全体 */
}
.nav-box ul{
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
list-style:none;
margin:0 !important;
padding:0 !important;
border:none;
}
.nav-box ul li{
-ms-flex-preferred-size: calc(100%/2);/* 2列 */
flex-basis: calc(100%/2);/* 2列 */
margin:0 !important;
padding:0 !important;
text-align:center;
box-shadow: inset 4px 4px 0 0 #fdfdfd, 
4px 4px 0 0 #fdfdfd, 
4px 0 0 0 #fdfdfd;/* サイトの背景色と同じ色にする */
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
min-height:80px;/* ボックスの最低の高さ */
background:#f6f6f6;/* ボックスの背景色 */
}
.nav-box ul li:hover{
background:#dddddd;
z-index:2;
transition: 0.35s ease-in-out;
}
.nav-box ul li a{
display:block;
padding: 0.5em 1em;/* 余白 */
text-decoration:none;
width:100%;
}
.nav-box ul li a img{
max-width:50% !important;/* 画像横幅 */
height: auto !important;
filter: drop-shadow(0px 0px 3px rgba(0,0,0,0.1));/* 画像影 */
display: inline-block;
}
.nav-box .nav-box-title{
display: block;
color: #666;/* 文字色 */
font-size: 0.8em;/* 文字大きさ */
letter-spacing: 1px;
font-weight: 600;/* 文字太さ */
text-align: center;
line-height: 1.5;/* 文字行間高さ */
padding-bottom:10px;
}
/* fontawesome */
.nav-box ul li a i,.nav-box ul li a svg{
font-size: 35px;/* アイコン大きさ */
padding:20px 0;/* アイコン余白 */
color: #2b2b2b;/* アイコン色 */
display:inline-block;
}
/* fontawesome(2番目) */
.nav-box ul li:nth-of-type(2) a i,.nav-box ul li:nth-of-type(2) a svg{
color:#2b2b2b;/* アイコン色 */
}
/* fontawesome(3番目) */
.nav-box ul li:nth-of-type(3) a i,.nav-box ul li:nth-of-type(3) a svg{
color:#2b2b2b;/* アイコン色 */
}
/* fontawesome(4番目) */
.nav-box ul li:nth-of-type(4) a i,.p-nav ul li:nth-of-type(4) a svg{
color:#2b2b2b;/* アイコン色 */
}

画像を使用した場合と、fontawesomeを使用した場合それぞれ指定しています。

フラットなボックスに余白があるように見せるため、28〜30行目のbox-shadowでサイト背景色と同じ色を指定しています。

html

<div class="nav-box">
<ul>
<li><a href="リンク先url">画像かfontawesome<span class="nav-box-title">タイトル</span></a></li>
<li><a href="リンク先url">画像かfontawesome<span class="nav-box-title">タイトル</span></a></li>
<li><a href="リンク先url">画像かfontawesome<span class="nav-box-title">タイトル</span></a></li>
<li><a href="リンク先url">画像かfontawesome<span class="nav-box-title">タイトル</span></a></li>
</ul>
</div>

<li>の行を増やせば数が増やせます。

２列で指定しているので偶数が良いでしょう。