My Vector Space

人生は寄り道してなんぼ

トップ > HTML / CSS

【TIPS】ドロップダウンリスト　５パターン

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

CSS,Javascriptで作るドロップダウンリスト５パターン。

まず、ダウンロードした外部ファイルの中にある５パターン共通のCSSファイルとJSファイルを設定していく。

 【 html 】
 1
  <head>
 2
      <link rel="stylesheet" type="text/css" href="css/style.css" />
 3
 4
      rel='stylesheet' type='text/css' />
 5
      <script type="text/javascript" src="js/modernizr.custom.79639.js"></script> 
 6
      <noscript><link rel="stylesheet" type="text/css" href="css/noJS.css" /></noscript>
 7
  </head>

次に、それぞれのhtmlとscriptを記述していく。

effect【 1 】「 gender 」
f:id:ooigawa-bitter-sweet:20150817011113j:plain
demo
 【 html 】
 1
  <div class="container">
 2
      <section class="main">
 3
          <div class="wrapper-demo">
 4
              <div id="dd" class="wrapper-dropdown-1" tabindex="1">
 5
                  <span>Gender</span>
 6
                  <ul class="dropdown" tabindex="1">
 7
                      <li><a href="#">Male</a></li>
 8
                      <li><a href="#">Female</a></li>
 9
                  </ul>
 10
              </div>
 11
          </div>
 12
      </section>
 13
  </div>
 14
 
 15
 
 16
  <!-- jQuery if needed -->
 17
 18
  1.8.2/jquery.min.js"></script>
 19
  <script type="text/javascript">
 20
 
 21
      function DropDown(el) {
 22
          this.dd = el;
 23
          this.placeholder = this.dd.children('span');
 24
          this.opts = this.dd.find('ul.dropdown > li');
 25
          this.val = '';
 26
          this.index = -1;
 27
          this.initEvents();
 28
      }
 29
      DropDown.prototype = {
 30
          initEvents : function() {
 31
              var obj = this;
 32
 
 33
              obj.dd.on('click', function(event){
 34
                  $(this).toggleClass('active');
 35
                  return false;
 36
              });
 37
 
 38
              obj.opts.on('click',function(){
 39
                  var opt = $(this);
 40
                  obj.val = opt.text();
 41
                  obj.index = opt.index();
 42
                  obj.placeholder.text('Gender: ' + obj.val);
 43
              });
 44
          },
 45
          getValue : function() {
 46
              return this.val;
 47
          },
 48
          getIndex : function() {
 49
              return this.index;
 50
          }
 51
      }
 52
      $(function() {
 53
 
 54
           var dd = new DropDown( $('#dd') );
 55
 
 56
           $(document).click(function() {
 57
               // all dropdowns
 58
              $('.wrapper-dropdown-1').removeClass('active');
 59
            });
 60
 
 61
        });
 62
 
 63
     </script>
 64
 
 65
 
effect【 2 】「 sign in with 」
f:id:ooigawa-bitter-sweet:20150817011808j:plain
demo
 【 html 】
 1
  <div class="container">
 2
      <section class="main">
 3
          <div class="wrapper-demo">
 4
              <div id="dd" class="wrapper-dropdown-2" tabindex="1">Sign in with
 5
                  <ul class="dropdown">
 6
                      <li><a href="#"><i class="icon-twitter icon-large"></i>Twitter</a></li>
 7
                      <li><a href="#"><i class="icon-github icon-large"></i>Github</a></li>
 8
                      <li><a href="#"><i class="icon-facebook icon-large"></i>Facebook</a></li>
 9
                  </ul>
 10
              </div>
 11
          </div>
 12
      </section>
 13
  </div>
 14
 
 15
 
 16
  <!-- jQuery if needed -->
 17
 18
    jquery/1.8.2/jquery.min.js"></script>
 19
   <script type="text/javascript">
 20
 
 21
        function DropDown(el) {
 22
            this.dd = el;
 23
            this.initEvents();
 24
        }
 25
        DropDown.prototype = {
 26
            initEvents : function() {
 27
                var obj = this;
 28
 
 29
                obj.dd.on('click', function(event){
 30
                    $(this).toggleClass('active');
 31
                    event.stopPropagation();
 32
                });
 33
          }
 34
      }
 35
 
 36
      $(function() {
 37
          var dd = new DropDown( $('#dd') );
 38
          $(document).click(function() {
 39
              // all dropdowns
 40
              $('.wrapper-dropdown-2').removeClass('active');
 41
          });
 42
 
 43
      });
 44
 
 45
  </script>
 46
 
 47
 
