menu 1
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Menu</title>
<link rel="stylesheet" type="text/css"href="Style.css" />
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans&display=swap" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
<div class="menu-container">
<div class="bg-image">
<div class="menu-line">
<div></div>
</div>
</div>
<p>FAREZ</p>
<ul>
<li><a href="#"><i class="fas fa-home"></i>MENU</a> </li>
<li><a href="#"> <i class="far fa-question-circle"></i>ACERCA DE</a> </li>
<li> <a href="#"> <i class="fas fa-sliders-h"></i>SERVICIOS</a> </li>
<li><a href="#"> <i class="fas fa-pen"></i>Blogs</a> </li>
<li> <a href="#"> <i class="far fa-file"></i>Resume</a> </li>
<li><a href="#"> <i class="far fa-envelope"></i>Contacto</a> </li>
<li><a href="#"> <i class="fas fa-search-location"></i>Ubicación</a> </li>
</ul>
</div>
<div class="main_sec">
<p class="logo">FAREZ</p>
<div class="shadow">
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('.menu-line').click(function(){
$('.menu-container').toggleClass('active');
$('.menu-line').toggleClass('line');
$('.menu-line').toggleClass('opacity');
$('.shadow').toggleClass('shadow_opac');
})
});
</script>
</body>
<style>
*{
margin:0;
padding:0;
font-family: 'Josefin Sans', sans-serif;
}
.main_sec {
position:relative;
width:100%;
z-index:1;
height:100vh;
background-image:url("https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg");
background-position:center;
background-repeat:no-repeat;
background-size:cover;
}
.main_sec .logo{
position:absolute;
text-transform:uppercase;
color:white;
font-size:1.5em;
font-weight:700;
right:20px;
top:20px;
}
.shadow{
position:absolute;
width:100%;
height:100vh;
top:0;
left:0;
background-color:rgba(0,0,0,0.7);
transition:all 0.5s ease-in-out;
opacity:0;
z-index:3;
}
.shadow_opac {
opacity:1;
}
.menu-container {
position:absolute;
width:70%;
height:100%;
left:-70%;
top:0;
z-index:10;
background:#fff;
transition:all 0.5s ease;
}
.active {
left:0;
}
.menu-container .bg-image{
position:relative;
width:100%;
height:60px;
background-color:#0984e3;
box-shadow: 0 3px 4px -1px rgba(0,0,0,0.25);
}
.menu-container p{
position:absolute;
left:18px;
top:20px;
text-transform:uppercase;
font-size:1.5em;
font-weight:700;
color:#fff;
}
.menu-line {
width:40px;
height:40px;
position:relative;
top:10px;
left:110%;
z-index:999;
transition:0.5s ease;
}
.line {
left:73%;
}
.menu-line div {
position:absolute;
width:30px;
height:5px;
background:#fff;
left:50%;
top:50%;
transform:translate(-50%,-50%);
border-radius:3px;
transition:0.5s ease;
}
.menu-line.opacity div {
background:transparent;
}
.menu-line.opacity div:before{
top:0;
transform:rotate(45deg);
}
.menu-line.opacity div:after{
top:0;
transform:rotate(-45deg);
}
.menu-line div:before,.menu-line div:after {
content:" ";
position:absolute;
width:30px;
height:5px;
background:#fff;
left:50%;
border-radius:3px;
transform:translateX(-50%);
transition:0.5s ease;
}
.menu-line div:before{
top:-10px;
}
.menu-line div:after{
top:10px;
}
.menu-container ul li a {
position:relative;
width:100%;
line-height:50px;
margin-left:20px;
text-decoration:none;
font-size:14px;
color:#000;
transition:all 0.5s ease;
}
.menu-container ul li a i {
margin-right:30px;
font-size:16px;
color:#828282;
}
.menu-container ul li:first-child{
margin-top:10px;
}
.menu-container ul li:nth-child(6){
margin-top:10px;
border-top:1px solid #aaa;
padding-top:10px;
}
.menu-container ul li:hover a{
margin-left:40px;
}
</style>
</html>