ナビバーをつけてみました♪

はてなブログに参戦して３日目。
ヘッダー下にナビバーが実装されているブログを見かけるものの、標準で設定がされていないことが分かりました。

そこで、ググってみたところ
「kimuchikuwa」さんのブログがヒット。

これを参考に透過ナビバーを作ってみました。

このページに貼ったナビバーのhtmlとcssのソースです。

<span class="menu-bar"><i class="blogicon-reorder lg"></i>MENU</span>
<ul id='menu'>
<div class="menu-inner">
<li><a href='https://evil9.hatenablog.com/entry/2022/08/09/193517'>index</a></li>
<li><a href='https://evil9.hatenablog.com/archive/category/■%20prog-rock'>prog-rock</a></li>
<li><a href='https://evil9.hatenablog.com/archive/category/■%20hr/hm'>hr/hm</a></li>
<li><a href='https://evil9.hatenablog.com/archive/category/■%20rock/pop'>rock/pop</a></li>
<li><a href='https://evil9.hatenablog.com/archive/category/■%20jazz/fusion'>jazz/fusion</a></li>
<li><a href='https://evil9.hatenablog.com/archive/category/■%20jdiary'>diary</a></li>
<li><a href='https://evil9.hatenablog.com/about'>about</a></li>
</div>
</ul>

/* メニューバー */
#menu {
position: relative;
width: 100%;
padding-left: 0px;
height: 40px;
background: rgba(255,255,255,0.1);    /*背景を透過設定*/
}

#menu li {
list-style-type: none;
float: left;
height: 40px;
text-align: center;
width:14.28%;    /*メニューの数(7分の100)*/
}

#menu li a {
display: block;
color: #000; 
font-size: 80%;
font-weight: bold;
line-height: 40px;
text-decoration:none;
}
#menu li:hover a {
color: #000;
text-decoration:none;
background: rgba(255,255,255,0.7);
transition: all .5s;
}

.menu-bar{
display: none;
}

おかげさまで、はてなでのcssとhtmlのいじり方が少し分かった気がします。
ナビバーの幅をコンテンツの幅と揃えるなど、もうちょっとカスタマイズするかも？

javascriptも実装できるのかな？
探索してみよっと♪

＜参考にさせていただいたブログです！＞
kimchikuwa.hatenablog.com

〜〜〜〜〜〜〜〜〜〜〜

その後、改変して、ドロップダウンする仕様に
以下参考

<div id="menu">
<div id="menu-inner">

<div id="btn-content">
<span id="menu-btn"><i class="blogicon-reorder"></i> MENU</span>
</div>

<ul id="menu-content">
<li><a href='https://evil9.hatenablog.com/entry/2022/08/09/193517'>Index</a>
<ul class="second-content">
<li><a href='https://evil9.hatenablog.com/'>HOME</a>
<li><a href='https://evil9.hatenablog.com/about'>about</a>
<li><a href='https://evil9.hatenablog.com/entry/2022/08/09/193517'>このブログの目次</a>
<li><a href="https://evil9.hatenablog.com/entry/2022/08/19/072621">はじめてのぷろぐれ</a></li>
<li><a href="https://evil9.hatenablog.com/entry/2022/08/18/201806">ぷろぐれについて語る</a></li>
</ul>
</li>
  
<li><a href='https://evil9.hatenablog.com/archive/category/■%20prog-rock'>prog-rock</a>
<ul class="second-content">
<li><a href="https://evil9.hatenablog.com/archive/category/・ mainstream">mainstream</a></li>
<li><a href="https://evil9.hatenablog.com/archive/category/・ symphonic">symphonic</a></li>
<li><a href="https://evil9.hatenablog.com/archive/category/・ jazz rock">jazz rock</a></li>
<li><a href="https://evil9.hatenablog.com/archive/category/・ canterbury scene">canterbury scene</a></li>
<li><a href="https://evil9.hatenablog.com/archive/category/・ psychedelic">psychedelic</a></li>
<li><a href="https://evil9.hatenablog.com/archive/category/・ avant-garde">avant-garde</a></li>
<li><a href="https://evil9.hatenablog.com/archive/category/・ electronica">electronica</a></li>
<li><a href="https://evil9.hatenablog.com/archive/category/・ folk, trad">folk, trad</a></li>
<li><a href="https://evil9.hatenablog.com/archive/category/・ US hard">US hard</a></li>
</ul>
</li>
    