effect【 3 】「 transport 」
f:id:ooigawa-bitter-sweet:20150817013329j:plain
demo
 【 html 】
 1
  <div class="container">
 2
      <section class="main">
 3
          <div class="wrapper-demo">
 4
              <div id="dd" class="wrapper-dropdown-3" tabindex="1">
 5
                  <span>Transport</span>
 6
                  <ul class="dropdown">
 7
                      <li><a href="#"><i class="icon-envelope icon-large"></i>Classic mail</a></li>
 8
                      <li><a href="#"><i class="icon-truck icon-large"></i>UPS Delivery</a></li>
 9
                      <li><a href="#"><i class="icon-plane icon-large"></i>Private jet</a></li>
 10
                  </ul>
 11
              </div>
 12
          </div>
 13
      </section>
 14
  </div>
 15
 
 16
 
 17
  <!-- jQuery if needed -->
 18
 19
  jquery/1.8.2/jquery.min.js"></script>
 20
  <script type="text/javascript">
 21
 
 22
       function DropDown(el) {
 23
           this.dd = el;
 24
           this.placeholder = this.dd.children('span');
 25
           this.opts = this.dd.find('ul.dropdown > li');
 26
           this.val = '';
 27
           this.index = -1;
 28
           this.initEvents();
 29
       }
 30
      DropDown.prototype = {
 31
           initEvents : function() {
 32
               var obj = this;
 33
 
 34
                obj.dd.on('click', function(event){
 35
                    $(this).toggleClass('active');
 36
                    return false;
 37
                 });
 38
 
 39
                obj.opts.on('click',function(){
 40
                    var opt = $(this);
 41
                    obj.val = opt.text();
 42
                    obj.index = opt.index();
 43
                    obj.placeholder.text(obj.val);
 44
                });
 45
            },
 46
            getValue : function() {
 47
                return this.val;
 48
            },
 49
           getIndex : function() {
 50
                return this.index;
 51
            }
 52
        }
 53
 
 54
        $(function() {
 55
             var dd = new DropDown( $('#dd') );
 56
 
 57
             $(document).click(function() {
 58
                 // all dropdowns
 59
                 $('.wrapper-dropdown-3').removeClass('active');
 60
              });
 61
 
 62
          });
 63
 
 64
      </script>
 65
 
 66
 
 67
 
