はてなブログのサブメニューをCSSのみで実装する方法

タイトルははてなブログのサブメニューと書きましたが、別にhtmlの構造は同じですので、いろんなところで使えると思います。

wordpressなんかの場合はphpをいじらないといけないと思いますが、htmlでサイトを表示するときにいまから書くやり方でも十分つかえるでしょう。

それとサブメニューをCSSのみで実装と書きましたが、ホバーしたときにサブメニューを表示するやり方は一般的には「ドロップダウンメニュー」になります。そのため正確にはドロップダウンメニューをCSSだけで実装するやり方を書きます。

グローバルメニューのサブメニューつきhtml

<nav class="global-nav">
  <ul>
    <li><a href="#">ホーム</a></li>
    <li class="sub-menu">
      <a href="#">親カテゴリー</a>
      <ul class="sub-menu-list">
        <li><a href="#">子カテゴリー</a></li>
        <li><a href="#">子カテゴリー</a></li>
        <li><a href="#">子カテゴリー</a></li>
      </ul>
    </li>
    <li class="sub-menu">
      <a href="#">親カテゴリー</a>
      <ul class="sub-menu-list">
        <li><a href="#">子カテゴリー</a></li>
        <li><a href="#">子カテゴリー</a></li>
        <li><a href="#">子カテゴリー</a></li>
      </ul>
    </li>
  </ul>
</nav>

cssだけドロップダウンメニューを実装

.sub-menu {
  position: relative;
}
.sub-menu-list {
  padding: 0;
  margin: 0;
  width: 200px;
  list-style: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1;
  visibility: hidden;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s ease-out;
}
.sub-menu:hover > .sub-menu-list {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

コードレビュー

サブメニューをvisibility:hidden;にする理由

サブメニューは親のli要素の子要素なのでサブメニューにホバーするということは親要素のli要素にホバーしているということになる。そのためvisibility: hidden;にしておいて要素を非表示にしておくことでサブメニューにホバーしたときに動作してしまわないようにしている。

htmlの構造

.sub-menu:hover > .sub-menu-listに注目してほしい。これはhtmlの構造をみると.sub-menuというli要素にホバーしたときにサブメニューを表示するというコードだ。

なぜli要素にホバーしたときなのかというと、htmlの構造上こうしないとうまくいかない。

    <li class="sub-menu">
      <a href="#">親カテゴリー</a>
      <ul class="sub-menu-list">
        <li><a href="#">子カテゴリー</a></li>
        <li><a href="#">子カテゴリー</a></li>
        <li><a href="#">子カテゴリー</a></li>
      </ul>
    </li>

li.sub-menuのなかに.sub-menu-listがあるのでcssとhtmlをこのように設定することで、当然sub-menu-listにマウスをホバーさせてもサブメニューがきえることはない。なぜならsub-menu-listも.sub-menuというリストの中にあるのだから。

基本的なhtmlとcssだけ書きましたが細部の調整は自分で行ってください

しようがない...

雑記