HTML・CSSコピペで簡単!多階層のドロップダウンメニュー作成

ドロップダウンメニュー_多階層

コピペするだけ!cssだけでつくる
多階層のドロップダウンメニュー

システムエンジニア(SE)かっきーです。

今回は、cssだけでメニューバーを作成しました。
下記のように多階層にすることができます。
動きのあるメニューバーを実装しました。

◆メニューバーサンプル

 
 
 
 
 
 

今回の場合「メニュー1」「サブメニュー3」「サブサブメニュー3」「サブサブメニュー3」と表示されていきます。

カテゴリーを細分化することが出来るため面白いですよ。
コピペで使うことが出来るので皆さんもお試しください。

多階層のドロップダウンメニューのコードとcss

「メニュー1」だけだとこのようになります。
簡単に言うとリストの中にリストを入れているだけです。

<ul id="dropmenu">
  <li><a href="#">メニュー1</a>
    <ul>
      <li><a href="#">サブメニュー</a>
        <ul>
          <li><a href="#">サブサブメニュー</a></li>
          <li><a href="#">サブサブメニュー</a>
            <ul>
              <li><a href="#">サブサブサブメニュー</a></li>
              <li><a href="#">サブサブサブメニュー</a></li>
              <li><a href="#">サブサブサブメニュー</a></li>
              <li><a href="#">サブサブサブメニュー</a></li>
            </ul>
          </li>
          <li><a href="#">サブサブメニュー</a></li>
          <li><a href="#">サブサブメニュー</a></li>
        </ul>
      </li>
      <li><a href="#">サブメニュー</a>
        <ul>
          <li><a href="#">サブサブメニュー</a></li>
          <li><a href="#">サブサブメニュー</a></li>
          <li><a href="#">サブサブメニュー</a></li>
          <li><a href="#">サブサブメニュー</a></li>
        </ul>
      </li>
      <li><a href="#">サブメニュー3</a>
         <ul>
          <li><a href="#">サブサブメニュー</a></li>
          <li><a href="#">サブサブメニュー</a></li>
          <li><a href="#">サブサブメニュー3</a>
            <ul>
              <li><a href="#">サブサブサブメニュー</a></li>
              <li><a href="#">サブサブサブメニュー</a></li>
              <li><a href="#">サブサブサブメニュー3</a></li>
              <li><a href="#">サブサブサブメニュー</a></li>
            </ul>
          </li>
          <li><a href="#">サブサブメニュー</a></li>
        </ul>
      </li>
      <li><a href="#">サブメニュー</a>
        <ul>
          <li><a href="#">サブサブメニュー</a></li>
          <li><a href="#">サブサブメニュー</a></li>
          <li><a href="#">サブサブメニュー</a></li>
          <li><a href="#">サブサブメニュー</a></li>
        </ul>
      </li>
    </ul>
  </li>
<ul>

次にcssを紹介します。

#dropmenu {
  list-style-type: none;
  width: 100%;
  margin: 30px auto 500px;
  padding: 0;
}
#dropmenu li {
  position: relative;
  width: 20%;
  float: left;
  margin: 0;
  padding: 0;
  text-align: center;
}
#dropmenu li a {
  display: block;
  margin: 0;
  padding: 16px 0;
  background: #ff69b4;
  color: #fff;
  font-size: 14px;
  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: .2s;
}
#dropmenu li ul li a {
  padding: 13px 15px;
  background: #ffb6c1;
  text-align: left;
  font-size: 12px;
  font-weight: normal;
}
#dropmenu > li:hover > a {  background: #ff69b4 }
#dropmenu > li:hover li:hover > a {  background: #4b0082 }
#dropmenu li:hover > ul > li {
  overflow: visible;
  height: 38px;
}
#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 {  background: #ffb6c1}
#dropmenu li:hover ul li ul li:hover > a {  background: #4b0082 }
#dropmenu li ul li ul:before {
  position: absolute;
  content: "";
  top: 13px;
  left: -20px;
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-left-color: #db7093;
}
#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: #8b008b;
}

ここまでで長くなってしまいましたが、順を追っていけばやっていることは簡単です。

まずは一番最初に表示されている親メニューの説明

#dropmenu {
  list-style-type: none;
  width: 100%;
  margin: 30px auto 500px;
  padding: 0;
}
#dropmenu li {
  position: relative;
  width: 20%;
  float: left;
  margin: 0;
  padding: 0;
  text-align: center;
}
#dropmenu li a {
  display: block;
  margin: 0;
  padding: 16px 0;
  background: #ff69b4;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  line-height: 1;
  text-decoration: none;
}

この部分で親メニューのデザインを指定しています。
また、「width: 100%;」で横幅を設定。
ここを「1060px」などに指定して、ブログのデザインに合わせてください。

背景色と文字色を変更したいときは、下記を変更します。

●background: #ff69b4;
●color: #fff;

「background」は背景、「color」は文字色です。

次は、ひとつ下の子メニューを紹介

子メニュー全体の設定は、下記を追加します。

#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: .2s;
}
#dropmenu li ul li a {
  padding: 13px 15px;
  background: #ffb6c1;
  text-align: left;
  font-size: 12px;
  font-weight: normal;
}

マウスを乗せたときの挙動

#dropmenu > li:hover > a {  background: #ff69b4 }

まずこちらは、マウスがのっかかったときの親メニューの色を設定しています。
親メニューは色を変えてもいいですが、私は、マウスを乗せたときと載せてない時は同じ色にしております。

#dropmenu > li:hover li:hover > a {  background: #4b0082 }

こちらは逆に、子メニューのマウスがオンになったときの色を設定しております。
子メニューは、動いがあるためわかりやすく、紫みたいな色にしました。

ここで気になった方もいるかもしれませんが「>」という文字が入っています。
これを入れることにより「孫メニューだけ」、「子メニューだけ」と小さい範囲で設定することができます。

#dropmenu li:hover > ul > li {
  overflow: visible;
  height: 38px;
}

この設定で、親メニューにマウスがのっかったとき子メニューが表示されます。

#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 {  background: #ffb6c1}
#dropmenu li:hover ul li ul li:hover > a {  background: #4b0082 }

孫以下のメニューを設定しています。
最後のメニュー5は右に孫孫メニューが表示されてしますとサイドバーに被ってしまう恐れがあるため、右に表示するようにしています。

#dropmenu li ul li ul:before {
  position: absolute;
  content: "";
  top: 13px;
  left: -20px;
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-left-color: #db7093;
}
#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: #8b008b;
}

最後に矢印の設定です。

子メニューがある場合表示されます。

最後に

一見難しそうにみえますが、意外に簡単に実装することができるので皆さんもチャレンジしてみてください。

しかし、
階層があまりにも深くしてしまうと見にくくなってしまう恐れがあるため、臨機応変に使うことをオススメ
します。

うまく実装できない場合は、お気軽にお問い合わせフォームよりご連絡くださいませ。

( icon-star 前回の記事も見る

記事の文章作成や、Wordpressサイトのカスタマイズで
お困りではありませんか?
ライティングレシピでは、文章コンサルとWordpressサイトのカスタマイズを承っております!

文章コンサル
●文章力をあげてスキルアップしたい
●SEOを意識した文章を書きたい
●ライター目線で文章が書けるようになりたい

Wordpressサイトのカスタマイズ
●憧れのサイトのようにしてみたい
●不具合を修正したい
●デザインを理想通りに変更したい

少しでも当てはまる項目があるなら、いつでもお気軽にご相談くださいませ。 ココナラ満足度100%で、提案力には自信があります!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です