竹林のゆとりブログ

山奥で生活し、日々の思いをつらつらと書くブログ。 IT、数学、アニメなど。

グローバルナビゲーションタブ

はてなブログのカスタマイズ第一弾

グローバルナビゲーションタブを実装してみました。

グローバルナビゲーションタブとは

(Web)アプリケーションに対して、どこに何があるかを示すリンクの集まりです。

文字でよくわからないという方は実物をみましょう

ソース

今回は2箇所に起きます。

デザイン>カスタマイズ>ヘッダに 以下を配置

<ul id='dropmenu'>
  <li><a href='http://etale-vonneuman.hatenadiary.jp/'>ホーム</a></li>
  <li><a href='http://etale-vonneuman.hatenadiary.jp/archive/category/IT'>IT</a>
    <ul>
      <li><a href='http://etale-vonneuman.hatenadiary.jp/archive/category/データサイエンス'>データサイエンス</a>
        <ul>
          <li><a href='http://etale-vonneuman.hatenadiary.jp/archive/category/自然言語処理'>自然言語処理</a></li>
          <li><a href='http://etale-vonneuman.hatenadiary.jp/archive/category/機械学習'>機械学習</a></li>
          <li><a href='http://etale-vonneuman.hatenadiary.jp/archive/category/統計%2Fデータ'>統計/データ</a></li>
        </ul>
      </li>
      <li><a href='http://etale-vonneuman.hhttp://etale-vonneuman.hatenadiary.jp/archive/category/atenadiary.jp/archive/category/プログラミング言語'>プログラミング言語</a>
        <ul>
          <li><a href='http://etale-vonneuman.hatenadiary.jp/archive/category/Ruby'>Ruby</a></li>
          <li><a href='http://etale-vonneuman.hatenadiary.jp/archive/category/Python'>Python</a></li>
          <li><a href='http://etale-vonneuman.hatenadiary.jp/archive/category/Vim'>Vim</a></li>
          <li><a href='http://etale-vonneuman.hatenadiary.jp/archive/category/Javascripta'>Javascript</a></li>
        </ul>
      </li>
      <li><a href='http://etale-vonneuman.hatenadiary.jp/archive/category/プラットフォーム'>プラットフォーム</a>
        <ul>
          <li><a href='http://etale-vonneuman.hatenadiary.jp/archive/category/Windows'>Windows</a></li>
          <li><a href='http://etale-vonneuman.hatenadiary.jp/archive/category/Linux'>Linux</a></li>
          <li><a href='http://etale-vonneuman.hatenadiary.jp/archive/category/クラウド'>クラウド</a></li>
          <li><a href='http://etale-vonneuman.hatenadiary.jp/archive/category/ガジェット'>ガジェット</a></li>
        </ul>
      </li>
      <li><a href='http://etale-vonneuman.hatenadiary.jp/archive/category/ITその他'>ITその他</a>
      </li>
    </ul>
  </li>
  <li><a href=http://etale-vonneuman.hatenadiary.jp/archive/category/数学'>数学</a>
    <ul>
      <li><a href='http://etale-vonneuman.hatenadiary.jp/archive/category/数論'>数論</a></li>
      <li><a href="http://etale-vonneuman.hatenadiary.jp/archive/category/代数幾何">代数幾何</a></li>
      <li><a href='http://etale-vonneuman.hatenadiary.jp/archive/category/圏論'>圏論</a></li>
      <li><a href='http://etale-vonneuman.hatenadiary.jp/archive/category/数学その他'>数学その他</a>
      </li>
    </ul>
  </li>
  <li><a href='http://etale-vonneuman.hatenadiary.jp/archive/category/アニメ'>アニメ</a>
    <ul>
      <li><a href='http://etale-vonneuman.hatenadiary.jp/archive/category/アニメ%2F漫画%2Fラノベ%2Fゲーム'>アニメ/漫画/ラノベ/ゲーム</a></li>
      <li><a href='http://etale-vonneuman.hatenadiary.jp/archive/category/%20アニソン'>アニソン</a></li>
      <li><a href="http://etale-vonneuman.hatenadiary.jp/archive/category/イベント">イベント</a></li>
      <li><a href='http://etale-vonneuman.hatenadiary.jp/archive/category/声優クリエイター'>声優クリエイター</a></li>
    </ul>
  </li>
  <li><a href='http://etale-vonneuman.hatenadiary.jp/archive/category/雑記'>雑記</a></li>
</ul>

デザイン>カスタマイズ>デザインCSS に以下を配置

/* グローバルナビ */
#dropmenu {
    list-style-type: none;
    width: 170%;
    height: 35px;
    margin: 40px 0;
    padding: 0;
}
#dropmenu li {
    position: relative;
    width: 12.5%;
    float: left;
    margin: 0;
    padding: 0;
    text-align: center;
}
#dropmenu li a {
    display: block;
    margin: 0;
    padding: 10px 0;
    background: #999999;
    color: #fff;
    font-size: 80%;
    font-weight: bold;
    line-height: 1;
    text-decoration: none;
}
#dropmenu li ul {
    list-style: none;
    position: absolute;
    z-index: 100;
    top: 100%;
    left: 0;
    width: 100%;
    margin: 0;
    padding: 0;
}
#dropmenu li ul li {
    overflow: hidden;
    width: 100%;
    height: 0;
    color: #fff;
    transition: .5s;
}
#dropmenu li ul li a {
    padding: 12px 15px;
    background: #909090;
    text-align: left;
    font-size: 60%;
    font-weight: normal;
}
#dropmenu > li:hover > a {
    background: #ff3399
}
#dropmenu > li:hover li:hover > a {
    background: #ff3399
}
#dropmenu li:hover > ul > li {
    overflow: visible;
    height: 35px;
}
#dropmenu li ul li ul {
    top: 0;
    left: 100%;
}
#dropmenu li:last-child ul li ul {
    left: -100%;
    width: 100%;
}
#dropmenu li ul li ul li a {
    font-size: 50%;
    background: #818181
}
#dropmenu li:hover ul li ul li:hover > a {
    background: #ff3399
}
#dropmenu li ul li ul:before {
    position: absolute;
    content: "";
    top: 13px;
    left: -20px;
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-left-color: #454e08;
}
#dropmenu li:last-child ul li ul:before {
    position: absolute;
    content: "";
    top: 13px;
    left: 200%;
    margin-left: -20px;
    border: 5px solid transparent;
    border-right-color: #454e08;
}

カスタマイズをしていない人であれば、これでいけるはず。

おわり

自分でソースをみながら、どう変わっていくのかをみながら変更していくと楽しいですね。

是非カスタマイズしてみてください。