Creating Drop Down Menu On Click Css

I'm required to build a menu with 5 options, upon clicking a certain one a new sub menu is to appear. I have absolutely no idea how to do this.

Solution 1:

In addition to the already mentioned checkbox hack, you could also use a button as menu items, and use the :focus state to display the dropdown menu. A benefit over this is that the menu will close if you click outside of it. Some HTML elements do not naturally receive focus upon clicks; for those, you can add the "tabindex" attribute to allow them to gain focus.

ul {
    list-style: none;
}

.menu > li {
    float: left;
}
.menubutton {
    border: 0;
    background: transparent;
    cursor: pointer;
}
.menubutton:hover,
.menubutton:focus {
    outline: 0;
    text-decoration: underline;
}

.submenu {
    display: none;
    position: absolute;
    padding: 10px;
}
.menubutton:focus + .submenu,
.submenu:hover {
    display: block;
}

<ulclass="menu"><li><button>Home</button><ulclass="submenu"><li><ahref="http://www.barbie.com">Link</a></li><li>Link</li><li>Link</li><li>Link</li><li>Link</li></ul></li><li><button>More</button></li><li><button>Info</button></li></ul>

Solution 2:

CSS does not have a click handler. For this reason it is impossible to do with standard CSS. You could use something called the checkbox hack, but in my humble opinion, it's a bit clunky and would be awkward to work with inside a navigation menu like your use-case requires. For this reason I would suggest jQuery or Javascript... Here is a rather simple solution using jQuery.

Basically, we hide the sub-nav from the start using display: none; Then, using jQuery, when ".parent" is clicked we toggle a class ".visible" to the sub-nav element (the nested UL) with display: block; which makes it appear. When clicked again, it disappears as the class is removed.

Note that for this to work, every nested <UL> which is a "sub-nav" MUST have the .sub-nav class, and it's parent element (the <LI>) MUST have the .parent class. Also, since this uses jQuery, you will need to hook up a jQuery library to your site. You can do this by hosting it yourself and linking it like you normally would, or you can link it from google's library service (recommended).

JSFiddle Demo

$(document).ready(function() {
  $('.parent').click(function() {
    $('.sub-nav').toggleClass('visible');
  });
});

#navul.sub-nav {
  display: none;
}

#navul.visible {
  display: block;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><ulid="nav"><li>Home</li><liclass="parent">About
    <ulclass="sub-nav"><li>Johnny</li><li>Julie</li><li>Jamie</li></ul></li><li>Contact</li></ul>

Solution 3:

Of course I am late but:

You can trigger a css click using a hack!!

Work with an checkbox!!

Sample:

ul{
            display: none;
        }
        #checkbox{
            opacity: 0;
        }
        #checkbox:checked + ul {
            
            display: block;
        }

<divclass="container"><labelfor="checkbox">Dropdown menu</label><inputid="checkbox"type="checkbox" /><ul><li><ahref="#">Dropdown link 1</a></li><li><ahref="#">Dropdown link 2</a></li></ul></div>

You can use transitions to animate the show an hide effect :) This is just a very simple example!!

Mention: this is a CSS3 hack if you need borwser support for old browsers this is not working.

Solution 4:

In fact, there is a possibility to get this working with pure CSS and browser element behaviour, using the checkbox hack, however at the time of writing this, it is pushing what SHOULD be done with CSS vs what COULD be done with CSS. Also It can cause some pretty terrible semantic code (after all there is a reason it is usually stated as the checkbox HACK).

Having said that, you could use it if you only have requirements for modern browsers, giving limited functionality to others and I have myself used this in production code, on an isolated chrome only project and it is pretty fun to play with.

Here is a link to read more on it:

http://css-tricks.com/the-checkbox-hack/

But again to stress, like others have on here already, that functional behaviour should really be done via JavaScript. Unless you actually want a hover based menu solution then that is a different question all together!

Solution 5:

You will need to do this using javascript and registering a click event handler to perform your action.

If you're new to everything then you should look for some javascript tutorials (don't use W3Schools, look elsewhere) and then look at some jQuery tutorials as jQuery simplifies tasks like these.