effect【 4 】「 To do 」
f:id:ooigawa-bitter-sweet:20150817013840j:plain
demo
 【 html 】
 1
  <div class="container">
 2
      <section class="main">
 3
          <div class="wrapper-demo">
 4
              <div id="dd" class="wrapper-dropdown-4">To do
 5
                  <ul class="dropdown">
 6
                      <li><input type="checkbox" id="el-1" name="el-1" value="donut">
 7
                      <label for="el-1">Eat a donut</label></li>
 8
                      <li><input type="checkbox" id="el-2" name="el-2" value="neighbour">
 9
                      <label for="el-2">Spy on my neighbours</label></li>
 10
                      <li><input type="checkbox" id="el-3" name="el-3" value="T-rex">
 11
                      <label for="el-3">Feed my T-rex</label></li>
 12
                  </ul>
 13
              </div>
 14
          </div>
 15
      </section>
 16
  </div>
 17
 
 18
 
 19
  <!-- jQuery if needed -->
 20
 21
  jquery/1.8.2/jquery.min.js"></script>
 22
  <script type="text/javascript">
 23
 
 24
      function DropDown(el) {
 25
          this.dd = el;
 26
          this.opts = this.dd.find('ul.dropdown > li');
 27
          this.val = ;
 28
          this.index = ;
 29
          this.initEvents();
 30
     }
 31
      DropDown.prototype = {
 32
           initEvents : function() {
 33
               var obj = this;
 34
 
 35
                obj.dd.on('click', function(event){
 36
                    $(this).toggleClass('active');
 37
                    event.stopPropagation();
 38
                });
 39
 
 40
               obj.opts.children('label').on('click',function(event){
 41
                   var opt = $(this).parent(),
 42
                       chbox = opt.children('input'),
 43
                        val = chbox.val(),
 44
                        idx = opt.index();
 45
 
 46
                    ($.inArray(val, obj.val) !== -1) ? obj.val.splice( $.inArray(val, obj.val), 1 )
 47
                     : obj.val.push( val );
 48
                    ($.inArray(idx, obj.index) !== -1) ? obj.index.splice( $.inArray(idx, obj.index)
 49
                     , 1 ) : obj.index.push( idx );
 50
                 });
 51
             },
 52
            getValue : function() {
 53
                return this.val;
 54
            },
 55
            getIndex : function() {
 56
                return this.index;
 57
            }
 58
        }
 59
 
 60
         $(function() {
 61
 
 62
              var dd = new DropDown( $('#dd') );
 63
              $(document).click(function() {
 64
                  // all dropdowns
 65
                   $('.wrapper-dropdown-4').removeClass('active');
 66
               });
 67
          });
 68
     </script>
effect【 5 】「 john Doe 」
f:id:ooigawa-bitter-sweet:20150817014217j:plain
demo
 【 html 】
 1
  <div class="container">
 2
      <section class="main">
 3
          <div class="wrapper-demo">
 4
              <div id="dd" class="wrapper-dropdown-5" tabindex="1">John Doe
 5
                  <ul class="dropdown">
 6
                      <li><a href="#"><i class="icon-user"></i>Profile</a></li>
 7
                      <li><a href="#"><i class="icon-cog"></i>Settings</a></li>
 8
                      <li><a href="#"><i class="icon-remove"></i>Log out</a></li>
 9
                  </ul>
 10
              </div>
 11
          </div>
 12
      </section>
 13
  </div>
 14
 
 15
 
 16
   <!-- jQuery if needed -->
 17
 18
   jquery/1.8.2/jquery.min.js"></script>
 19
  <script type="text/javascript">
 20
 
 21
      function DropDown(el) {
 22
          this.dd = el;
 23
          this.initEvents();
 24
      }
 25
      DropDown.prototype = {
 26
           initEvents : function() {
 27
                var obj = this;
 28
 
 29
               obj.dd.on('click', function(event){
 30
                   $(this).toggleClass('active');
 31
                   event.stopPropagation();
 32
               });
 33
           }
 34
       }
 35
 
 36
      $(function() {
 37
 
 38
           var dd = new DropDown( $('#dd') );
 39
 
 40
           $(document).click(function() {
 41
               // all dropdowns
 42
              $('.wrapper-dropdown-5').removeClass('active');
 43
          });
 44
 
 45
      });
 46
 
 47
   </script>
 48
 
 49
 

   

 

参考サイトhttp://tympanus.net/codrops/2012/10/04/custom-drop-down-list-styling/

 

 

関連記事ドロップダウンメニュー関連の記事

【TIPS】画像ホバーの際アニメーション効果をつけるCSS3 - ihover -

HTML / CSS

スクリプト不要で、画像ホバー時にCSS3アニメーションで様々なキャプションを表示するスタイルシート。CSS3だけでここまでできるとは…。

目  次
                                              
hover effect【１】

左側と右側からテキストがスライドしてくるエフェクト

ihover-capture-1
demo

