はてなブログのデザインテンプレートはたくさんあるのですが、グローバルナビゲーションが気にいるのがなかったので作ってみました。
- 右上にシンプルに配置
- マウスオーバーでリンクリストを表示
- レスポンシブ対応でスマホ画面では消える
- 画面スクロールについてくる
実際に導入しているサイトは↓です。(このサイトもそのうち導入予定です!!)
HTML/CSS は 元CAバンビさんの以下のサイトを参考に作りました。
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; } /*スマホ以外→終わり*/ }