My Vector Space

  人生は寄り道してなんぼ

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

   f:id:ooigawa-bitter-sweet:20150819185843j:plain

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

 

  まず、ダウンロードした外部ファイルの中にある5パターン共通のCSSファイルと

  JSファイルを設定。

 【 html 】
 1
  <head>
 2
      <link rel="stylesheet" type="text/css" href="css/style.css" />
 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

 【 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

 【 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

 【 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

 【 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

 【 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/

 

 

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

PAGE TOP