　コーディングは、まずhtmlファイルに以下を記述

 【 html 】
 1
  <!-- From left and right -->
 2
  <div class="row">
 3
      <div class="col-sm-6">
 4
 
 5
          <!-- normal -->
 6
          <div class="ih-item circle effect13 from_left_and_right"><a href="#">
 7
              <div class="img"><img src="client/images/assets/7.jpg" alt="img"></div>
 8
              <div class="info">
 9
                  <div class="info-back">
 10
                      <h3>Heading here</h3>
 11
                      <p>Description goes here</p>
 12
                  </div>
 13
              </div></a></div>
 14
          <!-- end normal -->
 15
 
 16
      </div>
 17
      <br>
 18
      <div class="col-sm-6">
 19
 
 20
          <!-- colored -->
 21
          <div class="ih-item circle colored effect13 from_left_and_right"><a href="#">
 22
              <div class="img"><img src="client/images/assets/1.jpg" alt="img"></div>
 23
                  <div class="info">
 24
                      <div class="info-back">
 25
                          <h3>Heading here</h3>
 26
                          <p>Description goes here</p>
 27
                      </div>
 28
                  </div></a></div>
 29
          <!-- end colored -->
 30
 
 31
      </div>
 32
  </div>
 33
  <!-- end From left and right -->

