Commit 0f94f8a0 authored by simon's avatar simon
Browse files

Add mobile menu initial implementation

parent ffbea1b2
// body {
// background-color: #f9f9f9;
// margin: 0;
// padding: 0;
// }
a {
text-decoration: none;
color: #1e1e23;
opacity: 1;
font-family: "work sans", sans serif;
font-size: 1.5em;
font-weight: 400;
transition: 200ms;
}
a:hover {
opacity: 0.5;
}
ul {
padding: 0;
list-style-type: none;
}
.container {
margin-top: 50px;
display: flex;
justify-content: center;
align-items: center;
}
.phone {
background-color: #36383f;
border-radius: 40px;
width: 300px;
height: 600px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 30px 50px 100px #85888c;
}
.content {
border: 1px solid #36383f;
border-radius: 20px;
width: 94%;
height: 91%;
background-color: #f5f6fa;
overflow: hidden;
}
nav {
background-color: #1e1e23;
height: 65px;
}
#menuToggle {
display: flex;
flex-direction: column;
position: relative;
top: 25px;
left: 25px;
z-index: 1;
-webkit-user-select: none;
user-select: none;
}
#menuToggle input {
display: flex;
width: 40px;
height: 32px;
position: absolute;
cursor: pointer;
opacity: 0;
z-index: 2;
}
#menuToggle span {
display: flex;
width: 29px;
height: 2px;
margin-bottom: 5px;
position: relative;
background: #ffffff;
border-radius: 3px;
z-index: 1;
transform-origin: 5px 0px;
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1),
background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease;
}
#menuToggle span:first-child {
transform-origin: 0% 0%;
}
#menuToggle span:nth-last-child(2) {
transform-origin: 0% 100%;
}
#menuToggle input:checked ~ span {
opacity: 1;
transform: rotate(45deg) translate(-3px, -1px);
background: #36383f;
}
#menuToggle input:checked ~ span:nth-last-child(3) {
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}
#menuToggle input:checked ~ span:nth-last-child(2) {
transform: rotate(-45deg) translate(0, -1px);
}
#menu {
position: absolute;
width: 180px;
height: 400px;
box-shadow: 0 0 10px #85888c;
margin: -50px 0 0 -50px;
padding: 50px;
padding-top: 125px;
background-color: #f5f6fa;
-webkit-font-smoothing: antialiased;
transform-origin: 0% 0%;
transform: translate(-100%, 0);
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
}
#menu li {
padding: 10px 0;
transition-delay: 2s;
}
#menuToggle input:checked ~ ul {
transform: none;
}
@import "variables";
@import "mixin";
@import "fonts";
@import "mobile-menu": root {
// @import "mobile-menu";
:root {
font-size: 100%;
font-family: $text;
}
......
<div class="mobile-menu">
<div class="container">
<div class="phone">
<div class="content">
<nav role="navigation">
<div id="menuToggle">
<input type="checkbox" />
<span></span>
<span></span>
<span></span>
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Info</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</body>
</html>
......@@ -11,7 +11,7 @@
</head>
<body id="normal-body">
<%= render "mobile-menu" %>
<%#= render "mobile-menu" %>
<header id="normal-header">
<div class="container">
<form action="#">
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment