このブログはカテゴリーの数が多く、また階層化もしているのでサブメニューの表示は必須だと考えています。そんな重要なサブメニューの出し方をちょっとでもかっこよくできればと思い色々と弄ってみました。
このカスタマイズの意味
最初にぶっちゃけるとほぼ自己満足です。約7割がスマホからのアクセスの現代、パソコン（または大きめのタブレット）でしか表示されないグローバルメニューのサブメニューにあんまりこだわり過ぎてもそこまで意味はないかも知れません。ですが3割の方はもしかしたらサブメニューから読みたい記事を見つけてくれるかもしれないし、まったくの無意味という訳ではないかも。前回の記事でオレンジメニューを使いつつサブメニューを出すという初心者らしい奮闘の結果とりあえず満足のいくメニューが完成したので、せっかくなのでサブメニューも少しこだわってみます。
公式のトピックを参考に
とりあえずSimplicityを使っていて何か分からないことがあったら、まず公式のトピックを確認するようにしています。膨大な量の情報、しかも製作者様自らの回答が見ることができます。サブメニューに動きを出したりする方法とか載ってないかなーと軽く検索かけてみたら、ドンピシャなトピックが見つかりました。このブログはそのトピックでわいひらさんが載せて下さっているcssをそのままコピペしているだけです。参考にしたトピックはこちら
実際にやってみる
トピックには2種類の方法が記載されていましたが、僕は前者のより動きに特徴がある方を選んでみました。style.cssに以下の記述をコピペすると、メニューホバー時にサブメニューがアニメーションで出てくるようになります。（記述はトピックに載っていたものそのままです。）
#navi ul.menu > li > ul{
display: block;
visibility: hidden;
}
#navi ul.menu > li:hover > ul{
visibility: visible;
}
#navi ul.menu > li > ul > li {
height: 0;
transition: .2s;
visibility: hidden;
}
#navi ul.menu > li:hover > ul > li{
height: 31px;
visibility: visible;
}
背景を透明化
上記の記述でサブメニューをアニメーションで出すことができました。次に背景を透明化してみます。透明化するかどうかは好みの問題だと思いますが、僕はちょっと透けてた方がかっこいい気がしたのでやってみました。やり過ぎると逆に字が読みづらくなって見て下さる方に優しくないデザインになってしまうのでほどほどに。同じようにstyle.cssに以下の記述をします。
#navi ul.sub-menu{
background:rgba(102,102,102,0.8);
}
色をrgbaで指定しています。色はお好みで、最後の0.8っていうのが透け具合を調整する数値です。これでちょっとだけ背景を透かしたサブメニューが出来ました。
まとめ
ということで自己満ですがサブメニューをかっこよくすることができました。こんなカスタマイズ自力じゃ絶対無理なので、Simplicity様々です。サブメニューを利用している方は、こんな感じでちょっとこだわってはいかがでしょう。
コメント