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

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

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

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

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

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

.slicknav_menu {
    background-color: #fff;
}

.slicknav_nav a{
    color: #303030;
}

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

.slicknav_menu .slicknav_icon-bar {
    background-color: #222;
}

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

影などは出来るだけ自然な感じになるようにアレンジしました。
参考にさせていただいたページはこちらです。

Simplicityの特徴 › フォーラム › Simplicityについての質問 › スマホサイト アコーディオンツリーメニューの色変更 このトピックには1件の返信が含まれ、1人の参加

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

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

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

スポンサーリンク
レクタングル大




レクタングル大