LION MEDIAにプルダウンのグローバルナビを実装する方法
LION MEDIAは、グローバルメニューの展開に対応していおらず、プルダウン出来ない仕様ですが、これを無理矢理、副項目がプルダウンで展開するように改造してみました。
↓
LION MEDIAのその他のカスタマイズについては以下もご覧ください。
注意事項
親テーマのPHPファイルを編集しますので、必ずバックアップを取った上、自己責任でお願いします。
カスタマイズ方法
メニューを作成
通常通り、メニューを作成し、副項目を設定します。
メニューの作り方については以下をご覧ください。
PHP編集
親テーマディレクトリ内の「header.php」をFTPでダウンロードし、１つはバックアップとして保存しておきます。
FTPについては以下をご覧ください。
子テーマ内にコピーして行うとエラーになってしまう為、直接「親テーマ内のファイル」を編集します。
153行目（Ver.2.0.0の場合）にある「depth（深さ）」の部分を変更します。
初期値は「１」で１階層までです。
２階層なら「２」、３階層なら「３」に変更します。
'depth' => 2,
＜階層２にした例＞
以下のように、すべてが横並びで表示されます。
※メニューの項目数によっては、ここまででもいいかもしれません。
CSSを追記する
プルダウンで表示するためには、CSSで編集を行います。
子テーマのスタイルシートにCSSを追記します。
/*******************
* グローバルナビ プルダウン
********************/
.globalNavi .sub-menu {
position: relative;
z-index: 1; /*数字が大きいほど前面に表示*/
display: none;
width: 95%;
border: none;
background-color: #5787b7; /*背景色*/
}
.globalNavi .sub-menu li:first-child {
margin-top:25px;
}
.globalNavi .sub-menu li {
display: block;
float: none;
padding: 0;
}
.globalNavi li:hover .sub-menu {
display: block;
}
.globalNavi .sub-menu li a {
font-size: 1em;
font-weight: normal;
padding: 10px;
text-align: left;
color: #fff;
border-bottom: 1px solid #fff;
}
.globalNavi .sub-menu li a:hover {
background-color: #bed6ed;
color: #000;
}
@media (min-width: 768px) {
.globalNavi .sub-menu {
position: absolute;
width: 200px;
border-top: 1px solid #eee;
}
}
結果
CSSが反映されない場合
CSSコードを記述したのに変化がない場合は、キャッシュをクリアして下さい。
以下も参考にして下さい。
あとがき
もう少しかっこいいデザインにしたかったのですが、どうしても展開するメニューが必要ではなかった為、このあたりまででやめました。
CSSデザインの変更でもう少し見栄えはよく出来ると思いますので、例でのソースを改造してお試しください。