Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
CSS Menu Concept #2 - #codepenchallenge

CSS Menu Concept #2 - #codepenchallenge

This is my second Menu Concept. I plan to make 5 Concepts and then I'm going to add them into a collection.

A Pen by IlyasR on CodePen.

License.

<div class="menu">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
//sorry, no Js here
@import url('https://fonts.googleapis.com/css?family=Josefin+Sans:300');
body {
background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/escheresque_ste.png');
}
.menu {
display: inline-block;
position: absolute;
width: 56px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 62px;
font-family:'Josefin Sans', sans-serif;
color: #fff;
cursor: pointer;
}
.menu::before,
.menu::after {
position: absolute;
transition: 0.4s ease;
opacity: 0;
pointer-events: none;
}
.menu:before {
content: "M \00a0 \00a0 \00a0 \00a0 \00a0U";
top: -60px;
left: -100%;
width: 215px;
}
.menu:after {
content: "N";
top: 50px;
left: 96%;
}
.menu:hover::before,
.menu:hover::after {
top: -4.3px;
opacity: 1;
transition: 0.2s ease, opacity 0.17s 0.03s ease-in;
}
.bar {
width: 80%;
height: 3px;
background: white;
margin: 0 auto 18px;
transition: transform 0.4s ease;
}
/*.menu:hover .bar {*/
/* transform: rotate(-10deg);*/
/*}*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.