CODEWITHSUNDEEP
javascripthtmlcssmenu
user1814595
user1814595

Reputation: 143

how to make dropdown menu using html & css

I'm trying to create html menu holding a login form, So when I expand the menu, a login form appears, the problem is when I click on the form to write the username or password, the menu collapses automatically and the login form disappears before I write anything inside it

Here is an image of my menu and form in it. 

<body>
  <div class="wrapper-demo">
    <div id="dd" class="wrapper-dropdown-3" tabindex="1">   
      <span>LogIn</span>
      <ul class="dropdown">
        <li>
          Username<input type="text" id="UN"><br/>
          password<input type="text" id="pass"><br/>
          <input type="submit" id="login" value="login">
        </li>
      </ul>
    </div>​</div>
  </div>
  <!-- jQuery if needed -->
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
  <script type="text/javascript">
    function WTF() {
      window.location.href = "";
    }
    function DropDown(el) {
      this.dd = el;
      this.placeholder = this.dd.children('span');
      this.opts = this.dd.find('ul.dropdown > li');
      this.val = '';
      this.index = -1;
      this.initEvents();
    }
    DropDown.prototype = {
      initEvents: function () {
        var obj = this;
        obj.dd.on('click', function (event) {
          $(this).toggleClass('active');
          return false;
        });
      }
    }
    $(function () {
      var dd = new DropDown($('#dd'));
      $(document).click(function () {
        // all dropdowns
        $('.wrapper-dropdown-3').removeClass('active');
      });
    });
  </script>
</body>

Upvotes: 1

Views: 8077

Answers (2)

The Mechanic
The Mechanic

Reputation: 2329

I have a very good and light weight code for this check out this it helps you

Html code

<div class="wrapper-demo">
    <div id="dd" class="wrapper-dropdown-3" tabindex="1">   
          <span onclick="uiDrop(this,'#topDrop', false)">LogIn</span>
          <ul class="dropdown" id="topDrop">
            <li>
              <label>Username</label> 
              <input type="text" id="UN">
            </li>
            <li>
              <label>password</label>
              <input type="text" id="pass">
            </li>
            <li>
              <input type="submit" id="login" value="login">
            </li>
          </ul>
    </div>​
</div>

jQuery code

function uiDrop(ths,target, auto){  
// target means that div which has to slidetoggle
// auto means target div hide  auto 

        if( $(target).is(':visible'))
            $(target).slideUp('fast');
        else
            $(target).slideDown('fast');

        $(target).mouseup(function(e){
            e.preventDefault();
            return false;
        });

        $(document).unbind('mouseup');  
        $(document).mouseup(function(e){
            if(auto)
                $(target).slideUp('fast');
            else
            {   
                //if($(e.target).parent(target).length==0)          
                $(target).slideUp('fast');
            }       
        });
};

css

.dropdown {
    display:none;
    list-style:none;
    background:#f7f7f7;
    padding:10px;
    border:1px solid #ddd;
}

.dropdown li{
   display:block;
}
.wrapper-dropdown-3{
   position:relative; width:200px;
}
#dd span{
   display:block; 
   background:#f7f7f7; 
   height:30px; 
   line-height:30px; 
   padding:0 10px;
}

let me know if you have any problem while using this you can check this code in demo here is the link http://visualdecoder.com/plugins/ddSlide/demo.html

Upvotes: 0

PSL
PSL

Reputation: 123739

Issue is you have click event on the wrapper itself as well as on the document any click on the input fields or surrounding area executes the click on the wrapper and toggles the state according to your logic. SO any click on the elements inside bubbles up to the parent and toggles its state, that is why it collapses when you click on any input field or any other fields inside your dropdown. So one quick way is to identify the place from which event is coming from and if it is from the dropdown triggers handle it else leave it.

Fiddle

HTML Mark up change:- added a class called dd to both to identify the place of actual trigger.

<div id="dd" class="wrapper-dropdown-3 dd" tabindex="1"> 
    <span class="dd">LogIn</span>

Script

DropDown.prototype = {
      initEvents: function () {
          var obj = this;
          obj.dd.on('click', function (event) {
              event.stopPropagation(); //Stop propagation
              if (event.target.className === 'dd') { //check for specfic targets
                  $(this).toggleClass('active');

              }
              return false;

          });
      }
  }

If you change your HTML structure to move the .dropdown out of the same wrapper as the trigger this issue won't happen.

Upvotes: 1

Related Questions