how to make dropdown menu using html & css


Tags: javascript,html,css,menu

Problem :

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>


Solution :

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.


    CSS Howto..

    How to animate two divs in html / css to make a semi-circle transition?

    How to Achieve Word Wrap Effect With Children Divs

    CSS- how to prevent the original title info to be displayed

    CSS: How to make the border of a

    tag to be 100 percent on the div tag?

    How to make arc-in animation on a website - CSS or JavaScript?

    margin-top set by jQuery makes content jump. How can I make it smoothly animate?

    How to change the value depend on css animation?

    How can I create alike css classes [duplicate]

    How to remove the empty space between divs in CSS?

    How can I make sure redundant

    tags do not break styling?

    How to display element on screen but not at the top of the screen in html/css?

    How can I divide a div element's content with CSS selector?

    How do you make Static tool tip with CSS?

    how to scale an image disproportionally via css?

    How to change value of class in another class?

    How do I align an icon right next to “Click here”?

    How to put a button inside of a text entry field in a form on a website using javascript, css, html

    How do I change image on hover of that the img is in - in jQuery?

    How to word wrap text in HTML?

    How to separate Text and HTML with CSS

    How do I align these links inside inline-blocks to the top?

    How to write specific CSS for mozilla, chrome and IE

    How does google elegantizr work?

    How to stop CSS selector from selecting all child elements

    How to add JS and CSS file in web page based on parameter?

    Why are THs bolder than TDs and how to avoid it?

    How to CSS style angular directive?

    How to apply Hovering on html area tag?

    how to include absolute css path using add_editor_style() in wordpress

    How to Vertically Center 2 anchor tags with CSS?