how to make dropdown menu using html & css

Question

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>

Drop Downs can be made only with CSS. Maybe this can help. stackoverflow.com/questions/14331924/… — user1823761
– user1823761, Commented May 15, 2013 at 5:19

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

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.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered May 15, 2013 at 4:10

PSL

124k21 gold badges257 silver badges243 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

PSL Over a year ago

@user1814595 See of this helps resolving your issue.

user1814595 Over a year ago

thank you for your help :) I copied the code in the Fiddle as it is and pasted it and it didn't work I'm new in web design so could you tell me what should I do in details and if you have another simple code please give it to me

PSL Over a year ago

Here you go jsfiddle.net/4axn4. Key thing is in order to identify the actuall trigger i have just added a class for the elements <div id="dd" class="wrapper-dropdown-3 dd" tabindex="1"> <span class="dd">LogIn</span>

PSL Over a year ago

Use this Fiddle jsfiddle.net/bhC4x changed the class name to trigger and see the changes.

user1814595 Over a year ago

thank you for your effort it is working now thanks you very much :)

The Mechanic · Accepted Answer · 2013-05-15 17:33:12Z

0

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

edited May 15, 2013 at 17:33

answered May 15, 2013 at 5:09

The Mechanic

2,3391 gold badge28 silver badges37 bronze badges

4 Comments

user1814595 Over a year ago

thank you for your help but I didn't understand exactly what should I do ??? I copied your code and pasted it in a blank html page but It didn't work I like your demo I need to make something like this but the menu expands from the top please tell me in details what should I do because I'm new in web design Thanks in advance

The Mechanic Over a year ago

please create a fiddle of your code and i'll implement it in my code let me know

user1814595 Over a year ago

thanks sire I'm sorry I'm still confused what should I do :$ ?? add your code to my code or make a blank html page and paste your code ??

The Mechanic Over a year ago

yup please come in chat room

Collectives™ on Stack Overflow

how to make dropdown menu using html & css

2 Answers 2

Fiddle

Script

5 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Script

5 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related