<div id="app"></div>
@import 'https://fonts.googleapis.com/css?family=Share+Tech+Mono';
@import 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css';
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 100vw;
min-height: 100vh;
background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1376484/jess-harding-lqT6NAmTaiY-unsplash.jpg'),radial-gradient(#28a3dd, #0d7751);
background-size: cover;
background-position: center;
font-family: "Share Tech Mono", monospace;
background-blend-mode: multiply,screen, overlay;
color: #fff;
}
button {
display: block;
width: 28px;
height: 30px;
margin: 30px auto 10px;
background: transparent;
border: none;
}
button span:after,
button span:before {
content: "";
position: absolute;
left: 0;
top: -9px;
}
button span:after{
top: 9px;
}
button span {
position: relative;
display: block;
}
button span,
button span:after,
button span:before {
width: 100%;
height: 5px;
background-color: #c6d510;
transition: all 0.3s;
backface-visibility: hidden;
border-radius: 2px;
}
/* on activation */
button.on span {
background-color: transparent;
}
button.on span:before {
transform: rotate(45deg) translate(5px, 5px);
}
button.on span:after {
transform: rotate(-45deg) translate(7px, -8px);
}
button.on + #menu {
opacity: 1;
visibility: visible;
}
/* menu appearance*/
#menu {
position: relative;
color: #999;
min-width: 20vw;
max-width: 50vw;
padding: 10px;
margin: auto;
font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;
text-align: center;
border-radius: 4px;
background: white;
box-shadow: 0 1px 8px rgba(0,0,0,0.05);
/* just for this demo */
opacity: 0;
visibility: hidden;
transition: opacity .4s;
}
#menu:after {
position: absolute;
top: -15px;
left: 50%;
content: "";
transform: translate(-50%, 0);
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 20px solid white;
}
ul, li, li a {
list-style: none;
display: block;
margin: 0;
padding: 0;
}
li a {
padding:10px 15px;
color: #888;
text-decoration: none;
transition: all .2s;
}
li a:hover,
li a:focus {
background: #1ABC9C;
color: #fff;
}
View Compiled
const Drawer = () => {
const [expanded, setExpanded] = React.useState(false)
const HandlerClick = () => {
setExpanded(!expanded)
}
const renderDrawer = () =>{
const menuData = ['CSS', 'HTML5', 'JavaScript', 'React', 'Vue']
return (
<ul id="menu">
{menuData.map((menu) => <li><a href="#">{menu}</a></li>)}
</ul>
);
}
return (
<div>
<button onClick={HandlerClick} className={expanded ? 'on' : ''}><span></span></button>
{
(() => {
if (expanded) {
return renderDrawer();
}
})()
}
</div>
)
}
ReactDOM.render(<Drawer />, document.querySelector('#app'))
View Compiled
This Pen doesn't use any external CSS resources.