　ＣＳＳはダウンロードした外部ファイル( https://github.com/gudh/ihover )の中にある 　「ihover.css」を読み込む

 【 CSS 】
 1
  <link href="styles/ihover.css" rel="stylesheet">
                                              
hover effect【２】

画像を画面上側に、テキストを下側にエフェクトをかけて配置

ihover-capture-2
demo

　コーディングは、まずhtmlファイルに以下を記述

 【 html 】
 1
  <!-- From left and right -->
 2
  <div class="row">
 3
      <div class="col-sm-6">
 4
 
 5
          <!-- normal -->
 6
          <div class="ih-item circle effect13 from_left_and_right"><a href="#">
 7
              <div class="img"><img src="client/images/assets/7.jpg" alt="img"></div>
 8
              <div class="info">
 9
                  <div class="info-back">
 10
                      <h3>Heading here</h3>
 11
                      <p>Description goes here</p>
 12
                  </div>
 13
              </div></a></div>
 14
          <!-- end normal -->
 15
 
 16
      </div>
 17
      <br>
 18
      <div class="col-sm-6">
 19
 
 20
          <!-- colored -->
 21
          <div class="ih-item circle colored effect13 from_left_and_right"><a href="#">
 22
              <div class="img"><img src="client/images/assets/1.jpg" alt="img"></div>
 23
                  <div class="info">
 24
                      <div class="info-back">
 25
                          <h3>Heading here</h3>
 26
                          <p>Description goes here</p>
 27
                      </div>
 28
                  </div></a></div>
 29
          <!-- end colored -->

　ＣＳＳはダウンロードした外部ファイル( https://github.com/gudh/ihover )の中にある 　　「ihover.css」を読み込む

 【 CSS 】
 1
  <link href="styles/ihover.css" rel="stylesheet">
                                              
hover effect【３】

画像を回転させながら消して、テキスト表示に切り替える

ihover-capture-3
demo

　コーディングは、まずhtmlファイルに以下を記述

 【 html 】
 1
  <div class="row">
 2
      <div class="col-sm-6">
 3
 
 4
           <!-- normal -->
 5
           <div class="ih-item square effect2"><a href="#">
 6
               <div class="img"><img src="client/images/assets/rect/10.jpg" alt="img"></div>
 7
               <div class="info">
 8
                   <h3>Heading here</h3>
 9
                   <p>Description goes here</p>
 10
               </div></a></div>
 11
          <!-- end normal -->
 12
 
 13
      </div>
 14
      <br>
 15
      <div class="col-sm-6">
 16
 
 17
          <!-- colored -->
 18
          <div class="ih-item square colored effect2"><a href="#">
 19
              <div class="img"><img src="client/images/assets/rect/1.jpg" alt="img"></div>
 20
              <div class="info">
 21
                  <h3>Heading here</h3>
 22
                  <p>Description goes here</p>
 23
              </div></a></div>
 24
          <!-- end colored -->
 25
 
 26
      </div>
 27
    </div>

　ＣＳＳはダウンロードした外部ファイル( https://github.com/gudh/ihover )の中にある 　「ihover.css」を読み込む

 【 CSS 】
 1
  <link href="styles/ihover.css" rel="stylesheet">
                                              
hover effect【４】

回転にひねりを加えてテキストを表示

ihover-capture-4
demo

　コーディングは、まずhtmlファイルに以下を記述

 【 html 】
 1
  function pagination($pages = '', $range = 4)
 2
  {
 3
      $showitems = ($range * 2)+1;
 4
 
 5
      global $paged;
 6
      if(empty($paged)) $paged = 1;
 7
 
 8
      if($pages == '')
 9
      {
 10
          global $wp_query;
 11
          $pages = $wp_query->max_num_pages;
 12
          if(!$pages)
 13
          {
 14
              $pages = 1;
 15
          }
 16
       }
 17
 
 18
       if(1 != $pages)
 19
      {
 20
          echo "<div class=\"pagination clearfix\"><span>Page ".$paged." of ".$pages."</span>";
 21
        if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "<a href='"
 22
        .get_pagenum_link(1)."'>&laquo; First</a>";
 23
        if($paged > 1 && $showitems < $pages) echo "<a href='".get_pagenum_link($paged - 1)
 24
        ."'>&lsaquo; Previous</a>";
 25
 
 26
        for ($i=1; $i <= $pages; $i++)
 27
        {
 28
        if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) ||
 29
        $pages <= $showitems ))
 30
        {
 31
             echo ($paged == $i)? "<span class=\"current\">".$i."</span>":"<a href='"

　ＣＳＳはダウンロードした外部ファイル( https://github.com/gudh/ihover )の中にある 　「ihover.css」を読み込む

 【 CSS 】
 1
  <link href="styles/ihover.css" rel="stylesheet">
                                              
hover effect【５】

画像拡大＋テキストスライド表示

ihover-capture-5
demo

　コーディングは、まずhtmlファイルに以下を記述

 【 html 】
 1
  <!-- From left and right-->
 2
  <div class="row">
 3
      <div class="col-sm-6">
 4
 
 5
          <!-- normal -->
 6
          <div class="ih-item square effect6 from_left_and_right"><a href="#">
 7
              <div class="img"><img src="client/images/assets/rect/2.jpg" alt="img"></div>
 8
              <div class="info">
 9
                  <h3>Heading here</h3>
 10
                  <p>Description goes here</p>
 11
              </div></a></div>
 12
          <!-- end normal -->
 13
 
 14
      </div>
 15
      <br>
 16
      <div class="col-sm-6">
 17
 
 18
          <!-- colored -->
 19
          <div class="ih-item square colored effect6 from_left_and_right"><a href="#">
 20
              <div class="img"><img src="client/images/assets/rect/4.jpg" alt="img"></div>
 21
              <div class="info">
 22
                  <h3>Heading here</h3>
 23
                  <p>Description goes here</p>
 24
              </div></a></div>
 25
          <!-- end colored -->
 26
 
 27
      </div>
 28
    </div>
 29
  <!-- end From left and right-->

　ＣＳＳはダウンロードした外部ファイル( https://github.com/gudh/ihover )の中にある 　「ihover.css」を読み込む

 【 CSS 】
 1
  <link href="styles/ihover.css" rel="stylesheet">
                                              
hover effect【６】

画像拡大＋テキストをズームアップ表示からの配置

ihover-capture-6
demo

　コーディングは、まずhtmlファイルに以下を記述

 【 html 】
 1
  <div class="row">
 2
      <div class="col-sm-6">
 3
 
 4
          <!-- normal -->
 5
          <div class="ih-item square effect7"><a href="#">
 6
              <div class="img"><img src="client/images/assets/rect/2.jpg" alt="img"></div>
 7
              <div class="info">
 8
                  <h3>Heading here</h3>
 9
                  <p>Description goes here</p>
 10
              </div></a></div>
 11
          <!-- end normal -->
 12
 
 13
      </div>
 14
      <br>
 15
      <div class="col-sm-6">
 16
 
 17
          <!-- colored -->
 18
          <div class="ih-item square colored effect7"><a href="#">
 19
              <div class="img"><img src="client/images/assets/rect/4.jpg" alt="img"></div>
 20
              <div class="info">
 21
                  <h3>Heading here</h3>
 22
                  <p>Description goes here</p>
 23
              </div></a></div>
 24
          <!-- end colored -->
 25
 
 26
     </div>
 27
  </div>

　ＣＳＳはダウンロードした外部ファイル( https://github.com/gudh/ihover )の中にある 　「ihover.css」を読み込む

 【 CSS 】
 1
  <link href="styles/ihover.css" rel="stylesheet">

 

 

 

関連記事画像ホバー時に効果をつけるtips記事

画像を４つのパネルに分割＆エフェクト効果のスライドショー -Four Boxes Slideshow-

Javascript HTML / CSS

 

画像を4つのパネルに分割してエフェクトをかけたスライドショー3パターンのコードまとめ。

 

まず、ダウンロードした外部ファイルの中にある３パターン共通のＣＳＳファイル(３ファイル)とｊｓファイル(３ファイル)を設定。

 【 html 】
 1
  <head>
 2
      <link rel="stylesheet" type="text/css" href="css/normalize.css" />
 3
      <link rel="stylesheet" type="text/css" href="css/demo.css" />
 4
      <link rel="stylesheet" type="text/css" href="css/component.css" />
 5
      <script src="js/modernizr.custom.js"></script>
 6
      <script src="js/classie.js"></script>
 7
      <script src="js/boxesFx.js"></script>
 8
      <script>
 9
          new BoxesFx( document.getElementById( 'boxgallery' ) );
 10
      </script>
 11
   </head>

次に、それぞれのhtmlを記述していく。  

effect【 1 】   各パネルが別々のスライドをするエフェクト

各パネルが別々のスライドをするエフェクトのコード。

demo
 【 html 】
 1
  <div id="boxgallery" class="boxgallery" data-effect="effect-1">
 2
      <div class="panel"><img src="img/1.jpg" alt="Image 1"/></div>
 3
      <div class="panel"><img src="img/2.jpg" alt="Image 2"/></div>
 4
      <div class="panel"><img src="img/3.jpg" alt="Image 3"/></div>
 5
      <div class="panel"><img src="img/4.jpg" alt="Image 4"/></div>
 6
  </div>
effect【 2 】 各パネルが外側　側面に向かって時間差でスライド

各パネルが外側　側面に向かって時間差でスライドするコード

demo
 【 html 】
 1
  <div id="boxgallery" class="boxgallery" data-effect="effect-2">
 2
      <div class="panel"><img src="img/3.jpg" alt="Image 3"/></div>
 3
      <div class="panel"><img src="img/4.jpg" alt="Image 4"/></div>
 4
      <div class="panel"><img src="img/1.jpg" alt="Image 1"/></div>
 5
      <div class="panel"><img src="img/2.jpg" alt="Image 2"/></div>
 6
  </div>
effect【 3 】 各パネルが時間差でスライドしながら落ちる

各パネルが時間差でスライドしながら落ちるコード

demo
 【 html 】
 1
  <div id="boxgallery" class="boxgallery" data-effect="effect-3">
 2
      <div class="panel"><img src="img/2.jpg" alt="Image 2"/></div>
 3
      <div class="panel"><img src="img/3.jpg" alt="Image 3"/></div>
 4
      <div class="panel"><img src="img/1.jpg" alt="Image 1"/></div>
 5
      <div class="panel"><img src="img/4.jpg" alt="Image 4"/></div>
 6
  </div>

 

 

参考サイト

http://tympanus.net/codrops/2014/06/11/how-to-create-a-tiled-background-slideshow/

 

 

関連記事他のスライドショー関連の記事

【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
注目記事セレクション

【TIPS】画像ホバーの際アニメーション効果をつけるCSS3 - InContent -

HTML / CSS

 

スクリプト不要で、画像ホバー時にＣＳＳ３アニメーションで様々なキャプション表示をするスタイルシート６パターン。

基本的にどのパターンで実装する場合でも、以下のサイトからダウンロードした外部ファイルの中にあるCSSファイルを一つ設置するだけでOK。

https://github.com/brunodsgn/incontent

パターンごとに変える必要のあるコードは、htmlファイルのclass名の部分だけ。
CSSファイルは、SASSバージョンとLESSバージョンの2種類あるけど、とりあえずここではSASSバージョンのCSSファイルを設置。

そのあと、body内に設定したいパターンのコードを記述していく流れ。  

 

 【 html 】　SASSバージョン
 1
  <link rel="stylesheet" href="css/sass-compiled.css" type="text/css" />

 

 【 html 】　LESSバージョン
 1
  <link rel="stylesheet" href="css/less-compiled.css" type="text/css" />

 

　次に６パターンそれぞれの記述をしていく。

　設定したいエフェクト用のクラス名の部分以外は共通のコードでＯＫ。

hover effect【 1 】
「class名"bottom-to-top"」「class名"top-to-bottom"」

上下からスライドしてくるエフェクト

incontent-capture-1
demo

 

 【 html 】
 1
  <div class="pic">
 2
      <img src="img/01.jpg" class="pic-image" alt="pic"/>
 3
      <span class="pic-caption bottom-to-top">
 4
          <h1 class="pic-title">bottom-to-top</h1>
 5
          <p>Some description or text.</p>
 6
      </span>
 7
  </div>
hover effect【 2 】
「class名"left-to-right"」「class名"right-to-left"」

左右からスライドしてくるエフェクト

incontent-capture-3
demo

 

 【 html 】
 1
  <div class="pic">
 2
      <img src="img/03.jpg" class="pic-image" alt="pic"/>
 3
      <span class="pic-caption left-to-right">
 4
          <h1 class="pic-title">left-to-right</h1>
 5
          <p>Some description or text.</p>
 6
      </span>
 7
  </div>
hover effect【 3 】
「class名"rotate-in"」「class名"rotate-out"」

内側から回転して出てくるエフェクト

incontent-capture-3
demo

 

 【 html 】
 1
  <div class="pic">
 2
      <img src="img/05.jpg" class="pic-image" alt="pic"/>
 3
      <span class="pic-caption rotate-in">
 4
          <h1 class="pic-title">Rotate-In</h1>
 5
          <p>Some description or text.</p>
 6
      </span>
 7
  </div>
hover effect【 4 】
「class名"open-up"」「class名"open-down"」

真ん中を軸に上下に回転しながら出てくるエフェクト

incontent-capture-4
demo

 

 【 html 】
 1
  <div class="pic">
 2
      <img src="img/07.jpg" class="pic-image" alt="pic"/>
 3
      <span class="pic-caption open-up">
 4
          <h1 class="pic-title">Open-Up</h1>
 5
          <p>Some description or text.</p>
 6
      </span>
 7
  </div>
hover effect【 5 】
「class名"open-left"」「class名"open-right"」

真ん中を軸に左右に回転しながら出てくるエフェクト

incontent-capture-5
demo

 

 【 html 】
 1
  <div class="pic">
 2
      <img src="img/09.jpg" class="pic-image" alt="pic"/>
 3
      <span class="pic-caption open-left">
 4
          <h1 class="pic-title">Open-Left</h1>
 5
          <p>Some description or text.</p>
 6
      </span>
 7
  </div>
hover effect【 6 】
「class名"come-left"」「class名"come-right"」

真ん中を軸にひねりを加えたエフェクト

incontent-capture-6
demo

 

 【 html 】
 1
  <div class="pic">
 2
      <img src="img/11.jpg" class="pic-image" alt="pic"/>
 3
      <span class="pic-caption come-left">
 4
          <h1 class="pic-title">Come-Left</h1>
 5
          <p>Some description or text.</p>
 6
      </span>
 7
  </div>

 

 

 

関連記事画像ホバー時に効果をつけるtips記事

PAGE TOP