Creating a hamburger menu with shortening lines - html

Question

Need to make a hamburger item with each line shorter than the last.
E.g.
------
-----
----
My idea is just to have a div with 3 spans inside it.
<label for="menu_collapse_icon" class="menu_collapse_icon_label">
<span class="menu_bar"></span>
<span class="menu_bar"></span>
<span class="menu_bar"></span>
</label>
And then in the CSS do e.g:
.menu_collapse_icon {
FOR EACH SPAN, REDUCE ITS LENGTH BY X AMOUNT?
}
But I don't know how to do this? I could just create 3 separate length bars, but would rather do it this way.

Answer 1

Add each element inside each other to create cascade:
.menu_bar {
padding-top: 10px;
width: 80%;
display: inline-block;
border-top: 1px solid #454545;
box-sizing: border-box;
}
.menu_collapse_icon_label {
width: 40px;
display: inline-block;
text-align: right;
font-size: 0;
border: 1px solid #ddd;
border-radius: 3px;
padding: 10px 10px 0 0;
}
<label for="menu_collapse_icon" class="menu_collapse_icon_label">
<div class="menu_bar">
<div class="menu_bar">
<div class="menu_bar"></div>
</div>
</div>
</label>

Answer 2

With the markup that you plan to have, this is not possible with a single selector. And am sure you will find many examples if you search.
However, am presenting this just for the sake of getting it done with a single selector. You will need nested elements for this.
label {
display: block; text-align: right;
border: 1px solid #bbb;
width: 32px; height: 32px;
padding: 4px 8px 4px 0px;
}
label span {
display: block; float: right; position: relative;
width: 75%; right: 0px; top: 8px;
border-bottom: 2px solid #999;
}
label > span { margin-top: -4px; }
<label for="menu_collapse_icon" class="menu_collapse_icon_label">
<span class="menu_bar">
<span class="menu_bar">
<span class="menu_bar"></span>
</span>
</span>
</label>

Answer 3

I suppose you could do something like below. You could probably make it responsive if you use percentages for i and the pseudo elements.
label {
display: block;
border: 1px solid #ccc;
width: 48px;
height: 48px;
position: relative;
}
i {
display: block;
background: #999;
height: 2px;
width: 50%;
position: absolute;
top: 50%;
margin-top: -1px;
right: 4px;
}
i::before, i::after {
right: 0;
position: absolute;
height: 2px;
background: #999;
content: "";
}
i::before {
width: 120%;
top: -8px;
}
i::after {
width: 80%;
bottom: -8px;
}
<label for="menu_collapse_icon" class="menu_collapse_icon_label">
<i class="menu-icon"></i>
</label>
However, I discourage it. You'd be better of creating an (SVG) icon that looks like this, and use it inline.
I managed to make it responsive, as a quick bit of fun. However, I do encourage you to look into icons. Here's the link to the responsive show case.
Important CSS:
i {
display: block;
background: #999;
height: 4%;
width: 50%;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 12%;
}
i::before, i::after {
right: 0;
position: absolute;
height: 100%;
background: #999;
content: "";
}
i::before {
width: 125%;
top: -400%;
}
i::after {
width: 75%;
bottom: -400%;
}