<body>
<div class="over-menu"></div>
<div id="wrap">
<header class="header" id="header-sroll">
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="desk-menu">
<div class="logo">
<h1 class="logo-adn">
<a title="Davidson Silva - Desenvolvedor front-end em BH" href="https://www.davidsonsilva.com.br">
Davidson <span>Silva</span>
</a>
</h1>
</div>
<nav class="box-menu">
<div class="menu-container">
<div class="menu-head">
<a href="https://www.davidsonsilva.com.br" class="e1">
<img src="http://pic.youmobile.org/imgcloud/googlenewicon_app.png" alt="Davidson Silva">
</a>
</div>
<div class="menu-header-container">
<ul id="cd-primary-nav" class="menu">
<li class="menu-item menu-item-has-children">
<a href="#">Lorem Ipsum</a>
<ul class="sub-menu">
<li class="menu-item">
<a href="#">Lorem Ipsum</a>
</li>
<li class="menu-item">
<a href="#">Lorem Ipsum</a>
</li>
</ul>
</li>
<li class="menu-item menu-item-has-children">
<a href="#">Lorem Ipsum</a>
<ul class="sub-menu">
<li class="menu-item">
<a href="#">Lorem Ipsum</a>
</li>
<li class="menu-item">
<a href="h#">Lorem Ipsum</a>
</li>
</ul>
</li>
<li class="menu-item menu-item-has-children">
<a href="#">Lorem Ipsum</a>
<ul class="sub-menu">
<li class="menu-item menu-item-has-children">
<a href="#">Lorem Ipsum</a>
<ul class="sub-menu">
<li class="menu-item">
<a href="#">Lorem Ipsum</a>
</li>
<li class="menu-item">
<a href="#">Lorem Ipsum</a>
</li>
<li class="menu-item">
<a href="#">Lorem Ipsum</a>
</li>
<li class="menu-item">
<a href="#">Lorem Ipsum</a>
</li>
<li class="menu-item">
<a href="#">Lorem Ipsum</a>
</li>
</ul>
</li>
<li class="menu-item menu-item-has-children">
<a href="#">Lorem Ipsum</a>
<ul class="sub-menu">
<li class="menu-item">
<a href="#">Lorem Ipsum</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="menu-item menu-item-has-children">
<a href="#">Lorem Ipsum</a>
<ul class="sub-menu">
<li class="menu-item">
<a href="#">Lorem Ipsum</a>
</li>
<li class="menu-item">
<a href="#">Lorem Ipsum</a>
</li>
</ul>
</li>
<li class="contact menu-item ">
<a href="#">Lorem Ipsum</a>
</li>
<li class="line"></li>
</ul>
</div>
<div class="menu-foot">
<div class="social">
<a href="#" target="_blank"><i class="fab fa-facebook-f"></i></a>
<a href="#" target="_blank"><i class="fab fa-twitter"></i></a>
<a href="#" target="_blank"><i class="fab fa-youtube"></i></a>
<a href="#" target="_blank"><i class="fab fa-instagram"></i></a>
<a href="#" target="_blank"><i class="fab fa-google-plus-g"></i></a>
<a href="#" target="_blank"><i class="fab fa-linkedin-in"></i></a>
</div>
<hr/>
<address>
<span class="tel"><i class="fas fa-phone"></i> +55 31 3333-3333</span>
<span class="email"><i class="fas fa-envelope"></i> email@email.com</span>
<span class="end"><i class="fa-solid fa-location-dot"></i> Rua tal, 44, Lugar nenhum</span>
</address>
</div>
</div>
<div class="hamburger-menu">
<div class="bar"></div>
</div>
</nav>
</div>
</div>
</div>
</div>
</header>
<div class="conteudo">
<div class="container">
<div class="resize-message">
<span>Resize your browser<br/>
<i class="fas fa-arrows-alt-h"></i>
</span>
</div>
</div>
<div class="author">
<a href="https://www.davidsonsilva.com.br?utm_source=codepen" target="_blank">Davidson <span>Silva</span></a>
</div>
</div>
</div>
</body>// MIXINS AND VARIABLES
@mixin MQ($canvas) {
@media (max-width: $canvas) { @content; }
}
@mixin transition($args...) {
-webkit-transition: $args;
-moz-transition: $args;
-ms-transition: $args;
-o-transition: $args;
transition: $args;
}
@mixin transform($args...) {
-webkit-transform: $args;
-moz-transform: $args;
-ms-transform: $args;
-o-transform: $args;
transform: $args;
}
@mixin MQH($canvas) {
@media (max-height: $canvas) { @content; }
}
$black: #000;
$white: #FFF;
$red: #4285f4;
$read: #4e4e4e;
$red-dark: #4285f4;
body{
font-family: 'Ubuntu', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
color: $read;
@include transition(all .3s ease-in-out);
position: relative;
left: 0;
& > .over-menu{
@include transition(all .3s ease-in-out);
position: fixed;
height: 100%;
content: '';
width: 100%;
left: 0;
top: 0;
visibility: hidden;
opacity: 0;
background: rgba($black, .6);
z-index: 9;
}
&.open-menu{
left: -250px;
& > .over-menu{
visibility: visible;
opacity: 1;
}
.menu-container{
right: 0 !important;
}
}
}
// GENERAL SETTINGS
a{
text-decoration: none !important;
outline: none;
}
.hidden{
display: none;
}
section{
position: relative;
width: 100%;
float: left;
}
header{
@include transition(all .3s ease);
background-color: transparent;
width: 100%;
float: left;
position: fixed;
z-index: 10;
&::before{
@include transition(all .3s ease);
transform-origin: 0;
background: $white;
position: absolute;
width: 100%;
content: '';
top: 0;
right: 0;
height: 0;
}
.desk-menu{
position: relative;
width: 100%;
float: left;
.logo{
position: absolute;
float: left;
}
.logo-adn{
@include transition(all 0.3s ease-in-out);
margin: 20px 0 0;
position: relative;
display: table;
z-index: 1;
a{
@include transition(all 0.3s ease-in-out);
background-image: url('https://seeklogo.com/images/G/google-logo-28FA7991AF-seeklogo.com.png');
background-position: 0;
color: rgba($black, 0);
background-repeat: no-repeat;
background-size: contain;
display: block;
width: 40px;
height: 40px;
font-size: 0;
}
}
.box-menu{
@include transition(all 0.3s ease-in-out);
position: relative;
padding: 16px 0 0;
display: block;
margin: 0 auto;
float: right;
text-align: center;
}
.menu-container{
float: left;
.menu-head,
.menu-foot{
width: 100%;
float: left;
display: none;
}
.menu-head{
background: $red-dark;
padding: 16px 10px;
.e1{
padding: 3px 0;
float: left;
img{
width: 29px;
float: left;
height: 29px;
}
}
}
.menu-foot{
position: absolute;
bottom: 0;
padding: 15px 0;
.social{
display: table;
margin: 0 auto;
a{
@include transition(all 0.3s ease-in-out);
display: inline-block;
position: relative;
margin: 0 5px 0 0;
color: $white;
font-size: 13px;
text-align: center;
padding: 8px 0;
border-radius: 50%;
background: #797c82;
width: 29px;
height: 29px;
&:last-child{
margin: 0;
}
&:hover{
background: #a4a7ac;
}
}
}
hr{
margin: 15px auto 20px;
display: table;
width: calc(100% - 20px);
}
address{
position: relative;
text-align: left;
padding: 0 15px;
margin: 0;
i{
position: absolute;
left: 0;
top: 0;
}
span{
padding: 0 0 0 20px;
position: relative;
margin-bottom: 5px;
font-size: 12px;
display: block;
}
}
}
.menu{
float: left;
padding: 0;
margin: 0 20px 0 0;
list-style: none;
position: relative;
@include transition(all 0.3s ease-in-out);
li{
&.back{
display: none;
}
}
& > li{
@include transition(all .33s ease);
margin: 0 0 0 10px;
float: left;
cursor: pointer;
position: relative;
overflow: inherit;
a{
position: relative;
text-transform: uppercase;
font-family: 'Ubuntu', sans-serif;
font-size: 13.9px;
padding: 19px 8px;
display: block;
color: $read;
}
&.menu-item-has-children{
& > a{
padding: 19px 20px 19px 8px;
position: relative;
&::before,
&::after{
@include transition(all 0.3s ease-in-out);
background-color: $read;
position: absolute;
content: '';
height: 1px;
width: 7px;
top: 26px;
}
&::before{
@include transform(rotate(45deg));
right: 10px;
}
&::after{
@include transform(rotate(-45deg));
right: 6px;
}
}
.sub-menu{
box-shadow: 1px 2px 4px rgba(46,61,73,0.2);
@include transition(all .1s ease-in-out);
-webkit-overflow-scrolling: touch;
min-width: 200px;
position: absolute;
list-style: none;
background: $white;
padding: 0;
float: left;
display: table;
left: 0;
width: 100%;
float: left;
display: none;
li{
width: 100%;
@include transition(all .33s ease);
& > a{
color: $read;
padding: 12px;
}
.sub-menu{
display: none;
}
&.menu-item-has-children{
& > a{
&::before,
&::after{
@include transition(all 0.3s ease-in-out);
background-color: $read;
position: absolute;
content: '';
height: 1px;
width: 7px;
top: 24px;
}
&::before{
transform: rotate(45deg);
right: 6px;
top: 19px;
}
&::after{
transform: rotate(-45deg);
right: 6px;
top: 23px;
}
}
&:hover{
// background: lighten($black, 10%);
& > a{
display: block;
}
.sub-menu{
display: block;
}
}
}
&:hover{
& > a{
color: $red-dark;
background-color: #eeeff1;
&::before{
@include transform(rotate(142deg));
top: 23px;
}
&::after{
@include transform(rotate(42deg));
right: 11px;
}
}
}
}
.sub-menu{
left: 100%;
margin-top: -43px;
.menu-item-has-children{
}
}
}
a{
text-align: left;
&:hover{
margin-top: 0;
}
}
}
// LINHA HOVER
&.line {
@include transition(all 0.3s);
position: absolute;
bottom: 11px;
left: 0;
height: 0px;
pointer-events: none;
border: 1px solid $red-dark;
background: $red-dark;
-webkit-transition-timing-function: cubic-bezier(1, 0.01, 0, 1);
-webkit-transition-timing-function: cubic-bezier(1, 0.01, 0, 1.22);
transition-timing-function: cubic-bezier(1, 0.01, 0, 1.22);
opacity: 0;
display: block;
}
&:hover{
& > a{
color: $red-dark;
&::before{
@include transform(translateX(5px) rotate(-45deg));
width: 10px;
right: 12px;
}
&::after{
@include transform(rotate(45deg));
width: 10px;
right: 7px;
}
}
&.menu-item-has-children{
.sub-menu{
display: block;
}
}
}
}
}
}
}
.hamburger-menu {
display: none;
}
// SMALL
&.small{
// @include transition(all 0.3s ease-in-out);
&::before{
box-shadow: 0px 5px 25px 0 rgba(46,61,73,.2);
// @include transform(scaleY(1));
height: 100%;
}
.desk-menu{
.box-menu .cd-header-buttons{
// top: 19px;
}
.menu-container{
.menu{
& > li{
&.menu-item-has-children{
& > a{
&::before,
&::after{
background-color: $read;
}
}
}
}
}
}
.logo-adn{
margin-top: 14px;
a{
background-image: url('../img/empresa-1-logo.svg');
height: 30px;
width: 140px;
}
}
.box-menu{
padding: 0;
ul{
// margin: 10.5px 0;
li{
a{
color: $read;
}
}
}
}
}
}
@include MQ(991px) {
height: 60px;
// EFFECT RESPONSIVE MENU
// Parte do efeito de abertura do menu está no asrquivo _style.scss logo nas primeiras linhas
.hamburger-menu {
@include transition(all .3s ease);
display: block;
position: absolute;
top: 45px;
bottom: 0;
margin: auto;
width: 40px;
height: 40px;
cursor: pointer;
right: 0;
z-index: 11;
span{
text-transform: uppercase;
left: calc(-100% + -5px);
padding: 8px 9px 8px 0;
top: calc(50% - 18px);
position: absolute;
font-size: 13px;
color: $white;
}
.bar,
.bar::after,
.bar::before {
width: 35px;
height: 3px;
}
.bar {
position: relative;
@include transform(translateY(25px));
@include transition(all .1s ease);
background: $read;
top: -7px;
&::before,
&::after {
position: absolute;
background: $read;
content: '';
left: 0;
border-radius: 5px;
}
&::before {
bottom: 10px;
@include transition(bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1));
}
&::after {
top: 10px;
@include transition(top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1));
}
&.animate {
background: rgba($white, 0);
&::after {
top: 0;
@include transform(rotate(45deg));
@include transition(top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1));
}
&::before {
bottom: 0;
@include transform(rotate(-45deg));
@include transition(bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1));
}
}
}
}
// END EFFECT RESPONSIVE MENU
.desk-menu{
.box-menu{
ul{
li{
a{
color: $white !important;
border-bottom: 1px solid #eaeaea;
}
}
}
}
.menu-container{
@include transition(all .3s ease-in-out);
background: $white;
position: fixed;
height: 100%;
width: 250px;
right: -250px;
top: 0;
.menu-header-container{
position: relative;
float: left;
ul{
padding: 10px !important;
}
}
.menu{
margin: 0;
li{
&.back{
position: relative;
display: block;
a{
padding: 12px 12px 12px 35px !important;
&::before,
&::after{
background-color: $read;
position: absolute;
content: '';
height: 2px;
width: 7px;
top: 23px;
}
&::before{
@include transform(rotate(-45deg) !important);
top: 20px !important;
right: inherit !important;
left: 15px !important;
}
&::after{
@include transform(rotate(45deg) !important);
top: 24px !important;
left: 15px !important;
}
}
}
&.line{
display: none !important;
}
}
& > li{
width: 100%;
float: left;
margin: 0;
text-align: left;
a{
font-family: 'Ubuntu', sans-serif;
padding: 12px;
color: $read !important;
}
&.menu-item-has-children{
position: initial;
a{
padding: 12px;
&::before,
&::after {
background: $read;
}
&::before {
right: 6px !important;
top: 22px !important;
width: 7px !important;
}
&::after {
top: 26px !important;
width: 7px !important;
}
}
.sub-menu{
box-shadow: none;
@include transition(all .3s ease-in-out);
display: block !important;
background: $white;
z-index: 1;
top: 0;
left: 100%;
height: 100%;
.sub-menu{
margin-top: 0;
}
&.open-sub{
left: 0%;
}
li{
&.menu-item-has-children{
& > a{
&::before,
&::after{
background-color: $read;
}
&::before {
@include transform(rotate(45deg) !important);
right: 6px !important;
top: 22px !important;
width: 7px !important;
}
&::after {
@include transform(rotate(-45deg) !important);
right: 6px !important;
top: 26px !important;
width: 7px !important;
}
}
}
}
}
}
&:hover{
a{
&:before{
@include transform(rotate(45deg));
right: 6px;
top: 22px;
}
&::after{
@include transform(rotate(-45deg));
right: 6px;
top: 26px;
}
}
}
}
}
.menu-head{
display: block;
}
.menu-foot{
display: block;
}
}
}
&.small{
.hamburger-menu {
top: 31px;
span{
color: $read;
}
.bar {
background: $read;
&::before,
&::after{
background: $read;
}
&.animate {
background: rgba($white, 0);
}
}
}
}
}
@include MQ(767px) {
.desk-menu{
.menu-container{
.menu{
li{
a{
padding: 8px 12px;
}
&.back{
a{
padding: 8px 12px 8px 35px !important;
&::before{
top: 17px !important;
}
&::after {
top: 21px !important;
}
}
}
}
&>li{
&.menu-item-has-children{
a{
padding: 8px 12px;
&::before {
top: 18px;
}
&::after {
top: 22px;
}
}
.sub-menu{
li{
&>a{
padding: 8px 12px;
}
&.menu-item-has-children{
&>a{
&::before {
top: 18px;
}
&::after {
top: 22px;
}
}
}
}
}
}
}
}
}
}
}
@include MQ(481px) {
.desk-menu{
.logo-adn{
a{
width: 100px;
height: 30px;
}
}
}
.hamburger-menu{
top: 28px;
right: 0;
.bar,
.bar::after,
.bar::before{
width: 30px;
height: 3px;
}
.bar{
&::before{
bottom: 9px;
}
&::after{
top: 9px;
}
}
}
&.small{
.desk-menu{
.logo-adn{
a{
width: 100px;
height: 30px;
}
}
}
}
}
@include MQH(550px) {
.desk-menu{
.menu-container{
.menu-foot{
hr,
address{
display: none;
}
}
}
}
}
}
.resize-message{
margin: 40vh auto 0;
display: table;
}
.resize-message span{
text-transform: uppercase;
text-align: center;
display: block;
color: #666;
}
.resize-message span i{
font-size: 30px;
}
.author{
position: fixed;
bottom: 0;
z-index: 2;
width: 100%;
padding: 30px 15px 15px;
background: rgba(0,0,0,0);
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.54) 54%, rgba(0,0,0,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,0,0,0)), color-stop(54%, rgba(0,0,0,0.54)), color-stop(100%, rgba(0,0,0,1)));
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.54) 54%, rgba(0,0,0,1) 100%);
background: -o-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.54) 54%, rgba(0,0,0,1) 100%);
background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.54) 54%, rgba(0,0,0,1) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.54) 54%, rgba(0,0,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000', GradientType=0 );
a{
font-size: 16px;
display: table;
margin: 0 auto;
text-decoration: none;
color: $white;
font-weight: 700;
span{
color: $red;
}
}
}(function($) {
var size;
//SMALLER HEADER WHEN SCROLL PAGE
function smallerMenu() {
var sc = $(window).scrollTop();
if (sc > 40) {
$('#header-sroll').addClass('small');
}else {
$('#header-sroll').removeClass('small');
}
}
// VERIFY WINDOW SIZE
function windowSize() {
size = $(document).width();
if (size >= 991) {
$('body').removeClass('open-menu');
$('.hamburger-menu .bar').removeClass('animate');
}
};
// ESC BUTTON ACTION
$(document).keyup(function(e) {
if (e.keyCode == 27) {
$('.bar').removeClass('animate');
$('body').removeClass('open-menu');
$('header .desk-menu .menu-container .menu .menu-item-has-children a ul').each(function( index ) {
$(this).removeClass('open-sub');
});
}
});
$('#cd-primary-nav > li').hover(function() {
$whidt_item = $(this).width();
$whidt_item = $whidt_item-8;
$prevEl = $(this).prev('li');
$preWidth = $(this).prev('li').width();
var pos = $(this).position();
pos = pos.left+4;
$('header .desk-menu .menu-container .menu>li.line').css({
width: $whidt_item,
left: pos,
opacity: 1
});
});
// ANIMATE HAMBURGER MENU
$('.hamburger-menu').on('click', function() {
$('.hamburger-menu .bar').toggleClass('animate');
if($('body').hasClass('open-menu')){
$('body').removeClass('open-menu');
}else{
$('body').toggleClass('open-menu');
}
});
$('header .desk-menu .menu-container .menu .menu-item-has-children ul').each(function(index) {
$(this).append('<li class="back"><a href="#">Back</a></li>');
});
// RESPONSIVE MENU NAVIGATION
$('header .desk-menu .menu-container .menu .menu-item-has-children > a').on('click', function(e) {
e.preventDefault();
if(size <= 991){
$(this).next('ul').addClass('open-sub');
}
});
// CLICK FUNCTION BACK MENU RESPONSIVE
$('header .desk-menu .menu-container .menu .menu-item-has-children ul .back').on('click', function(e) {
e.preventDefault();
$(this).parent('ul').removeClass('open-sub');
});
$('body .over-menu').on('click', function() {
$('body').removeClass('open-menu');
$('.bar').removeClass('animate');
});
$(document).ready(function(){
windowSize();
});
$(window).scroll(function(){
smallerMenu();
});
$(window).resize(function(){
windowSize();
});
})(jQuery);