<li><a href=''>hr / pop / jazz</a>
<ul class="second-content">
<li><a href='https://evil9.hatenablog.com/archive/category/■%20hr/hm'>hr / hm</a></li>
<li><a href="https://evil9.hatenablog.com/archive/category/・ prog-metal">prog-metal</a></li>
<li><a href="https://evil9.hatenablog.com/archive/category/・ thrash">thrash metal</a></li>
<li><a href="https://evil9.hatenablog.com/archive/category/・ doom">doom metal</a></li>
<li><a href='https://evil9.hatenablog.com/archive/category/■%20rock/pop'>rock / pop</a></li>
<li><a href="https://evil9.hatenablog.com/archive/category/・ punk">punk</a></li>
<li><a href='https://evil9.hatenablog.com/archive/category/■%20jazz/fusion'>jazz / fusion</a></li>
</ul>
</li>
  
<li><a href='https://evil9.hatenablog.com/archive/category/■%20diary'>diary</a></li>
    
<li><a href=''>準備中</a>
<ul class="second-content">
<li><a href="">準備中</a></li>
<li><a href="">準備中</a></li>
</ul>
</li>
</ul>

</div>
</div>

<div style="clear:both"></div>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(function(){
    var menuBtn = $("#menu-btn"),
        menuContent = $("#menu-content");
    menuBtn.click(function(){
        menuContent.slideToggle();
    });
    $(window).resize(function(){
        var win = $(window).width(),
            p = 960;//19
        if(win > p){
            menuContent.show();
        }else{
            menuContent.hide();
        }
    });
});
</script>

/*************** ナビゲーションバー ***************/
.menu1{
	width:100%;
	height:70px;
    display: flex;
    justify-content: center; /*左右中央揃え*/
    align-items: center;     /*上下中央揃え*/
    background: rgba(0,0,0,0.3); 
}
/*****グローバルメニュー****/
#menu{
    width: 100%;
    margin: 10px auto;
    background: rgba(255,255,255,0.2);   /*７メニュー全体の外側の背景色*/
}
#menu-inner{
    width: 100%;/*１メニュー全体の横幅*/
    height: 40px;/*２メニュー全体の縦幅*/
    margin: 0 auto;
    background: rgba(255,255,255,0.4);   /*８メニュー全体の内側の背景色*/
}
#menu-btn{display: none;}
#menu-content{
    padding-left: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    list-style-type: none;
}
#menu-content > li{
    position: relative;
    float: left;
    height: 100%;
    text-align: center;
    width:calc(100%/ 5);    /*メニューの数が5*/
}
#menu-content > li > a{
    position: relative;
    display: block;
    height: 100%;
    padding-left: 3px;/*３親リンク.カテゴリー１の横の余白*/
    padding-right: 3px;/*３親リンク.カテゴリー１の横の余白*/
    line-height: 40px;/*２メニュー全体の縦幅*/
    background: rgba(255,255,255,0.2);   /*９親リンクの背景色*/
    color: #000;  /*10親リンクの文字色*/
    font-size: 80%;
    text-decoration: none;
    z-index: 2;
}
#menu-content > li > a:hover{
    background: #f00;  /*11親リンクホバーの背景色*/
    color: #fff;  /*12親リンクホバーの文字色*/
}
#menu-content > li > a > .blogicon-chevron-down{margin-right: 5px;}

/*２階層目*/
#menu-content > li > ul.second-content{
    width:100%;     /* 親リンクに対する子リンクの横幅*/
    visibility: hidden;
    position: absolute;
    top: 0;
    margin: 0;
    padding-left: 0;
    list-style-type: none;
    z-index: -1;
}
#menu-content > li:hover > ul.second-content{
    visibility: visible;
    top: 40px;  /*2メニュー全体の縦幅*/
    z-index: 1;
    transition: all .3s;
}
#menu-content > li > ul.second-content > li{
    text-align: center;
    height: 40px;  /*５子リンクの縦幅*/
}
#menu-content > li > ul.second-content > li > a{
    display: block;
    line-height: 40px;  /*５子リンクの縦幅*/
    background: rgba(255,200,200,0.7);   /*13子リンクの背景色*/
    color: #000;  /*14子リンクの文字色*/
    font-size: 70%;
    text-decoration: none;
}
#menu-content > li > ul.second-content > li > a:hover{
    background: #f00; /*15子リンクのホバーの背景色*/
    color: #fff; /*16子リンクのホバーの文字色*/
}
/*****ふわっと表示****/
.load-fade {
  opacity: 0;
  visibility: hidden;
  transition: all 3s;
}
.load-fade.is-show {
  opacity: 1;
  visibility: visible;
}