LION MEDIAにプルダウンのグローバルナビを実装する方法

2019-06-02カスタマイズLION MEDIA

LION MEDIAは、グローバルメニューの展開に対応していおらず、プルダウン出来ない仕様ですが、これを無理矢理、副項目がプルダウンで展開するように改造してみました。

 

8313_05

8313_01

 

 

LION MEDIAのその他のカスタマイズについては以下もご覧ください。

LION MEDIAの記事

 

注意事項

 

親テーマのPHPファイルを編集しますので、必ずバックアップを取った上、自己責任でお願いします。

 

カスタマイズ方法

 

メニューを作成

 通常通り、メニューを作成し、副項目を設定します。

 

8313_02

 

メニューの作り方については以下をご覧ください。

 

 

PHP編集

親テーマディレクトリ内の「header.php」をFTPでダウンロードし、1つはバックアップとして保存しておきます。

 

FTPについては以下をご覧ください。

 

子テーマ内にコピーして行うとエラーになってしまう為、直接「親テーマ内のファイル」を編集します。

 

8313_03

 

 153行目(Ver.2.0.0の場合)にある「depth(深さ)」の部分を変更します。

初期値は「1」で1階層までです。

 

8313_04

 

 2階層なら「2」、3階層なら「3」に変更します。
'depth' => 2,

 

 <階層2にした例>

以下のように、すべてが横並びで表示されます。

8313_06

※メニューの項目数によっては、ここまででもいいかもしれません。

 

 

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;
}
}

 

結果

8313_01

 

 

CSSが反映されない場合

 

CSSコードを記述したのに変化がない場合は、キャッシュをクリアして下さい。

 

以下も参考にして下さい。

 

 

 

あとがき

もう少しかっこいいデザインにしたかったのですが、どうしても展開するメニューが必要ではなかった為、このあたりまででやめました。

CSSデザインの変更でもう少し見栄えはよく出来ると思いますので、例でのソースを改造してお試しください。