PC表示でマウスオーバーで展開するプルダウンメニューを、スマホ表示でアコーディオンメニューにします。htmlとCSSのみで実装し、スマホ表示のみjQueryでtoggleClassを利用します。
htmlのコードは下記になります。リストを入れ子にした構造です。
<ul class="dropmenu">
<li id="js_cat"><a>カテゴリー</a>
<ul>
<li><a href="/category/accordion/">アコーディオンメニュー</a></li>
<li><a href="/category/calendar/">カレンダー</a></li>
<li><a href="/category/tab/">タブメニュー</a></li>
<li><a href="/category/tooltip/">ツールチップ</a></li>
<li><a href="/category/fade/">フェーダー</a></li>
<li><a href="/category/form/">フォーム</a></li>
<li><a href="/category/hover/">マウスオーバー</a></li>
<li><a href="/category/modal/">モーダルウィンドウ</a></li>
<li><a href="/category/responsive/">レスポンシブ</a></li>
</ul>
</li>
</ul>続いてCSSのコードです。
カテゴリーのliタグにposition: relativeを設定し、展開メニューのulタグはposition: absoluteを設定してtop: 100%、left: 0の位置に配置します。そして、展開メニューのliタグにoverflow: hidden、height: 0を設定して非表示にします。カテゴリー右側の三角形は、カテゴリーのaタグの疑似要素で作成します。
次にメニュー展開時の処理ですが、今回はメディアクエリでブレイクポイントを600pxに設定し、601px以上でPCの処理、600px以下でスマホの処理を記述しています。PCはカテゴリーのliタグのhover、スマホはカテゴリーのliタグにクラス名active_spを付与することで動作させています。どちらも展開メニューのliタグにoverflow: visible、height: 40pxを設定しています。height: 40pxはfont-size: 14px、padding-top: 13px、padding-bottom: 13pxの合計です。
.dropmenu {
width: 200px;
margin: 0 auto;
}
.dropmenu li {
position: relative;
}
.dropmenu li a {
display: block;
margin: 0;
padding: 13px 15px;
font-size: 14px;
line-height: 1;
background: #444444;
color: #ffffff;
cursor: pointer;
}
.dropmenu li a:after {
content: '';
display: inline-block;
position: absolute;
right: 15px;
top: 40%;
width: 0;
height: 0;
border-style: solid;
border-width: 8px 5px 0 5px;
border-color: #FFFFFF transparent transparent transparent;
}
.dropmenu li ul {
position: absolute;
width: 100%;
z-index: 9999;
top: 100%;
left: 0;
}
.dropmenu li ul li{
overflow: hidden;
height: 0;
transition: .2s;
}
.dropmenu li ul li a{
border-top: 1px solid #dddddd;
background: #efefef;
color: #333333;
}
.dropmenu li ul li a:after {
content: none;
}
.dropmenu li ul li:first-child a{
border-top: none;
}
@media screen and (min-width: 601px) {
.dropmenu li:hover a:after {
transform: rotate(180deg);
transition: .1s;
}
.dropmenu li:hover ul li{
overflow: visible;
height: 40px;
}
.dropmenu li ul li a:hover {
background: #ffd999;
transition: .5s;
}
}
@media screen and (max-width: 600px) {
.dropmenu li.active_sp a:after {
transform: rotate(180deg);
transition: .1s;
}
.dropmenu li.active_sp ul li{
overflow: visible;
height: 40px;
}
}最後にjQueryのコードです。
ブラウザの横幅480px以下でカテゴリーのliタグにクラス名active_spをtoggleClassしています。
$(function() {
function sp_menu() {
var windowWidth = parseInt($(window).width());
if(windowWidth <= 600) {
$(this).toggleClass("active_sp");
}
}
$("#js_cat").click(sp_menu);
});