My Vector Space

人生は寄り道してなんぼ

トップ > HTML / CSS > 【TIPS】CSSで作るドロップダウンメニューのドロップ表示５パターン

【TIPS】CSSで作るドロップダウンメニューのドロップ表示５パターン

HTML / CSS
f:id:ooigawa-bitter-sweet:20181020184950j:plain

CSSで作るドロップダウンメニューのドロップ表示５パターンです。

コードの書き方は、どのパターンでも共通となるhtmlと　CSSに加え、パターンごとに個別に設定するCSSを記述していきます。

共通部分になるhtmlとCSSを記述する

まずは、共通部分になるhtmlを記述していきます。

 【 html 】
 1
  <ul id="normal" class="dropmenu">
 2
      <li><a href="#">menu</a>
 3
          <ul>
 4
              <li><a href="#">submenu</a></li>
 5
              <li><a href="#">submenu</a></li>
 6
              <li><a href="#">submenu</a></li>
 7
              <li><a href="#">submenu</a></li>
 8
         </ul>
 9
      </li>
 10
      <li><a href="#">menu</a>
 11
          <ul>
 12
              <li><a href="#">submenu</a></li>
 13
              <li><a href="#">submenu</a></li>
 14
              <li><a href="#">submenu</a></li>
 15
          </ul>
 16
      </li>
 17
      <li><a href="#">menu</a>
 18
          <ul>
 19
              <li><a href="#">submenu</a></li>
 20
              <li><a href="#">submenu</a></li>
 21
              <li><a href="#">submenu</a></li>
 22
        </ul>
 23
     </li>
 24
      <li><a href="#">menu</a>
 25
          <ul>
 26
              <li><a href="#">submenu</a></li>
 27
              <li><a href="#">submenu</a></li>
 28
              <li><a href="#">submenu</a></li>
 29
              <li><a href="#">submenu</a></li>
 30
         </ul>
 31
     </li>
 32
     <li><a href="#">menu</a>
 33
         <ul>
 34
             <li><a href="#">submenu</a></li>
 35
             <li><a href="#">submenu</a></li>
 36
             <li><a href="#">submenu</a></li>
 37
             <li><a href="#">submenu</a></li>
 38
         </ul>
 39
     </li>
 40
  </ul>

次に、共通部分になるCSSを記述していきます。

 【 CSS 】
 1
  .dropmenu{
 2
      *zoom: 1;
 3
      list-style-type: none;
 4
      width: 960px;
 5
      margin: 5px auto 30px;
 6
      padding: 0;
 7
  }
 8
   .dropmenu:before, .dropmenu:after{
 9
         content: "";
 10
         display: table;
 11
  }
 12
  .dropmenu:after{
 13
        clear: both;
 14
  }
 15
  .dropmenu li{
 16
       position: relative;
 17
       width: 20%;
 18
       float: left;
 19
       margin: 0;
 20
       padding: 0;
 21
       text-align: center;
 22
  }
 23
  .dropmenu li a{
 24
       display: block;
 25
       margin: 0;
 26
       padding: 15px 0 11px;
 27
       background: #8a9b0f;
 28
       color: #fff;
 29
       font-size: 14px;
 30
       line-height: 1;
 31
       text-decoration: none;
 32
  }
 33
.dropmenu li ul{
 34
          list-style: none;
 35
          position: absolute;
 36
          z-index: 9999;
 37
          top: 100%;
 38
          left: 0;
 39
          margin: 0;
 40
          padding: 0;
 41
  }
 42
  .dropmenu li ul li{
 43
         width: 100%;
 44
  }
 45
  .dropmenu li ul li a{
 46
        padding: 13px 15px;
 47
        border-top: 1px solid #7c8c0e;
 48
        background: #6e7c0c;
 49
        text-align: left;
 50
  }
 51
  .dropmenu li:hover > a{
 52
        background: #6e7c0c;
 53
  }
 54
  .dropmenu li a:hover{
 55
        background: #616d0b;
 56
  }

ここまでの記述で、すべてのメニューが表示された状態の設定になります。
ここからパターンごとに個別のCSSを設定していき それぞれのドロップダウンの効果をつけていきます。

ドロップダウンメニュー【 1 】    「 ベーシックバージョン 」

