AFFINGERのメニューをドロップダウンメニューにカスタマイズ

アフィンガーaffinger, カスタマイズ, ドロップダウンメニュー, メニューアフィンガー, カスタマイズ, ドロップダウンメニュー, メニュー

AFFINGERのメニューは、デフォルトではドロップダウンメニューになっ
ていません。なので今回はメニューをドロップダウンメニューに、カス
タマイズしたやり方を備忘録として残しておきます。

 

ただそれだけなのに出来ない!!という方、必見です。

 

 

完成画像

 

 
PC完成画像1

 
AF ナビ001

 

PC完成画像2

 
AF ナビ002

 

PC完成画像1のようにしたい時

親テーマのスタイルシート(style.css)を開いて、下記コードの箇所に
コメントアウトを記述する。

 

[css]
/*media Queries PCサイズ
—————————————————-*/
@media only screen and (min-width: 781px) {
/* ここからコメントアウト —-
nav {
background: #f3f3f3;
color: #fff;
padding-top: 5px;
padding-right: 15px;
padding-bottom: 5px;
padding-left: 15px;
border-radius: 5px;
background: linear-gradient(#fff, #f3f3f3);
border: solid 1px #ccc;
margin-bottom: 10px;
}
nav li:first-child {
border: none;
}
—– コメントアウトここまで */
nav li {
position: relative;
float: left;
font-size: 13px;
padding-left: 10px;
display: inline;
padding-right: 10px;
border-left-width: 1px;
border-left-style: dotted;
border-left-color: #CCC;
padding-top: 5px;
padding-bottom: 5px;
}

nav li li {
padding-top: 0px;
padding-bottom: 0px;
}

nav li li {
padding-top: 0px;
padding-bottom: 0px;
}
.smanone {
display: block;
}
[/css]

 
コメントアウトする方法は、実行してほしくないコードの直前に

「/* ここからコメントアウト —-」を記述する。

 

次に実行してほしくないコードの直後に

「 —– コメントアウトここまで */」を記述する。

 

 

PC完成画像2のようにしたい時

親テーマCSS内にはコメントアウトを記述する必要なし。

スタイルシート(style.css)に追記する。

 

[css]
/*media Queries PCサイズ
—————————————————-*/
@media only screen and (min-width: 781px) {

[/css]

より下に
下記コードを追記
[css]
/*—————————–
ナビゲーションメニューのカスタマイズ
——————————*/

.smanone .menu-item {
display: inline-block;
text-align: left;
padding: 0px 5px 0px 0px;
}

.smanone a {
display: block;
padding: 15px;
border: 3px solid #dcf1f9;/* 個別メニュー枠の線の太さと色*/
position: relative;
line-height: 1.3;
padding: 3px 8px;
text-decoration: none;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background: #fff;/* 個別メニューの背景色 */
}

.smanone .sub-menu {/* サブメニュー表示 */
left: -9999px;
opacity: 0;
position: absolute;
-webkit-transition: opacity .2s ease-in-out;
-moz-transition: opacity .2s ease-in-out;
-ms-transition: opacity .2s ease-in-out;
-o-transition: opacity .2s ease-in-out;
transition: opacity .2s ease-in-out;
width: 200px;
z-index: 99;
margin-top: 36px;
}

.smanone .menu > li:hover .sub-menu a, .smanone .sub-menu a {/* 個別メニュークリックした時のサブメニュー表示 */
background: #fff;
color: #000;
position: relative;
width: 150px;
border: 3px solid #dcf1f9;
box-shadow: rgba(113, 135, 164, 0.098) 0px 0px 6px 3px;
-webkit-box-shadow: rgba(113, 135, 164, 0.098) 0px 0px 6px 3px;
-moz-box-shadow: rgba(113, 135, 164, 0.098) 0px 0px 6px 3px;
}

nav.smanone .sub-menu li a {
border-top: none;
}

.smanone .menu-item:hover > .sub-menu {
left: auto;
opacity: 1;
}

.smanone .sub-menu .sub-menu {
margin: 0px 0 0 230px;
}

.smanone .menu > li:hover .sub-menu a:hover, .smanone .sub-menu a:hover {
background: #00aaf9;/* サブメニューホバー時の背景色 */
}

.smanone a {
padding: 7px 7px 7px 7px;
}

.acordion_tree li {
width: 100%;
}

nav {
padding: 0;
margin: 10px 0;
}

nav.smanone li {
border: none;
}

nav.smanone a {
color: #000;
}

nav.smanone li a:hover {/* 個別メニューホバー時の背景色とtext色 */
background: #00aaf9 !important;
text-decoration: none !important;
color: #fff !important;
}

nav.smanone .sub-menu li a {
border-top: none;
}
[/css]

 

 

まとめ

今回のドロップダウンメニューのカスタマイズは、デフォルトの背景を
残したままその上からドロップダウンメニュー(PC完成画像2)が気
に入ってます。

 

AFFINGERのメニューをドロップダウンメニューにカスタマイズしてみた
が、あまり派手さがなくシンプルに出来たと思います。

 

やっぱりメニューは、同じ分類の中にちがうカテゴリーはあるので、ド
ロップダウンメニューはあった方が良いと思う。

 
そのうちテキスト色や背景色を変えて見たいと思っています。

 

尚 参考に文献 クリエイターチェック 様の
【STINGER5】ドロップダウンメニューをお洒落にカスタマイズ!・・・

を参考させていただきました。アリガトウございます。