はてなぶろぐにグローバルナビゲーションを付けてみた

作ったもの

グローバルナビゲーションというメニューバーのようなものをはてなぶろぐのヘッダに追加しました。

before（グローバルナビゲーションなし）

after（グローバルナビゲーションあり）

はてなぶろぐへの適用手順

1． 自身のブログのトップ画面にログインした状態で遷移する。

2． 画面右上の[自身のID▼(ashitaka1963)] > [デザイン]をクリックする。

3． サイドバーの[レンチアイコン] > [ヘッダ]をクリックする。

4． 「タイトル下」と書かれたテキストボックスに以下を記述する。

　　・クリック後のページを変えたい場合にはa href="#"の右辺を変更する。

<nav id="nav" >
  <ul id="globalmenu">
    <li><a href="#">CODE</a>
      <ul>
        <li><a href="https://ashitaka.hateblo.jp/archive/category/Python">Python</a></li>
        <li><a href="https://ashitaka.hateblo.jp/archive/category/    JavaScript">JavaScript</a></li>
      </ul>
    </li>
    <li><a href="#">LIFE</a>
      <ul>
        <li><a href="https://ashitaka.hateblo.jp/archive/category/Daily">Daily</a></li>
        <li><a href="#">Monthly</a></li>
      </ul>
    </li>
    <li><a href="#">準備中1</a>
      <ul>
        <li><a href="#">準備中</a></li>
      </ul>
    </li>
    <li><a href="#">準備中2</a>
      <ul>
        <li><a href="#">準備中</a></li>
      </ul>
    </li>
  </ul>
</nav>

5． 次にヘッダと同じ階層にある[デザインCSS]のテキストボックスに以下を入力する。

#nav{
  background: #1F2123; /* ナビゲーションバー全体の背景色 */
}

#globalmenu{
    width: 60%; /* ナビゲーションバークリック部分の背景色 */
    margin: 0 auto 40px;
    height: 50px; /* 高さ */
    padding: 0;
    list-style-type: none; /* リストのマーク非表示 */
}
#globalmenu li{
  position: relative;
  float: left;
  text-align: center;
  width: 25%; /* 各liの幅*/
  margin: 0;
  padding: 0;
}
#globalmenu li a{
  display: block;
  margin: 0;
  padding: 17px 0 20px;
  color: #fff;
  font-size: 15px;
  text-decoration: none;
}
#globalmenu li:hover > a{
  background: rgb(10,98,12); /* ホバー時の背景色 */
  color: #fff; /* ホバー時の文字色 */
}
#globalmenu li ul{
  position: absolute;
  top: 100%;
  color: #fff;
  left: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  z-index:10000;
  width: 100%;
}
#globalmenu li ul li{
  overflow: hidden;
  width: 100%;
  height: 0;
  color: #fff;
}
#globalmenu li ul li:hover > a{
  background: rgb(10,98,12);
  color: #fff;
}
#globalmenu li:hover ul li{
  overflow: hidden;
  height: 40px;
  border-bottom: 1px dotted #ffffff;
}
#globalmenu li ul li a{
  font-size: 13px;
  padding: 15px;
  background: rgb(0, 0, 0);
  text-align: left;
}