stinger5ナビケーションメニューバーをグラデーションカスタマイズ

何回かこのブログで取り上げていますが、stinger5のナビケーションメニューを改めてリニューアルしたので備忘録として書き留めています。もちろんサブメニュー付きです。
リニューアルしたstinger5のサブメニュー付きのナビケーションメニューをグラデーションカスタマイズをした備忘録として紹介しています。

新型コロナウイルス北海道の感染場所最新情報!

 

新型コロナ北海道内の感染者数動向の最新情報!

新型コロナの5類移行に伴い、指定した医療機関からの「定点把握」による全国の感染状況を初めて発表。そこで北海道内（特に釧路・札幌）で感染された動向の最新の状況を配信しています。

www.net.y-taka.biz

 

 

サブメニュー付きメニューバーのグラデーション

前回このブログでナビケーションメニューのカスタマイズを紹介していました。
stinger5サブメニュー付きナビケーションメニューをカスタマイズ

stinger5 ナビケーションメニューのカスタマイズ

今回は以前にも増してより理想に近いナビケーションメニューになった。

header.phpの書き換え

「header.php」を開いて「＜/header＞」すぐ上の 「＜!?メニュー?＞」の部分を書き換えます。
デフォルトでは

[php]
<!–
カスタムヘッダー画像
–>
<div id=”gazou”>
<?php if(get_header_image()): ?>
<p id=”headimg”><img src=”<?php header_image(); ?>” alt=”*” width=”<?php echo HEADER_IMAGE_WIDTH; ?>” height=”<?php echo HEADER_IMAGE_HEIGHT; ?>” /></p>
<?php endif; ?>
</div>
<!– /gazou –>
<!–
メニュー
–>
<nav class=”smanone clearfix”>
<?php
$defaults = array(
‘theme_location’ => ‘navbar’,
);
wp_nav_menu( $defaults );
?>
</nav>
</header>
[/php]
となっていると思います。

上記コード内にある
[php]
<!–
メニュー
–>
<nav class=”smanone clearfix”>
<?php
$defaults = array(
‘theme_location’ => ‘navbar’,
);
wp_nav_menu( $defaults );
?>
</nav>
[/php]
上記コードを削除してからそこに下記コードを追記します。
[php]
<!–メニュー–>
<nav class=”smanone clearfix”>
<?php wp_nav_menu(
array(
‘container’ => false ,
‘items_wrap’ => ‘<ul id=”menu”>%3$s</ul>’
)
); ?>
</nav>
[/php]

私の場合他にカスタマイズしているので

子テーマの「header.php」を書き換えた。
[php]
<!– /アコーディオン –>
<!–　移動<div id=”wrapper”> –>
<header>
<!–メニュー–>
<nav class=”smanone clearfix”>
<div class=”header-nav-inner”>

<?php
$defaults = array(
‘theme_location’ => ‘navbar’,
);
wp_nav_menu( $defaults );
?>
</div>
</nav>
<div class=”header-inner”>
<!– ロゴ又はブログ名 –>
[/php]
上記コード内にある以下のコード

「<div class=”header-nav-inner”>」を
「<header> 」の下に移動する。
上記コード内にある
[php]
<!–メニュー–>
<nav class=”smanone clearfix”>
<div class=”header-nav-inner”>

<?php
$defaults = array(
‘theme_location’ => ‘navbar’,
);
wp_nav_menu( $defaults );
?>
</div>
</nav>
[/php]
上記コードを削除してからそこに下記コードを追記した。
[php]
<!–メニュー–>
<nav class=”smanone clearfix”>
<?php wp_nav_menu(
array(
‘container’ => false ,
‘items_wrap’ => ‘<ul id=”menu”>%3$s</ul>’
)
); ?>
</nav>
</div>
[/php]

js/base.jsファイルに追記

FFFTPソフト等で自分のサーバーにアクセスします。

「wp-content」フォルダー ⇒「themes」フォルダー ⇒ 親の「stinger5バージョン」フォルダー ⇒ 「js」フォルダーをクリックする。

次にそのフォルダーの中にある「base.js」をＰＣのお好きなフォルダーにダウンロードする。

次にダウンロードした「base.js」を「Terapad」等で開きます。

開いたら次に以下のコードを最下部にコピペします。
[php]
/*—————————
ドロップダウンメニュー
——————————*/

$(function() {
if ($.browser.msie && $.browser.version.substr(0,1)<7)
{
$(‘li’).has(‘ul’).mouseover(function(){
$(this).children(‘ul’).css(‘visibility’,’visible’);
}).mouseout(function(){
$(this).children(‘ul’).css(‘visibility’,’hidden’);
})
}
});
[/php]

次に上書き保存できた「base.js」ファイルをサーバーにアップロードする。

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

念のため、親テーマのスタイルシート(style.css)内にある「メニュー」を「コメントアウト」した。

コードの先頭行の前に「/* コメントアウト —-」を追記。
コードの最終行の後ろに「—–　コメントアウトここまで */」
子テーマのスタイルシート(style.css)を開きます。

そんで改めてカスタマイズしたコードを子テーマに追記した。
[css]
/*——————————————–
ナビゲーション（メニュー）のカスタマイズ　４

メニューをドロップダウンリストのように階層化
———————————————*/
#menu, #menu ul {
margin: 0;
padding: 0;
list-style: none;
}

