<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Love Style Header Menu Effect</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<header>
<div class="nav-modal">
<div class="blob"></div>
<nav>
<ul>
<li>
<a href="#" class="nounderline"><span class="space-bet-elements">01</span>HOME</a>
</li>
<li>
<a href="#" class="nounderline"><span class="space-bet-elements">02</span>ABOUT US</a>
</li>
<li>
<a href="#" class="nounderline"><span class="space-bet-elements">03</span>SERVICES</a>
</li>
<li>
<a href="#" class="nounderline"><span class="space-bet-elements">04</span>PORTFOLIO</a>
</li>
<li>
<a href="#" class="nounderline"><span class="space-bet-elements">05</span>CONTACT US</a>
</li>
</ul>
</nav>
</div>
<div class="head">
<div class="tile burger">
<div class="meat">
<div class="line one"></div>
<div class="line two"></div>
<div class="line three"></div>
</div>
<div>
<span class="white-text">MENÚ</span>
</div>
</div>
</div>
<div class="languaje-container">
ES
</div>
</header>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
body{
padding: 0;
margin: 0;
background-color: #777;
background-image: url('http://s2.best-wallpaper.net/wallpaper/3840x2160/1702/Croatia-resort-hotel-lights-pool-night_3840x2160.jpg');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
}
header *{
box-sizing: border-box;
margin: 0;
padding: 0;
}
header{
height: 120px;
width: 100%;
position: relative;
}
.timlogo{
width: 200px;
display: block;
margin: 0 auto;
padding-top: 15px;
}
.head{
position: absolute;
top: 35px;
}
.head .tile{
display: inline-block;
height: 50px;
width: 50px;
margin-left: 5px;
transition: all .3s ease-in;
-webkit-transition: all .3s ease-in;
}
.head .tile.socialmedia{
color: #0b253e;
font-size: 50px;
text-align: center;
line-height: 50px;
position: relative;
top: -6px;
}
header.clicked .head .tile.socialmedia{
color: white;
}
.head .burger{
margin-left: 25px;
padding: 5px;
cursor: pointer;
background-color: transparent;
}
.meat{
height: 40px;
width: 40px;
position: relative;
transition: all .3s ease-in;
-webkit-transition: all .3s ease-in;
}
header.clicked .head .burger .meat{
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
}
.meat .line{
height: 4px;
width: 40px;
background-color: #ffffff;
border-radius: 3px;
position: absolute;
transition: all .3s ease-in;
-webkit-transition: all .3s ease-in;
}
.meat .line.one{top: 5px; left: 0px;}
.meat .line.two{top: 18px; left: 0px;}
.meat .line.three{top: 31px; left: 0px;}
header.clicked .burger .line{
background-color: white;
}
header.clicked .burger .line.one{
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
top: 18px;
}
header.clicked .burger .line.two{
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
top: 18px;
}
header.clicked .burger .line.three{
opacity: 0;
}
header.clicked .burger:hover .meat{
transform: rotate(270deg);
-webkit-transform: rotate(270deg);
}
.nav-modal{
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100vh;
visibility: hidden;
opacity: 0;
transition: all .3s ease-in;
-webkit-transition: all .3s ease-in;
pointer-events: none;
}
header.clicked .nav-modal{
visibility: visible;
opacity: 1;
pointer-events: initial;
}
.nav-modal .blob{
display: block;
width: 10px;
height: 10px;
border-radius: 100%;
margin: 0 auto;
background-color: #000000;
position: relative;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transition: all .3s ease-in;
opacity: 0.7;
}
header.clicked .nav-modal .blob{
width: 100vw;
height: 100vh;
border-radius: 0px;
}
nav{
position: fixed;
left: 45%;
top: 30%;
color: white;
}
nav a{
color: white;
text-decoration: none;
font-family: sans-serif;
font-family: 'Oswald', sans-serif;
font-size: 30px;
}
nav ul li{
list-style: none;
text-align: left;
padding-bottom: 10px;
padding-right: 10px;
position: relative;
}
nav{
opacity: 0;
transition: all .3s ease-in;
-webkit-transition: all .3s ease-in;
-webkit-transition-delay: .3s;
-moz-transition-delay: .3s;
-o-transition-delay: .3s;
transition-delay: .3s;
}
header.clicked nav{
opacity: 1;
}
nav ul li ul{
position: absolute;
right: -300px;
top: -4px;
display: none;
}
nav ul li ul li{
border: none;
padding-bottom: 10;
padding-left: 10px;
height: 50px;
width: 300px;
}
nav ul li ul li a{
display: block;
height: 50px;
font-size: 20px;
text-align: left;
padding: 10px;
}
nav ul li.selected ul{
display: block;
}
nav ul li.notselected a{
opacity: .5;
}
nav ul li.selected ul li a{
opacity: 1;
}
.white-text{
color: #FFFFFF;
}
.space-bet-elements{
margin-right: 40px;
}
a.nounderline:link
{
text-decoration:none;
}
a:hover{
color:#ff0000;
}
.languaje-container{
position: absolute;
height: 60px;
width: 60px;
background-color: white;
z-index: 100;
top: 0;
right: 0;
text-align: center;
line-height: 60px;
}
@media screen and (max-width:820px){
.timlogo{margin-left: 50px;}
}
@media screen and (max-width:580px){
.timlogo{width: 130px; padding-top: 30px;}
nav ul li a{
font-size: 16px;
}
nav ul li ul{
top: -9px;
}
nav ul li ul li{
height: 40px;
}
nav ul li ul li a{
font-size: 16px;
height: 40px;
}
}
@media screen and (max-width:500px){
.timlogo{display: none;}
}
@media screen and (max-width:320px){
header .head .tile.socialmedia{
display: none;
}
}
//This simple script handles the header nav menu modal
//also covered nav sub menu selection
//Dependencies: jQuery
$(document).ready(function() {
$('.burger').click(function(){
$('header').toggleClass('clicked');
});
$('nav ul li').click(function(){
$('nav ul li').removeClass('selected');
$('nav ul li').addClass('notselected');
$(this).toggleClass('selected');
$(this).removeClass('notselected');
});
});
