Menu
I am working on a pure CSS hamburger menu icon, so far it's working great, except that the gaps between the lines are not clickable. How can I modify this code so that the entire button is clickable as opposed to just the lines?
<a href="#" title="Open Menu" class="menu"></a>
.menu {
width:30px;
height:5px;
background-color:#000;
position:relative;
display:inline-block;
}
.menu:after, .menu:before {
content: '';
width: 100%;
height:5px;
background-color:#000;
position:absolute;
}
.menu:after {
top:10px;
left:0;
}
.menu:before {
top:20px;
left:0;
}
Here's a JSFiddle.
Thanks!
739
You could just wrap the <a> tag around a div that has the before and after properties.
What Is A Hamburger Menu? A Hamburger Menu is a way to display navigation links on a website, usually for mobile devices and smaller screens. However, CSS hamburger menus can be used for desktop websites as well. Once you click the “hamburger” icon, a sliding menu will appear, displaying on top of the main content.
A hamburger menu is an icon used on a website and in apps that, when clicked or tapped, opens a side menu or navigation drawer. It's called a “hamburger menu” because it takes the form of the famous sandwich.
The main purpose of the hamburger button is to preserve screen space by hiding navigational elements. The icon itself is small and implies a hidden list that can be revealed with a click or press.
Just do this
DEMO - 1 (border top or bottom)
.menu {
width:30px;
height:20px;
position:relative;
display:inline-block;
border-top:4px solid black;
}
.menu:after, .menu:before {
content: '';
width: 100%;
height:4px;
background-color:#000;
position:absolute;
}
.menu:after {
bottom:0px;
left:0;
}
.menu:before {
top:6px;
left:0;
}<a href="#" title="Open Menu" class="menu"></a>DEMO -2 (box-shadow)
.menu {
width:30px;
height:20px;
position:relative;
display:inline-block;
box-shadow:inset 0 4px 0 black;
}
.menu:after, .menu:before {
content: '';
width: 100%;
height:4px;
background-color:#000;
position:absolute;
}
.menu:after {
bottom:0px;
left:0;
}
.menu:before {
top:8px;
left:0;
}<a href="#" title="Open Menu" class="menu"></a>DEMO - 3 (only :before or after mixed box-shadow inset)
.menu {
width:30px;
height:20px;
position:relative;
display:inline-block;
box-shadow:inset 0 4px 0 black,inset 0 -4px 0 black;
}
.menu:after{
content: '';
width: 100%;
height:4px;
background-color:#000;
position:absolute;
top:8px;
left:0;
}<a href="#" title="Open Menu" class="menu"></a>DEMO - 4
.menu {
width:30px;
height:14px;
position:relative;
display:inline-block;
border-top: 4px solid black;
border-bottom: 4px solid black;
}
.menu:after{
content: '';
width: 100%;
height:4px;
background-color:#000;
position:absolute;
top:5px;
left:0;
}<a href="#" title="Open Menu" class="menu"></a>DEMO - 5 (using background image)
.menu {
width: 30px;
height: 26px;
position: relative;
display: inline-block;
background-size: 10px 10px;
background-image: -webkit-linear-gradient(rgba(0, 0, 0, 1) 50%, transparent 50%, transparent);
background-image: -moz-linear-gradient(rgba(0, 0, 0, 1) 50%, transparent 50%, transparent);
background-image: linear-gradient(rgba(0, 0, 0, 1) 50%, transparent 50%, transparent);
}<a href="#" title="Open Menu" class="menu"></a>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