マウスオーバーで、普通にドロップダウンメニューが現れるベーシックな形。

demo
 【 CSS 】
 1
  #normal li ul{
 2
       display: none;
 3
  }
 4
  #normal li:hover ul{
 5
        display: block;
 6
  }
ドロップダウンメニュー【 2 】    「 スライドしながら伸び縮み 」

マウスオーバーで、ドロップダウンメニューがスライドしながら伸び縮みするエフェクト

demo
 【 CSS 】
 1
  #dropmenu li ul li{
 2
        overflow: hidden;
 3
        height: 0;
 4
        transition: .2s;
 5
  }
 6
  #dropmenu li:hover ul li{
 7
         overflow: visible;
 8
         height: 38px;
 9
  }
ドロップダウンメニュー【 3 】    「 フェードイン 」

マウスオーバーでプルダウンメニューがふわっと現れる

demo
 【 CSS 】
 1
  #fade-in li ul{
 2
       visibility: hidden;
 3
       opacity: 0;
 4
       transition: 0s;
 5
  }
 6
   #fade-in li:hover ul{
 7
       visibility: visible;
 8
       opacity: 1;
 9
  }
 10
  #fade-in li ul li a{
 11
      visibility: hidden;
 12
      opacity: 0;
 13
      transition: .5s;
 14
  }
 15
  #fade-in li:hover ul li a{
 16
      visibility: visible;
 17
      opacity: 1;
 18
  }
ドロップダウンメニュー【 4 】    「 １枚ずつ回転しながら表示 」

マウスオーバーで、１枚ずつ回転しながら表示するエフェクト

demo
 【 CSS 】
 1
  #flip2 li ul {
 2
      visibility: hidden;
 3
      perspective: 400px;
 4
  }
 5
  #flip2 li:hover ul{
 6
      visibility: visible;
 7
  }
 8
  #flip2 ul li{
 9
      transform: rotateY(90deg);
 10
      transform-origin: 50% 0;
 11
      transition: .3s;
 12
  }
 13
  #flip2 li:hover li{
 14
       transform: rotateY(0);
 15
  }
 16
  #flip2 ul li:nth-child(2) {
 17
       transition-delay: .1s;
 18
  }
 19
  #flip2 ul li:nth-child(3) {
 20
       transition-delay: .2s;
 21
  }
 22
  #flip2 ul li:nth-child(4) {
 23
       transition-delay: .3s;
 24
  }
 25
 #flip2 ul li:nth-child(5) {
 26
      transition-delay: .4s;
 27
  }
ドロップダウンメニュー【 5 】 「 巻かれたパネルがパタパタ広がる 」

マウスオーバーで巻かれたパネルがパタパタ広がっていくようなエフェクト

demo
 【 CSS 】
 1
  #flip3 ul {
 2
      visibility: hidden;
 3
      perspective: 400px;
 4
  }
 5
  #flip3 li:hover ul{
 6
       visibility: visible;
 7
  }
 8
  #flip3 ul li{
 9
       transform: rotateX(-90deg);
 10
       transform-origin: 50% 0;
 11
       transition: .1s;
 12
  }
 13
  #flip3 li:hover ul li{
 14
       transform: rotateX(0);
 15
  }
 16
  #flip3 li:hover ul li:nth-child(1) {
 17
        transition-delay: 0s;
 18
  }
 19
  #flip3 li:hover ul li:nth-child(2) {
 20
        transition-delay: .1s;
 21
  }
 22
  #flip3 li:hover ul li:nth-child(3) {
 23
        transition-delay: .2s;
 24
  }
 25
  #flip3 li:hover ul li:nth-child(4) {
 26
        transition-delay: .3s;
 27
  }
 28
  #flip3 li ul li:nth-last-of-type(1) {
 29
        transition-delay: 0s;
 30
  }
 31
  #flip3 li ul li:nth-last-of-type(2) {
 32
        transition-delay: .1s;
 33
  }
 34
  #flip3 li ul li:nth-last-of-type(3) {
 35
        transition-delay: .2s;
 36
   }
 37
  #flip3 li ul li:nth-last-of-type(4) {
 38
        transition-delay: .3s;
 39
  }

         

 

参考記事 http://weboook.blog22.fc2.com/blog-entry-408.html

PICK UP
注目記事セレクション
PAGE TOP