#menu {
width: 100%;
margin: 60px auto;
border: 1px solid #222;
background-color: #0000cd;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = ‘#4169e1’, endColorstr = ‘#0000cd’);
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr = ‘#4169e1’, endColorstr = ‘#0000cd’)”;
background-image: -moz-linear-gradient(top, #4169e1, #0000cd);
background-image: -ms-linear-gradient(top, #4169e1, #0000cd);
background-image: -o-linear-gradient(top, #4169e1, #0000cd);
background-image: -webkit-gradient(linear, center top, center bottom, from(#4169e1), to(#0000cd));
background-image: -webkit-linear-gradient(top, #4169e1, #0000cd);
background-image: linear-gradient(top, #4169e1, #0000cd);
box-shadow: 0 1px 1px #777;
/*– メニュー全体の背景グラデーション –*/
}

#menu:before,
#menu:after {
content: “”;
display: table;
}

#menu:after {
clear: both;
}

#menu {
zoom:1;
}

#menu li {
float: left;
position: relative;
}

#menu li:first-child before,
#menu li:first-child after {
content: “”;
display: table;
}
#menu a {
float: left;
padding: 12px 30px;
color: #fff;
text-transform: uppercase;
text-decoration: none;
text-shadow: 0 1px #000;
font-size:14px;
}

#menu li:hover {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
background-color: #666666;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = ‘#666666’, endColorstr = ‘#111111’);
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr = ‘#666666’, endColorstr = ‘#111111’)”;
background-image: -moz-linear-gradient(top, #666666, #111111);
background-image: -ms-linear-gradient(top, #666666, #111111);
background-image: -o-linear-gradient(top, #666666, #111111);
background-image: -webkit-gradient(linear, center top, center bottom, from(#666666), to(#111111));
background-image: -webkit-linear-gradient(top, #666666, #111111);
background-image: linear-gradient(top, #666666, #111111);
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
/*– メニューホバー時の背景グラデーション –*/
}

#menu li:hover > a {
color: #ff7ddf;
}

#menu ul {
margin: 20px 0 0 0;
opacity: 0;
visibility: hidden;
position: absolute;
top: 38px;
left: 0;
z-index: 1;
transition: all .2s ease-in-out;
}
#menu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}

#menu ul ul {
top: 0;
left: 150px;
margin: 0 0 0 20px;
box-shadow: -1px 0 0 rgba(255,255,255,.3);
}

#menu ul li {
float: none;
display: block;
border: 0;
box-shadow: 0 1px 0 #111, 0 2px 0 #666;
background-color: #0000cd;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = ‘#4169e1’, endColorstr = ‘#0000cd’);
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr = ‘#4169e1’, endColorstr = ‘#0000cd’)”;
background-image: -moz-linear-gradient(top, #4169e1, #0000cd);
background-image: -ms-linear-gradient(top, #4169e1, #0000cd);
background-image: -o-linear-gradient(top, #4169e1, #0000cd);
background-image: -webkit-gradient(linear, center top, center bottom, from(#4169e1), to(#0000cd));
background-image: -webkit-linear-gradient(top, #4169e1, #0000cd);
background-image: linear-gradient(top, #4169e1, #0000cd);
/*– メニューホバー時サブメニューの背景グラデーション –*/
}

#menu ul li:last-child {
box-shadow: none;
}

#menu ul a {
padding: 10px;
width: 130px;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
font-size:15px;
}

#menu ul a:hover {
background-color: #04acea;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = ‘#04acea’, endColorstr = ‘#0186ba’);
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr = ‘#04acea’, endColorstr = ‘#0186ba’)”;
background-image: -moz-linear-gradient(top, #04acea, #0186ba);
background-image: -ms-linear-gradient(top, #04acea, #0186ba);
background-image: -o-linear-gradient(top, #04acea, #0186ba);
background-image: -webkit-gradient(linear, center top, center bottom, from(#04acea), to(#0186ba));
background-image: -webkit-linear-gradient(top, #04acea, #0186ba);
background-image: linear-gradient(top, #04acea, #0186ba);
/*– サブメニューホバー時の背景グラデーション –*/

}

#menu ul li:first-child > a {
border-radius: 3px 3px 0 0;
}

#menu ul li:first-child > a:after {
content: ”;
position: absolute;
left: 40px;
top: -6px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #04acec;
}

#menu ul ul li:first-child a:after {
left: -6px;
top: 50%;
margin-top: -6px;
border-left: 0;
border-bottom: 6px solid transparent;
border-top: 6px solid transparent;
border-right: 6px solid #3b3b3b;
}

#menu ul li:first-child a:hover:after {
border-bottom-color: #04acec;
}

#menu ul ul li:first-child a:hover:after {
border-right-color: #0299d3;
border-bottom-color: transparent;
}

#menu ul li:last-child > a {
border-radius: 0 0 3px 3px;
}
[/css]

まとめ

なんか長～いコードになってしまったけど、もしかしたら要らないコードが出てきたりして？

その時は「メンゴ！！！」

グラデーションについてですが、現バージョンの「Google Chrome」・「Firefox」と「ie 11」での確認はしていますが、それ以前のバージョンや「サファリ」等の他のブラウザについては確認が取れていない。

なので本当にこのコードでグラデーションがすべて掛かっているか判りません。

またブログによってはマージンやパディングの変更調整が必要と思われます。

まだまだ私の理想に近づいただけで完全ではありません

その時は備忘録として紹介します。