【コピぺで一発！】グローバルメニューを右上に固定表示させる方法

f:id:aitokichoco:20200528203352j:plain

今回はブログに「グローバルメニューを固定表示させる方法」を紹介します。

初めに、グローバルメニューが何のことなのか分からない人のために説明すると、各ページに設置されるサイト内の案内メニューのことです。

このページで見てみると、右上についているHOME、CATEGORY、CONTACT、ABOUTの4項目がグローバルメニューにあたります。

よくテンプレートで見かけるグローバルメニューのコードだと、DUDEの場合はヘッダー画像とグローバルメニューの間に隙間ができてしまい、格好悪いので右上に設置できるようにしました。

私と同じように、グローバルメニューのデザインについて悩んでいる人におすすめの記事です。

参考にしたグローバルメニューのサイト
コピペで一発！グロバールメニューを右上に固定表示させる方法
まとめ

参考にしたグローバルメニューのサイト

f:id:aitokichoco:20200528143004p:plain

グローバルメニューのデザインの参考元サイトはProred Partnersです。実際に見てもらったほうが分かりやすいので、気になる方は一度見に行ってください。

コピペで一発！グロバールメニューを右上に固定表示させる方法

では、さっそく張り付けるコードを紹介します。

まずは、デザインCSSから。

/*============================================== 　
global navigation bar (top)
================================================*/
ul.navi-top, ul.navi-top a {
color:black;/*文字の色*/
background-color:white;/*メニューバーの背景色*/}

ul.navi-top a:hover {
color:black;/*マウスオーバーの時の文字の色*/
background-color:lightgrey;/*マウスオーバーの時の背景色*/}

ul.navi-top {
position:fixed;
left:0;
top:0;
margin:0;
/* padding-top:1.5%; */
padding-left:55%;
font-size:16px;
width:100%;
z-index:50;/*重なり順*/
}

/*1階層目*/
ul.navi-top li {
width: 100px;/*１階層目の幅*/
display: inline-block;
list-style-type: none;
position: relative;}a

ul.navi-top a {
font-family: 'Lora', serif;/*フォント*/
line-height: 46px;/*メニューバーの高さ defo.36*/
text-align: center;/*文字位置中央寄せ*/
text-decoration: none;
font-weight: nomarl;
display: block;}

/*２階層目*/
ul.navi-top ul {
display: none;
margin:0px;
padding:0px;
position: absolute;}

ul.navi-top ul a{
width:180px;/*２階層目の幅*/
border-bottom: solid 0.5px #333;
padding-top:1px;
}
ul.navi-top li:hover ul {
display: block;
position: absolute;
}

/*スマホの時は上部グローバルメニューは表示しない*/
@media(max-width: 767px){
.navi-top{display:none;}
}

各行の冒頭にそのコードがどういうコードなのかを書いておきました。なので、今回は最低限の説明だけで他の説明は省略したいと思います。

コードの初めの方にある、「一階層目」は常時表示されているメニューで、「二階層目」は一階層目の項目を選択したときに表示されるメニューを表しています。

【基本的な用語】

position:fixed　：位置の固定、今回はページ最上部を指定しています
list-style-type:none　：マーカー文字の指定、今回はなし
マウスオーバー　：マウスカーソルを乗せたときの動作
z-index:50　：奥行きの重なり順、値が大きくなるほど前面に表示されます

注意

DUDEの場合はレスポンシブ対応していないため、スマホ版は別でコードを導入しなければいけません。

そのため、今回はコードの最後に「スマホの時は上部グローバルメニューは表示しない」ためのコードを一つ加えてあります。

このコードを付け加えないと、スマホ版のデザインが崩れてしまうので忘れずに付け加えておきましょう。

次に、ヘッダーに張り付けるコードです。


<!-- global navigation menu page top -->
<ul class="navi-top">
   <li><a href="https://www.b-usefull.com/">HOME</a></li>
   <li><a>CATEGORY</a>
        <ul>
            <li><a href="https://www.b-usefull.com/archive/category/%E3%82%A2%E3%83%AB%E3%83%90%E3%82%A4%E3%83%88">アルバイト</a></li>
            <li><a href="https://www.b-usefull.com/archive/category/%E3%83%A9%E3%82%A4%E3%83%95%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB">ライフスタイル</a></li>
             <li><a href="https://www.b-usefull.com/archive/category/%E3%83%96%E3%83%AD%E3%82%B0">ブログ</a></li> 
        </ul>
   </li>
   <li><a href="https://www.b-usefull.com/otoiawase">CONTACT</a></li>
   <li><a href="https://twitter.com/_aitoki">ABOUT</a></li>
</ul>

記事のリンク、タイトル名、カテゴリー名はそれぞれ自分のブログに対応するように変更お願いします。

ここも特に説明はありません。一行目のフォントカラーをいじってオリジナル性の高いグローバルメニューにしてください。

注意

分かる人がほとんどだと思いますが、念のため。
記事のリンクの変更は"ーーー"で囲まれた中を変更します。