My problem is that , when i open the hamburger menu and click on a navigation link, it does take me to the anchor link section but overlay nav menu doesnot close !
i did tried to make a close css class and toggle class to the jquery nav but it also doesnot work.
My HTML codes are:
$(document).ready(function() {
$('#toggle').click(function() {
$(this).toggleClass('active');
$('#fullnav').toggleClass('open');
});
});
$(document).ready(function() {
$('.hamburger-menu').click(function() {
$(this).toggleClass('change');
})
});
.fullnav {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #333333;
z-index: 100;
visibility: hidden;
-webkit-transition: opacity .35s, visibility .35s, height .35s;
transition: opacity .35s, visibility .35s, height .35s;
overflow: hidden;
}
.hamburger-menu {
width: 45px;
height: 35px;
position: fixed;
top: 40px;
right: 50px;
display: flex;
flex-direction: column;
justify-content: space-between;
cursor: pointer;
z-index: 500;
}
.line {
width: inherit;
height: 5px;
background-color: #7A7A7A;
border-radius: 25px;
transform-origin: right;
transition: transform .5s;
}
.line-2 {
height: 3px;
}
.change .line-1 {
transform: translate(-4px, -4px) rotateZ(-45deg);
}
.change .line-2 {
opacity: 0;
}
.change .line-3 {
transform: translate(-4px, -3px) rotateZ(45deg);
}
.fullnav.open {
opacity: 1;
visibility: visible;
height: 100%;
}
.fullnav.close {
opacity: 0;
visibility: visible;
height: 0%;
}
.fullnav.open li {
-webkit-animation: fadeInRight .5s ease forwards;
animation: fadeInRight .5s ease forwards;
-webkit-animation-delay: .35s;
animation-delay: .35s;
}
.fullnav.open li:nth-of-type(2) {
-webkit-animation-delay: .4s;
animation-delay: .4s;
}
.fullnav.open li:nth-of-type(3) {
-webkit-animation-delay: .45s;
animation-delay: .45s;
}
.fullnav.open li:nth-of-type(4) {
-webkit-animation-delay: .50s;
animation-delay: .50s;
}
.fullnav nav {
display: flex;
align-items: center;
justify-content: center;
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
font-size: 3rem;
font-family: Montserrat-Light;
font-weight: 400;
line-height: 7rem;
text-align: center;
}
.fullnav ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
position: relative;
height: 100%;
}
.fullnav ul li {
display: block;
height: 25%;
height: calc(100% / 4);
min-height: 50px;
position: relative;
opacity: 1;
}
.fullnav ul li a {
display: block;
position: relative;
color: #FFF;
text-decoration: none;
overflow: hidden;
}
.fullnav ul li a:hover:after,
.fullnav ul li a:focus:after,
.fullnav ul li a:active:after {
width: 100%;
}
.fullnav ul li a:hover::before,
.fullnav ul li a:focus::before,
.fullnav ul li a:active::before {
width: 100%;
}
.fullnav ul li a:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
height: 3px;
background: #FFF;
-webkit-transition: .35s;
transition: .35s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav-wrapper">
<div class="hamburger-menu" id="toggle">
<div class="line line-1"></div>
<div class="line line-2"></div>
<div class="line line-3"></div>
</div>
<div class="fullnav" id="fullnav">
<nav class="fullnavMenu" id="fullnavMenu">
<ul>
<li>About</li>
<li>Skills</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
This code on closeing the overlay nav menus is not working. plz help me fix it:
$(document).ready(function () {
$('fullnav').hide();
});
Bind a click event handler to the links. Within this even handler, remove the classes that define the open state of the menu.
$("#toggle").click(function() {
$(this).toggleClass("active");
$("#fullnav").toggleClass("open");
});
$(".hamburger-menu").click(function() {
$(this).toggleClass("change");
});
$("#fullnavMenu a").on("click", function() {
$(".hamburger-menu").removeClass("change");
$("#toggle").removeClass("active");
$("#fullnav").removeClass("open");
});
.fullnav {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #333333;
z-index: 100;
visibility: hidden;
-webkit-transition: opacity .35s, visibility .35s, height .35s;
transition: opacity .35s, visibility .35s, height .35s;
overflow: hidden;
}
.hamburger-menu {
width: 45px;
height: 35px;
position: fixed;
top: 40px;
right: 50px;
display: flex;
flex-direction: column;
justify-content: space-between;
cursor: pointer;
z-index: 500;
}
.line {
width: inherit;
height: 5px;
background-color: #7A7A7A;
border-radius: 25px;
transform-origin: right;
transition: transform .5s;
}
.line-2 {
height: 3px;
}
.change .line-1 {
transform: translate(-4px, -4px) rotateZ(-45deg);
}
.change .line-2 {
opacity: 0;
}
.change .line-3 {
transform: translate(-4px, -3px) rotateZ(45deg);
}
.fullnav.open {
opacity: 1;
visibility: visible;
height: 100%;
}
.fullnav.close {
opacity: 0;
visibility: visible;
height: 0%;
}
.fullnav.open li {
-webkit-animation: fadeInRight .5s ease forwards;
animation: fadeInRight .5s ease forwards;
-webkit-animation-delay: .35s;
animation-delay: .35s;
}
.fullnav.open li:nth-of-type(2) {
-webkit-animation-delay: .4s;
animation-delay: .4s;
}
.fullnav.open li:nth-of-type(3) {
-webkit-animation-delay: .45s;
animation-delay: .45s;
}
.fullnav.open li:nth-of-type(4) {
-webkit-animation-delay: .50s;
animation-delay: .50s;
}
.fullnav nav {
display: flex;
align-items: center;
justify-content: center;
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
font-size: 3rem;
font-family: Montserrat-Light;
font-weight: 400;
line-height: 7rem;
text-align: center;
}
.fullnav ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
position: relative;
height: 100%;
}
.fullnav ul li {
display: block;
height: 25%;
height: calc(100% / 4);
min-height: 50px;
position: relative;
opacity: 1;
}
.fullnav ul li a {
display: block;
position: relative;
color: #FFF;
text-decoration: none;
overflow: hidden;
}
.fullnav ul li a:hover:after,
.fullnav ul li a:focus:after,
.fullnav ul li a:active:after {
width: 100%;
}
.fullnav ul li a:hover::before,
.fullnav ul li a:focus::before,
.fullnav ul li a:active::before {
width: 100%;
}
.fullnav ul li a:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
height: 3px;
background: #FFF;
-webkit-transition: .35s;
transition: .35s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav-wrapper">
<div class="hamburger-menu" id="toggle">
<div class="line line-1"></div>
<div class="line line-2"></div>
<div class="line line-3"></div>
</div>
<div class="fullnav" id="fullnav">
<nav class="fullnavMenu" id="fullnavMenu">
<ul>
<li>About</li>
<li>Skills</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</nav>
</div>
Related
Below is the code I've got set up for my responsive menu. On the hamburger menu, I have some Javascript set so that the menu will close after clicking on one of the links inside of it.
Javascript:
var elements = document.getElementsByTagName('li');
var closeHamp = function() {
document.getElementsByClassName('cp_menuicon')[0].click();
};
for (var i = 0; i < elements.length; i++) {
elements[i].addEventListener('click', closeHamp, false);
}
What I'd like to do is also have the hamburger menu close when navigating between pages using the forward or backward arrow on a web browser. I've played around with a few bits of Javascript but haven't been able to achieve the result I'm looking for. If anyone knows how I could close the hamburger menu when navigating between pages I'd appreciate you sharing your knowledge with me. Thank you.
Menu:
<div class="cp_cont">
<input id="cp_toggle03" type="checkbox">
<div class="cp_mobilebar">
<label for="cp_toggle03" class="cp_menuicon">
<span></span>
</label>
</div>
<label id="h-menu_black" class="cp_toggle03" for="cp_menuicon"></label>
<div id="body" class="noscroll"></div>
<header class="cp_offcm03">
<nav>
<ul style="text-align: center; margin-left: 210px; overflow: hidden;">
<li style="border-bottom: 1px solid lightgray;">Home</li>
<li style="border-bottom: 1px solid lightgray;">Blog</li>
<li style="border-bottom: 1px solid lightgray;">About This Website</li>
<li style="border-bottom: 1px solid lightgray;">Bibliography</li>
CSS:
.body {background-color: white;
font-family: sans-serif;
}
.searchbar {float: right;
}
.image {text-align: center;
}
.setsumei {margin-left: 20px;
margin-right: 20px;
}
.footer {width: 100%;
height: 40px;
text-align: center;
border-top: 1px solid black;
position: absolute;
bottom: 0;
padding: 10px;
}
.page-wrap {min-height: 100%;
margin-bottom: -40px;
}
.page-wrap:after {content: "";
display: block;
}
.site-footer,
.page-wrap:after {height: 20px;
}
.site-footer {text-align: center;
border-top: 1px solid black;
padding: 10px;
}
*,
*:before,
*:after {padding-left: 0;
margin: 0;
box-sizing: border-box;
}
ol,
ul {list-style: none;
}
a {text-decoration: none;
color: black;
}
.cp_cont {height: auto;
}
/* menu */
.cp_offcm03 {position: relative;
z-index: 5000;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
width: 100%;
height: auto;
padding-top: 0;
-webkit-transition: transform 0.3s ease-in;
transition: transform 0.3s ease-in;
text-align: center;
color: black;
background-color: white;
}
.cp_offcm03 nav,
.cp_offcm03 ul {height: 100%;
}
.cp_offcm03 li {display: inline-block;
margin-right: -6px;
}
.cp_offcm03 a {display: block;
padding: 15px 45px;
margin-bottom: -5px;
-webkit-transition: background-color .3s ease-in;
transition: background-color .3s ease-in;
}
.cp_offcm03 a:hover {background-color: lightgray;
}
/* menu toggle */
#cp_toggle03 {display: none;
}
#cp_toggle03:checked~.cp_offcm03 {-webkit-transform: translateX(0);
transform: translateX(0);
}
#cp_toggle03:checked~.cp_container {-webkit-transform: translateX(0);
transform: translateX(0);
}
.cp_mobilebar {display: none;
}
/* content */
.cp_container {position: relative;
top: 0;
padding: 35px auto;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_content {margin: 0 auto;
padding: 20px;
height: 65vh;
text-align: center;
}
#media (max-width: 1130px)and (min-width: 280px) {
/* menu */
.cp_offcm03 {position: fixed;
left: -250px;
overflow-y: hidden;
width: 250px;
height: 100%;
padding-top: 40px;
color: black;
background-color: white;
z-index: 1000;
}
.cp_offcm03 nav {background: white;
border-right: 0.5px solid lightgray;
margin-left: -210px;
}
.cp_offcm03 li {display: block;
margin-right: 0;
}
.cp_offcm03 a {padding: 20px;
}
/* menu toggle */
.cp_mobilebar {display: block;
z-index: 2000;
position: relative;
top: 0;
left: 0;
padding: 0 25px;
width: 100%;
height: 40px;
background-color: white;
border-bottom: .05px solid lightgray;
}
.cp_menuicon {display: block;
position: relative;
width: 25px;
height: 100%;
cursor: pointer;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon>span {display: block;
position: absolute;
top: 55%;
margin-top: -0.3em;
width: 100%;
height: 0.2em;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease;
transition: transform .3s ease;
}
.cp_menuicon>span:before,
.cp_menuicon>span:after {content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon>span:before {-webkit-transform: translateY(-0.6em);
transform: translateY(-0.6em);
}
.cp_menuicon>span:after {-webkit-transform: translateY(0.6em);
transform: translateY(0.6em);
}
#cp_toggle03:checked+.cp_mobilebar .cp_menuicon {-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#cp_toggle03:checked+.cp_mobilebar span:before,
#cp_toggle03:checked+.cp_mobilebar span:after {-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
#cp_toggle03:checked~.cp_offcm03 {-webkit-transform: translateX(100%);
transform: translateX(100%);
}
#cp_toggle03:checked~.cp_container {-webkit-transform: translateX(250px);
transform: translateX(250px);
}
input:checked~#h-menu_black {display: block;
opacity: .6;
}
#h-menu_black {display: none;
position: fixed;
z-index: 999;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0;
transition: .7s ease-in-out;
}
/* content */
.cp_container {top: 60px;
height: 92vh;
text-align: center;
}
.noscroll {overflow: hidden;
position: fixed;
}
}
I have a hamburger menu that's made with pure CSS. It works well, but I'd like to be able to have it closed after clicking on one of the links inside it.
<div class="cp_cont">
<input id="cp_toggle03" type="checkbox">
<div class="cp_mobilebar">
<label for="cp_toggle03" class="cp_menuicon">
<span></span>
</label>
</div>
<label id="h-menu_black" class="cp_toggle03" for="cp_menuicon"></label>
<div id="body" class="noscroll"></div>
<header class="cp_offcm03">
<nav>
<ul style="text-align: center; margin-left: 210px; overflow: hidden;">
<li style="border-bottom: 1px solid lightgray;">Home</li>
<li style="border-bottom: 1px solid lightgray;">Blog</li>
<li style="border-bottom: 1px solid lightgray;">About This Website</li>
<li style="border-bottom: 1px solid lightgray;">Bibliography</li>
I've tried to add a closeNav(); function, but haven't been able to get it working. I’d like it so that if I were to go back to a page where the hamburger menu had been opened and used to navigate to another page then it would be closed. If anyone knows how I could close the menu when clicking on a link inside of it I'd appreciate you sharing your knowledge with me. Thank you.
This is my CSS.
.body{background-color: white;
font-family: sans-serif;}
.searchbar{float: right;}
.image{text-align: center;}
.setsumei{margin-left: 20px;
margin-right: 20px;}
.footer{width: 100%;
height: 40px;
text-align: center;
border-top: 1px solid black;
position: absolute;
bottom: 0;
padding: 10px;}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -40px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer, .page-wrap:after {
/* .push must be the same height as footer */
height: 20px;
}
.site-footer {
text-align: center;
border-top: 1px solid black;
padding: 10px;
}
*, *:before, *:after {
padding-left: 0;
margin: 0;
box-sizing: border-box;
}
ol, ul {
list-style: none;
}
a {
text-decoration: none;
color: black;
}
.cp_cont {
height: auto;
}
/* menu */
.cp_offcm03 {
position: relative;
z-index: 5000;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
width: 100%;
height: auto;
padding-top: 0;
-webkit-transition: transform 0.3s ease-in;
transition: transform 0.3s ease-in;
text-align: center;
color: black;
background-color: white;
}
.cp_offcm03 nav,
.cp_offcm03 ul {
height: 100%;
}
.cp_offcm03 li {
display: inline-block;
margin-right: -6px;
}
.cp_offcm03 a {
display: block;
padding: 15px 45px;
margin-bottom: -5px;
-webkit-transition: background-color .3s ease-in;
transition: background-color .3s ease-in;
}
.cp_offcm03 a:hover {
background-color: lightgray;
}
/* menu toggle */
#cp_toggle03 {
display: none;
}
#cp_toggle03:checked ~ .cp_offcm03 {
-webkit-transform: translateX(0);
transform: translateX(0);
}
#cp_toggle03:checked ~ .cp_container {
-webkit-transform: translateX(0);
transform: translateX(0);
}
.cp_mobilebar {
display: none;
}
/* content */
.cp_container {
position: relative;
top: 0;
padding: 35px auto;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_content {
margin: 0 auto;
padding: 20px;
height: 65vh;
text-align: center;
}
#media (max-width: 1130px)and (min-width: 280px) {
/* menu */
.cp_offcm03 {
position: fixed;
left: -250px;
overflow-y: hidden;
width: 250px;
height: 100%;
padding-top: 40px;
color: black;
background-color: white;
z-index: 1000;
}
.cp_offcm03 nav {
background: white;
border-right: 0.5px solid lightgray;
margin-left: -210px;
}
.cp_offcm03 li {
display: block;
margin-right: 0;}
.cp_offcm03 a {
padding: 20px;
}
/* menu toggle */
.cp_mobilebar {
display: block;
z-index: 2000;
position: relative;
top: 0;
left: 0;
padding: 0 25px;
width: 100%;
height: 40px;
background-color: white;
border-bottom: .05px solid lightgray;
}
.cp_menuicon {
display: block;
position: relative;
width: 25px;
height: 100%;
cursor: pointer;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon > span {
display: block;
position: absolute;
top: 55%;
margin-top: -0.3em;
width: 100%;
height: 0.2em;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease;
transition: transform .3s ease;
}
.cp_menuicon > span:before,
.cp_menuicon > span:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon > span:before {
-webkit-transform: translateY(-0.6em);
transform: translateY(-0.6em);
}
.cp_menuicon > span:after {
-webkit-transform: translateY(0.6em);
transform: translateY(0.6em);
}
#cp_toggle03:checked + .cp_mobilebar .cp_menuicon {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#cp_toggle03:checked + .cp_mobilebar span:before,
#cp_toggle03:checked + .cp_mobilebar span:after {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
#cp_toggle03:checked ~ .cp_offcm03 {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
#cp_toggle03:checked ~ .cp_container {
-webkit-transform: translateX(250px);
transform: translateX(250px);
}
input:checked ~ #h-menu_black {
display: block;/*カバーを表示*/
opacity: .6;
}
#h-menu_black {
display: none;
position: fixed;
z-index: 999;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0;
transition: .7s ease-in-out;
}
/* content */
.cp_container {
top: 60px;
height: 92vh;
text-align: center;
}
.noscroll{
overflow: hidden;
position: fixed;
}
I add also my CSS code of navbar, all is working well, only I need is auto close when click on link
/* navbar */
nav{
height: 4rem;
width: 100vw;
background-color: #efefef;
box-shadow: 0 3px 20px rgba(0, 0, 0, 0.2);
display: flex;
position: fixed;
z-index: 10;
}
/*Styling logo*/
/* .logo{
padding:1vh 1vw;
text-align: center;
}
.logo img {
height: 5rem;
width: 5rem;
} */
/*Styling Links*/
.nav-list{
display: flex;
list-style: none;
width: 80vw;
padding: 0 0.7vw;
justify-content:center;
align-items: center;
margin: 0 auto;
text-transform: uppercase;
}
.nav-list li a{
text-decoration: none;
margin: 0 1em;
color: #000;
font-weight: 600;
}
.nav-list li a:hover {
color: #1abc9c;
}
.nav-list li {
position: relative;
color: #000;
}
.nav-list li a::before {
content: "";
display: block;
height: 3px;
width: 0%;
background-color: #1abc9c;
position: absolute;
transition: all ease-in-out 250ms;
margin: 0 0 0 10%;
}
.nav-list li a:hover::before{
width: 80%;
}
/*Styling Hamburger Icon*/
.hamburger div{
width: 30px;
height:3px;
background: #000;
margin: 5px;
transition: all 0.3s ease;
}
.hamburger{
display: none;
}
/*Stying for small screens*/
#media screen and (max-width: 800px){
nav{
position: fixed;
z-index: 3;
}
.hamburger{
display:block;
position: absolute;
cursor: pointer;
right: 5%;
top: 50%;
transform: translate(-5%, -50%);
z-index: 2;
transition: all 0.7s ease;
}
.nav-list {
position: fixed;
background: #efefef;
height: 100vh;
width: 100%;
flex-direction: column;
clip-path: circle(50px at 90% -20%);
-webkit-clip-path: circle(50px at 90% -10%);
transition: all 1s ease-out;
pointer-events: none;
}
.nav-list.open{
clip-path: circle(1000px at 90% -10%);
-webkit-clip-path: circle(1000px at 90% -10%);
pointer-events: all;
}
.nav-list li{
opacity: 0;
margin-top: 3em;
}
.nav-list li:nth-child(1){
transition: all 0.5s ease 0.2s;
}
.nav-list li:nth-child(2){
transition: all 0.5s ease 0.4s;
}
.nav-list li:nth-child(3){
transition: all 0.5s ease 0.6s;
}
.nav-list li:nth-child(4){
transition: all 0.5s ease 0.7s;
}
.nav-list li:nth-child(5){
transition: all 0.5s ease 0.8s;
}
.nav-list li:nth-child(6){
transition: all 0.5s ease 0.9s;
margin: 0;
}
.nav-list li:nth-child(7){
transition: all 0.5s ease 1s;
margin: 0;
}
li.fejd{
opacity: 1;
}
}
/*Animating Hamburger Icon on Click*/
.toggle .line1{
transform: rotate(-45deg) translate(-5px,6px);
}
.toggle .line2{
transition: all 0.7s ease;
width:0;
}
.toggle .line3{
transform: rotate(45deg) translate(-5px,-6px);
}
/* /navbar end */
I would like to close navbar when a user clicks on link in responsive mode. I have tried a few examples but it doesn't work for me. Thank you very much!
<nav class="navBar" id="navbar">
<div class="hamburger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>`
<ul class="nav-list" id="menu">
<li>Accueil</li>
<li>Parents</li>
<li>A propos</li>
<li>Temoignagez</li>
</ul>
</nav>
This is my js code. All is working well! I only need to close nav when an user clicks on links
// navbar
const hamburger = document.querySelector(".hamburger");
const navLinks = document.querySelector(".nav-list");
const links = document.querySelectorAll(".nav-list li");
hamburger.addEventListener('click', ()=>{
//Animate Links
navLinks.classList.toggle("open");
links.forEach(link => {
link.classList.toggle("fejd");
});
//Hamburger Animation
hamburger.classList.toggle("toggle");
});
const navToggle = document.getElementById('nav-toggle');
const navLink = document.querySelectorAll('.navLink').parentElement;
navToggle.addEventListener('click', () => {
document.body.classList.toggle('nav-open');
});
</script>
you can use foreach to apply addeventlistener to all elements
document.querySelectorAll('.nav-item').forEach(link=>{
link.addEventListener('click', () => {
alert();
})
})
I'm currently setting up a one page website including a hamburg menu.
The menu is build up with list elements which are linked to a specific tag on that page.
I have only one issue and that's to revert the hamburg icon animation (which becomes a cross on click) back to it's normal state.
Here's the code :
$('#toggle').click(function() {
$(this).toggleClass('active');
$('#overlay').toggleClass('open').show();
});
$('#overlay li').on('click', function(){
$('#overlay').hide();
$('#toggle').removeClass("active");
});
#import url('https://fonts.googleapis.com/css?family=Varela+Round');
.container p {
font-size: 20px;
}
.container a {
display: inline-block;
position: relative;
text-align: center;
color: #1abc9c;
text-decoration: none;
font-size: 20px;
overflow: hidden;
top: 5px;
}
.container a:after {
content: '';
position: absolute;
background: #1abc9c;
height: 2px;
width: 0%;
transform: translateX(-50%);
left: 50%;
bottom: 0;
transition: .35s ease;
}
.container a:hover:after, .container a:focus:after, .container a:active:after {
width: 100%;
}
h1 {
position: relative;
text-align: center;
font-family: 'Varela Round', serif;
}
.button_container {
position: fixed;
top: 5%;
right: 2%;
height: 27px;
width: 35px;
cursor: pointer;
z-index: 100;
transition: opacity .25s ease;
}
.button_container:hover {
opacity: .7;
}
.button_container.active .top {
transform: translateY(11px) translateX(0) rotate(45deg);
background: #FFF;
}
.button_container.active .middle {
opacity: 0;
background: #FFF;
}
.button_container.active .bottom {
transform: translateY(-11px) translateX(0) rotate(-45deg);
background: #FFF;
}
.button_container span {
background: #fd7014;
border: none;
height: 5px;
width: 100%;
position: absolute;
top: 0;
left: 0;
transition: all .35s ease;
cursor: pointer;
}
.button_container span:nth-of-type(2) {
top: 11px;
}
.button_container span:nth-of-type(3) {
top: 22px;
}
.overlay {
position: fixed;
background: #1a1a1a;
top: 0;
left: 0;
width: 100%;
height: 0%;
opacity: 0;
visibility: hidden;
transition: opacity .35s, visibility .35s, height .35s;
overflow: hidden;
}
.overlay.open {
opacity: .9;
visibility: visible;
height: 100%;
}
.overlay.open li {
animation: fadeInRight .5s ease forwards;
animation-delay: .35s;
}
.overlay.open li:nth-of-type(2) {
animation-delay: .4s;
}
.overlay.open li:nth-of-type(3) {
animation-delay: .45s;
}
.overlay.open li:nth-of-type(4) {
animation-delay: .50s;
}
.overlay nav {
position: relative;
height: 70%;
top: 50%;
transform: translateY(-50%);
font-size: 30px;
font-family: 'Varela Round', sans-serif;
font-weight: 400;
text-align: center;
}
.overlay ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
position: relative;
height: 100%;
}
.overlay ul li {
display: ;
height: 25%;
height: calc(100% / 4);
min-height: 50px;
position: relative;
opacity: 0;
}
.overlay ul li a {
display: ;
position: relative;
color: #fd7014;
text-decoration: none;
overflow: hidden;
}
.overlay ul li a:hover:after, .overlay ul li a:focus:after, .overlay ul li a:active:after {
width: 100%;
}
.overlay ul li a:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0%;
transform: translateX(-50%);
height: 3px;
background: #FFF;
transition: .35s;
}
#keyframes fadeInRight {
0% {
opacity: 0;
left: 20%;
}
100% {
opacity: 1;
left: 0;
}
}
<div id="toggle" class="button_container">
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
<div id="overlay" class="overlay">
<nav class="overlay-menu">
<ul>
<li class="overlay-li">portfolio</li>
<li>services</li>
<li>about</li>
<li>contact</li>
</ul>
</nav>
</div>
Does anyone know where how to fix this issue?
I dont have above 50 reputations so cant resolve your problem in comments,...
you just forgot to toggle the 'open' class of overlay when you are clicking on li
so just add the following line in your li click function
$('#overlay').toggleClass('open');
http://jsbin.com/faquzisobi/2/edit?html,css,js,output
everything else seems fine. :)
I have created a fullscreen overlay menu for my personal portfolio. It's working absolutely fine in Chrome / FF / IE on desktop and on my regular Android browser on my Galaxy S4. However, I cannot get it to work on Chrome for Android. It's as if the jQuery just isn't being toggled in that browser.
Code below. JSFiddle here. Live example here.
HTML:
<div class="button-container" id="toggle">
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
<div class="overlay" id="overlay">
<nav class="overlay-menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Resume</li>
<li>Contact</li>
</ul>
</nav>
</div>
JS:
$(document).ready(function(){
$("#toggle").on('click touchstart', function(event) {
event.preventdefault();
$("#overlay").toggleClass("open")
});
});
CSS:
.overlay {
position: fixed;
background: #FF5252;;
top: 0;
left: 0;
width: 0%;
height: 100%;
opacity: 0;
visibility: hidden;
-webkit-transition: opacity .35s, visibility .35s, width .35s ease-in-out;
transition: opacity .35s, visibility .35s, width .35s ease-in-out;
overflow: hidden;
z-index: 100;
}
.overlay.open {
opacity: .9;
visibility: visible;
width: 100%;
}
.overlay nav {
position: relative;
height: 60%;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
font-size: 32px;
font-family: 'Montserrat', sans-serif;
font-weight: 400;
text-align: center;
}
.overlay nav ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
position: relative;
height: 100%;
}
.overlay nav ul li {
display: block;
height: 20%;
height: -webkit-calc(100% / 5);
height: calc(100% / 5);
min-height: 32px;
position: relative;
opacity: 0;
}
.overlay.open nav ul li {
-webkit-animation: menuFade .5s ease forwards;
animation: menuFade .5s ease forwards;
-webkit-animation-delay: .35s;
animation-delay: .35s;
}
.overlay.open nav ul li:nth-of-type(2) {
-webkit-animation-delay: .4s;
animation-delay: .4s;
}
.overlay.open nav ul li:nth-of-type(3) {
-webkit-animation-delay: .45s;
animation-delay: .45s;
}
.overlay.open nav ul li:nth-of-type(4) {
-webkit-animation-delay: .5s;
animation-delay: .5s;
}
.overlay.open nav ul li:nth-of-type(5) {
-webkit-animation-delay: .55s;
animation-delay: .55s;
}
#-webkit-keyframes menuFade {
0% {
opacity: 0;
left: -25%;
}
100% {
opacity: 1;
left: 0;
}
}
#keyframes menuFade {
0% {
opacity: 0;
left: -25%;
}
100% {
opacity: 1;
left: 0;
}
}
.overlay nav ul li a {
display: block;
position: relative;
color: #FFF;
overflow: hidden;
}
.overlay nav ul li a:hover {
text-decoration: none;
}
.overlay nav ul li a:after {
content: '';
position: absolute;
bottom: 0;
left: 0%;
-webkit-transform: translateX(-105%);
-ms-transform: translateX(-105%);
transform: translateX(-105%);
height: 3px;
width: 100%;
background: #FFF;
-webkit-transition: .35s ease;
transition: .35s ease;
}
.overlay nav ul li a:hover:after {
-webkit-transform: translateX(0%);
-ms-transform: translateX(0%);
transform: translateX(0%);
}
Problem solved. My phone cached the old version of the JS file, which didn't jive with the new menu. Clearing the cache solved all problems.