Pure CSS Onclick Dropdown Menu
This CSS code combined with a small amount of html will create an onclick dropdown menu. It uses NO javascript or jQuery.
It uses :focus to determine if a click happens on it's element. If :focus detects a click, the dropdown menu (which is hidden) is made visible.
<style>
/* style for the css menu dropdown container */
.menu {
position:relative;
display:inline-block;
z-index:2; padding:0;
margin:0;
outline:0;
text-align:left;
}
/* style for the button */
.menu:before {
content: "\2630 \a0 Menu";
color:white;
padding: 5px 10px;
border: 1px solid #555;
border-radius:3px;
background: #96305e;
background: -moz-linear-gradient(top, #96305e 0%, #822956 10%, #822956 90%, #751749 100%);
background: -webkit-linear-gradient(top, #96305e 0%,#822956 10%,#822956 90%,#751749 100%);
background: linear-gradient(to bottom, #96305e 0%,#822956 10%,#822956 90%,#751749 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#96305e', endColorstr='#751749',GradientType=0 );
}
.menu:focus { pointer-events:none; }
/* If :focus detected the dropdown menu is displayed by making it visible */
.menu:focus .menu-dropdown { opacity:1; visibility:visible; }
/* style for the dropdown box */
.menu-dropdown {
background-color: #364656;
width: auto;
margin:3px 0 0 0;
padding: 10px;
border-radius:3px;
border:1px black solid;
border-radius:3px;
pointer-events: auto;
position: absolute;
z-index: 1;
opacity: 0;
visibility: hidden;
transition: visibility 1s;
background: #1f8bd3;
background: -moz-linear-gradient(top, #1f8bd3 0%, #1b7aba 10%, #1b7aba 90%, #1b61b7 100%);
background: -webkit-linear-gradient(top, #1f8bd3 0%,#1b7aba 10%,#1b7aba 90%,#1b61b7 100%);
background: linear-gradient(to bottom, #1f8bd3 0%,#1b7aba 10%,#1b7aba 90%,#1b61b7 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1f8bd3', endColorstr='#1b61b7',GradientType=0 );
}
/* style the links in the dropdown */
.menu-dropdown a {
background:transparent;
border:none;
outline:0;
display:block;
color:white;
text-decoration:none;
width:160px;
padding:5px;
}
</style>
Example:
CSS
Use the code above
HTML:
This accompanying HTML code is the drop down menu which becomes visible (drops down) when the user clicks the main menu button.
<div tabindex="0" class="menu">
<div class="menu-dropdown">
<a href="javascript:alert('Dropdown 1')">Dropdown 1</a>
<a href="javascript:alert('Dropdown 2')">Dropdown 2</a>
<a href="javascript:alert('Dropdown 3')">Dropdown 3</a>
<a href="javascript:alert('No Javascript')">No Javascript</a>
</div>
</div>
Produces this dropdown effect with NO javascript and NO jQuery:
This dropdown solution uses pure css to create a dropdown menu.
There's another way to do this using pure HTML. See the Pure HTML Dropdown Details Summary Tag for a pure HTML dropdown, styled with a hamburger menu.