久しぶりの更新です。今回は、モバイル画面でのメニュー表示をイジってみたので備忘録がてらに記事にします。とは言っても私は自分であれこれＣＳＳを駆使して自由にデザインを弄れる方ではないので、基本的に先人たちの知恵をコピペで完了スタイルですｗ
モバイル画面でのメニューやカテゴリーをトグル表示にする
では早速、今回参考にした記事はこちらです↓
ゆきひーさんの記事ですね。
この方は色々と自分でCSSを弄ってカスタマイズされているのでとても参考になります。
ちなみに「トグル」とは、簡単に言うとクリックするとザーッとカテゴリーが下りてきたり、スライドして来たりする仕組みです。
この様な感じです。当ブログでは、右上の【カテゴリー】と表示されている部分をクリックするとこのようになります。
元記事内にはカラーを変更するのに便利な辞典もあります。↓
このカラーコードを用いて色々と自分色を出してカスタマイズ出来ると思います。
応用編
そのままコピペすると上の画像のように全てのカテゴリーが繋がって見えます。これを分けたい、若しくは離したい場合、ＣＳＳの中の「＃menu li」の部分のmerginの部分が初期では「０ auto」になっていると思います。この０の部分を３ｐｘとかに変更すると枠が離れて見えるようになりますよ。
さらに、もっと丸みをもたせたいという場合にはその上、「border-radius 3px」となっている部分をもっと大きな数字にすると丸みが強くなります。例えば「border-radius 50px」等、大きい数字に変更してみるなどいろいろ試してみて下さい。
最後に「感謝」
今回も先人たちの知恵をコピペさせてもらいました。ゆきひーさん、感謝しております。今後もお世話になります。
