アコーディオンツリーをシンプルなボタン風にするCSSカスタマイズ

水色の背景にメニュー表示のビフォーアフター画像が貼り付けられている

Simplicity2 では「カスタマイズ」→「レイアウト(モバイル)」からモバイルメニューのタイプを切り替えることが出来ます。

モバイルメニュータイプを選択する画面

jQuery プラグイン SlickNav によって呼び出されている、このアコーディオンツリーをボタン風にするCSSです。

メニューをアコーディオンツリーに設定したら、子テーマの style.css にペロッと貼り付けて使用します。

.slicknav_btn {
  background: #fff;
  border: 2px solid #666;
  box-shadow: 0 1px 0 rgba(0,0,0,.25);
}

.slicknav_menu {
  background: #fff;
}

.slicknav_menu .slicknav_icon-bar {
  background: #666;
}

.slicknav_menu .slicknav_menutxt {
  color: #666;
  font-weight: 500;
  font-size: 14px;
  text-shadow: 0 1px 0 rgba(0,0,0,.55);
}

.slicknav_nav a {
  color: #303030;
}

影などは出来るだけ自然な感じになるようにアレンジしてみましたが・・・
お色などはサイトに合わせて適宜変えてみてください。

参考にさせていただいたページはこちらです。
参考スマホサイト アコーディオンツリーメニューの色変更

そのほか私の場合は font-family で文字フォントを指定しています。

.slicknav_menu .slicknav_menutxt {
  font-family: 'Verdana',sans-serif;
}

参考になりましたら幸いでござる。

スポンサーリンク