レスポンシブ対応時のハンバーガーメニューのクリックに関して

このトピックには2件の返信、2人の参加者があり、最後に対馬俊彦により3年、 4ヶ月前に更新されました。

3件の投稿を表示中 - 1 - 3件目 (全3件中)

投稿者

投稿
2021年7月16日 6:45 PM #54052

art
参加者

■ 利用テーマとバージョン :
Lightning バージョン: 14.5.2
■ 質問内容：
添付ファイル画像の赤枠箇所をクリックしたときに展開する方法はございますでしょうか。
現状は下三角をクリックすると展開します。

Attachments:
You must be logged in to view attached files.

2021年7月17日 9:36 AM #54062
対馬俊彦
参加者
制作実績
以下の CSS を書けば下三角の領域が拡張されて、ご希望の動作になると思います。
```
.vk-menu-acc .acc-btn {
border: none;
background: var(--vk-menu-acc-icon-open-black-bg-src) right 50% no-repeat;
width: 100%;
right: 0;
top: 0;
height: calc( 24px + 1.4em );
background-size: 30px;
}

.vk-menu-acc .acc-btn-close {
background: var(--vk-menu-acc-icon-close-black-bg-src) right 50% no-repeat;
background-size: 30px;
}
```
この場合、モバイルメニューから
* 当社について
* 採用企業様
* 連絡を受けた方
のページにはアクセスできなくなります。(それを前提としたご質問と思いますが、念のため)

作業手順に関する参考ページ ↓

できる！WordPressカスタマイズ #01 簡単なデザイン（CSS）カスタマイズ方法徹底解説
2021年7月17日 12:37 PM #54063
対馬俊彦
参加者
制作実績
先ほどの CSS を修正します。(メディアクエリを追加)
```
@media (max-width: 991px) {

.vk-menu-acc .acc-btn {
border: none;
background: var(--vk-menu-acc-icon-open-black-bg-src) right 50% no-repeat;
width: 100%;
right: 0;
top: 0;
height: calc( 24px + 1.4em );
background-size: 30px;
}

.vk-menu-acc .acc-btn-close {
background: var(--vk-menu-acc-icon-close-black-bg-src) right 50% no-repeat;
background-size: 30px;
}

}
```
投稿者

投稿