Compass note

未踏の地へ踏み出すコンパス的エンジニアノート

はてなブログProのグローバルナビゲーションをオシャレにしてみた

"はてなブログProのグローバルナビゲーションをオシャレにしてみた"

はてなブログのデザインテンプレートはたくさんあるのですが、グローバルナビゲーションが気にいるのがなかったので作ってみました。

"はてなブログProおしゃれなグローバルナビゲーション"
  • 右上にシンプルに配置
  • マウスオーバーでリンクリストを表示
  • レスポンシブ対応でスマホ画面では消える
  • 画面スクロールについてくる

実際に導入しているサイトは↓です。(このサイトもそのうち導入予定です!!)

compass-media.hatenablog.jp

HTML/CSS は 元CAバンビさんの以下のサイトを参考に作りました。

www.bambi.pro

HTML

<!-- global navigation menu page top -->

<ul class="navi-top">
   <li><a href="https://compass-media.hatenablog.jp"><i class="fa fa-home"></i> home</a></li>
   <li><a href="https://compass-media.hatenablog.jp/archive/category/Media"><i class="fas fa-mobile-alt"></i>メディア運営</a>
      <ul>
         <li><a href="LINK"><i class="blogicon-hatenablog"></i>はてなブログ</a></li>
      </ul>
   </li>
   <li><a href="https://compass-media.hatenablog.jp/archive/category/SEO"><i class="fas fa-chart-line"></i></i>SEO</a>
      <ul>
         <li><a href="https://compass-media.hatenablog.jp/archive/category/AdSense">Google AdSense</a></li>
      </ul>
   </li>
   <li><a href="https://compass-media.hatenablog.jp/archive/category/Affiliate"><i class="fas fa-search-dollar"></i>Affiliate</a>
 </li>
</ul> 

CSS

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

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

ul.navi-top {
    position: fixed;
    left: 0;
    top: 0;
    margin: 0;
    padding: 0;
    font-size: 14px;
    width: 100%;
    text-align: right;
    z-index: 50;
}

/*重なり順*/
/*1階層目*/
ul.navi-top li {
    width: 125px;
    /*1階層目の幅*/
    display: inline-block;
    list-style-type: none;
    position: relative;
}

ul.navi-top a {
    line-height: 36px;
    /*メニューバーの高さ*/
    text-align: center;
    /*文字位置中央寄せ*/
    padding-left: 10px;
    text-decoration: none;
    font-weight: nomarl;
    display: block;
}

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

ul.navi-top ul a {
    width: 125px;
    /*2階層目の幅*/
}

ul.navi-top li:hover ul {
    display: block;
}

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

/*スマホ以外*/
@media (min-width: 768px) {
    /*上部メニュー固定の時の内部リンクのズレ解消*/
    @-webkit-keyframes modify {
        0% {
            padding-top: 50px;
            margin-top: -50px;
        }
        100% {
            padding-top: 0;
            margin-top: 0;
        }
    }
    @keyframes modify {
        0% {
            padding-top: 50px;
            margin-top: -50px;
        }
        100% {
            padding-top: 0;
            margin-top: 0;
        }
    }
    :target {
        -webkit-animation: modify 0.1s;
        animation: modify 0.1s;
    }
    /*スマホ以外→終わり*/
}

    Amazonチャージ