I'm having a bit of trouble getting the overlay nav to cover all the elements within the page. When I create a container or row for an individual section within the page the overlay seems to not overlay.
Here's the code and a link to codepen http://codepen.io/anon/pen/aOGYdy
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 id="topNav" class="overlay-menu">
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>Work</li>
<li>Contact</li>
</ul>
</nav>
</div>
<section id="home">
<div class="container content-section">
<div class="col-md-12 intro-text no-padding">
<div class="col-md-5 intro-heading">Hello, I'm <div class="intro-heading blue">Tom<font color="#333">.</font>
</div>
<div ng-app="typeApp">
<section ng-controller="typeController" class="content">
<h2 ng-class="{typing: isTyping}">I'm {{ something }}<span class="cursor"> </span></h2>
</section>
</div>
</div>
<div class="col-md-7">
<img src="http://i.imgur.com/GRLosqO.png" class="img-responsive align="right" " alt="">
</div>
</div>
</div>
</section>
</section>
<section id="about">
<h1>About</h1>
</section>
<section id="contact">
<p>Contact</p>
</section>
CSS
html, body {
height: 100%;
margin: 0;
font-size: 21px;
}
/* TYPE */
h1 {
font-size: 2.7em;
font-weight: 900;
text-transform: uppercase;
letter-spacing: -2px;
color: #222;
margin-bottom: .3em;
}
h2 {
font-weight: 200;
-webkit-text-stroke: 1px rgba(0,0,0,0.1);
}
h2 span.cursor {
display: inline-block;
background: #333;
margin-left: 1px;
width: .05em;
animation: blink 2s linear 0s infinite;
}
h2.typing span.cursor {
animation: none;
}
#keyframes blink {
0% { background: #FFF }
47% { background: #FFF }
50% { background: #333 }
97% { background: #333 }
100% { background: #FFF }
}
/* SECTIONS */
html, body {
height: 100%;
margin: 0;
padding: 0;
margin:0;
}
section {
height: 100%;
width: 100%;
display: table;
}
#home {
background-color: #ffffff;
}
#portfolio {
background-color: #1abc9c;
}
#about {
background-color: #e67e22;
}
#contact {
background-color: #22a7f0;
}
p {
display: table-cell;
text-align: center;
vertical-align: middle;
font: 700 3em/1 'Open Sans', sans-serif;
text-shadow: 0.1em 0.1em rgba(0, 0, 0, 0.2);
color: #fff;
}
.container {
position: absolute;
width: 100%;
height: 100%;
text-align: center;
top: 40%;
left: 0;
margin: 0 auto;
font-family: 'Roboto', sans-serif;
}
.container p {
font-size: 20px;
}
.container a {
display: inline-block;
position: relative;
text-align: center;
color: #35B0FC;
text-decoration: none;
font-size: 20px;
overflow: hidden;
top: 5px;
}
.container a:after {
content: '';
position: absolute;
background: #FF5252;
height: 2px;
width: 0%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
left: 50%;
bottom: 0;
-webkit-transition: .35s ease;
transition: .35s ease;
}
.container a:hover:after, .container a:focus:after, .container a:active:after {
width: 100%;
}
.button_container {
position: fixed;
top: 3%;
right: 3%;
height: 25px;
width: 35px;
cursor: pointer;
z-index: 100;
-webkit-transition: opacity .25s ease;
transition: opacity .25s ease;
}
.button_container:hover {
opacity: .7;
}
.button_container.active .top {
-webkit-transform: translateY(11px) translateX(0) rotate(45deg);
-ms-transform: translateY(11px) translateX(0) rotate(45deg);
transform: translateY(11px) translateX(0) rotate(45deg);
background: #FFF;
}
.button_container.active .middle {
opacity: 0;
background: #FFF;
}
.button_container.active .bottom {
-webkit-transform: translateY(-11px) translateX(0) rotate(-45deg);
-ms-transform: translateY(-11px) translateX(0) rotate(-45deg);
transform: translateY(-11px) translateX(0) rotate(-45deg);
background: #FFF;
}
.button_container span {
background: black;
border: none;
height: 5px;
width: 100%;
position: absolute;
top: 0;
left: 0;
-webkit-transition: all .35s ease;
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 !important;
background: #22a7f0;
top: 0;
left: 0;
width: 100%;
height: 0%;
opacity: 0;
visibility: hidden;
-webkit-transition: opacity .35s, visibility .35s, height .35s;
transition: opacity .35s, visibility .35s, height .35s;
overflow: hidden;
}
.overlay.open {
opacity: .9;
visibility: visible;
height: 100%;
}
.overlay.open li {
-webkit-animation: fadeInRight .5s ease forwards;
animation: fadeInRight .5s ease forwards;
-webkit-animation-delay: .35s;
animation-delay: .35s;
}
.overlay.open li:nth-of-type(2) {
-webkit-animation-delay: .4s;
animation-delay: .4s;
}
.overlay.open li:nth-of-type(3) {
-webkit-animation-delay: .45s;
animation-delay: .45s;
}
.overlay.open li:nth-of-type(4) {
-webkit-animation-delay: .50s;
animation-delay: .50s;
}
.overlay nav {
position: relative;
height: 70%;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
font-size: 50px;
font-family: 'Vollkorn', 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: block;
height: 25%;
height: calc(100% / 4);
min-height: 50px;
position: relative;
opacity: 0;
}
.overlay ul li a {
display: block;
position: relative;
color: #FFF;
text-decoration: none;
overflow: hidden;
}
/*
.overlay ul li a:hover:after, .overlay ul li a:focus:after, .overlay ul li a:active:after {
width: relative;
}
*/
.overlay ul li a:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
height: 3px;
background: #FFF;
-webkit-transition: .35s;
transition: .35s;
}
#-webkit-keyframes fadeInRight {
0% {
opacity: 0;
left: 20%;
}
100% {
opacity: 1;
left: 0;
}
}
#keyframes fadeInRight {
0% {
opacity: 0;
left: 20%;
}
100% {
opacity: 1;
left: 0;
}
}
JavaScript
//nav toggle
$('#toggle').click(function() {
$(this).toggleClass('active');
$('#overlay').toggleClass('open');
});
$("nav li").click(function() {
$('#overlay').toggleClass('open');
$('#toggle').toggleClass('active');
});
//pages size
(function () {
var px, sections, speed, wait;
sections = document.getElementsByTagName('section');
px = 100;
speed = 0.5;
wait = 2000;
$(window).on('scroll', function () {
clearTimeout($.data(this, 'timer'));
return $.data(this, 'timer', setTimeout(function () {
var i, results, sectionY, time, windowY;
windowY = $(window).scrollTop();
i = sections.length - 1;
results = [];
while (i >= 0) {
if (sectionY - px < windowY && windowY < sectionY + px) {
time = Math.abs(windowY - sectionY) / speed;
$(document.body).animate({ scrollTop: sectionY }, time, 'swing');
}
results.push(i--);
}
}, wait));
});
}.call(this));
//slide
// Cache selectors
var lastId,
topMenu = $("#topNav"),
topMenuHeight = topMenu.outerHeight(),
// All list items
menuItems = topMenu.find("a"),
// Anchors corresponding to menu items
scrollItems = menuItems.map(function(){
var item = $($(this).attr("href"));
if (item.length) { return item; }
});
// Bind click handler to menu items
// so we can get a fancy scroll animation
menuItems.click(function(e){
var href = $(this).attr("href"),
o = href === "#" ? 0 : $(href).offset().top-topMenuHeight+15;
$('html, body').stop().animate({
scrollTop: o
}, 800);
e.preventDefault();
});
// Bind to scroll
$(window).scroll(function(){
// Get container scroll position
var fromTop = $(this).scrollTop()+topMenuHeight;
// Get id of current scroll item
var cur = scrollItems.map(function(){
if ($(this).offset().top < fromTop)
return this;
});
// Get the id of the current element
cur = cur[cur.length-1];
var id = cur && cur.length ? cur[0].id : "";
if (lastId !== id) {
lastId = id;
// Set/remove active class
menuItems
.parent().removeClass("active")
.end().filter("[href=#"+id+"]").parent().addClass("active");
}
});
Just add a z-index to .overlay
http://codepen.io/anon/pen/oXdqYy
.overlay {
position: fixed !important;
background: #22a7f0;
top: 0;
left: 0;
width: 100%;
height: 0%;
opacity: 0;
visibility: hidden;
-webkit-transition: opacity .35s, visibility .35s, height .35s;
transition: opacity .35s, visibility .35s, height .35s;
overflow: hidden;
z-index: 99;
}
Related
I want to create a full screen overlay menu. I am not able to close the menu on anchor click eg. if we click on Home. It scrolls down to the section but does not close the overlay.
I have tried adding some jquery but I am not able to do it. I have tried to toggle the menus as done on clicking the cross but no success.
$('#toggle').click(function () {
$(this).toggleClass('active');
$('#overlay').toggleClass('open');
});
$(".fulloverlay a").on("click", function() {
$('#toggle').toggleClass('active');
$('#overlay').toggleClass('open');
});
.container {
position: absolute;
width: 100%;
height: 100%;
text-align: center;
top: 40%;
left: 0;
margin: 0 auto;
font-family: 'Roboto', sans-serif;
}
.container p {
font-size: 20px;
}
.container a {
display: inline-block;
position: relative;
text-align: center;
color: #FF5252;
text-decoration: none;
font-size: 20px;
overflow: hidden;
top: 5px;
}
.container a:after {
content: '';
position: absolute;
background: #FF5252;
height: 2px;
width: 0%;
transform: translateX(-50%);
left: 50%;
bottom: 0;
transition: 0.35s ease;
}
.container a:hover:after {
width: 100%;
}
h1 {
position: relative;
text-align: center;
font-family: 'Vollkorn', sans-serif;
}
.button_container {
position: fixed;
top: 5%;
right: 2%;
height: 27px;
width: 35px;
cursor: pointer;
z-index: 100;
transition: opacity 0.25s ease;
}
.button_container:hover {
opacity: 0.7;
}
.button_container.active .top {
transform: translateY(10px) translateX(0) rotate(45deg);
background: #FFF;
}
.button_container.active .middle {
opacity: 0;
background: #FFF;
}
.button_container.active .bottom {
transform: translateY(-10px) translateX(0) rotate(-45deg);
background: #FFF;
}
.button_container span {
background: #FF5252;
border: none;
height: 5px;
width: 100%;
position: absolute;
top: 0px;
left: 0;
transition: all 0.35s ease;
cursor: pointer;
}
.button_container span:nth-of-type(2) {
top: 10px;
}
.button_container span:nth-of-type(3) {
top: 20px;
}
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 1;
visibility: hidden;
transition: opacity 0.35s, visibility 0.35s, width 0.35s;
z-index: 50;
}
.overlay:before {
content: '';
background: #FF5252;
left: -55%;
top: 0;
width: 50%;
height: 100%;
position: absolute;
transition: left 0.35s ease;
}
.overlay:after {
content: '';
background: #FF5252;
right: -55%;
top: 0;
width: 50%;
height: 100%;
position: absolute;
transition: all 0.35s ease;
}
.overlay.open {
opacity: 0.9;
visibility: visible;
height: 100%;
}
.overlay.open:before {
left: 0;
}
.overlay.open:after {
right: 0;
}
.overlay.open li {
-webkit-animation: fadeInRight 0.5s ease forwards;
animation: fadeInRight 0.5s ease forwards;
-webkit-animation-delay: 0.35s;
animation-delay: 0.35s;
}
.overlay.open li:nth-of-type(2) {
-webkit-animation-delay: 0.45s;
animation-delay: 0.45s;
}
.overlay.open li:nth-of-type(3) {
-webkit-animation-delay: 0.55s;
animation-delay: 0.55s;
}
.overlay.open li:nth-of-type(4) {
-webkit-animation-delay: 0.65s;
animation-delay: 0.65s;
}
.overlay nav {
position: relative;
height: 70%;
top: 50%;
transform: translateY(-50%);
font-size: 50px;
font-family: 'Vollkorn', serif;
font-weight: 400;
text-align: center;
z-index: 100;
}
.overlay ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
position: relative;
height: 100%;
}
.overlay ul li {
display: block;
height: 25%;
height: calc(100% / 4);
min-height: 50px;
position: relative;
opacity: 0;
}
.overlay ul li a {
display: block;
position: relative;
color: #FFF;
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: 0.35s;
}
#-webkit-keyframes fadeInRight {
0% {
opacity: 0;
left: 20%;
}
100% {
opacity: 1;
left: 0;
}
}
#keyframes fadeInRight {
0% {
opacity: 0;
left: 20%;
}
100% {
opacity: 1;
left: 0;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body translate='no' >
<div class='container'>
<h1>Top right corner, click it!</h1>
</div>
<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' id="fulloverlay">
<ul>
<li><a href='#about2' >Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Work</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</nav>
</div>
<section class="about" id="about" style="background-color: white; height: 100vh;"></section>
<section class="about2" id="about2" style="background-color:aqua; height: 100vh;"></section>
I tried this code on my side and noticed one small change would work in this case.
You are selecting anchors(a) using wrong selector. As 'fulloverlay' is the Id of the parent nav element so instead of selecting it like:
$(".fulloverlay a").on("click", function() {
$('#toggle').toggleClass('active');
$('#overlay').toggleClass('open');
});
You can write like this:
$("#fulloverlay a").on("click", function() {
$('#toggle').toggleClass('active');
$('#overlay').toggleClass('open');
});
then it works.
Hello I have problem with that code, I want to make sidebar when she going in everything is ok but when I press burger button again
the block does not animate.
Code here:
https://pastebin.pl/view/74464f3c
You left out your animation keyframes in css, and also a few things in your .hide class, take a look ;) :
const burger = document.querySelector(".burger");
let a = document.querySelector(".nav");
let b = 0;
burger.addEventListener("click", function() {
burger.classList.toggle("active");
if (burger.classList.contains("active") == true) {
document.querySelector(".nav").classList.add("show");
document.querySelector(".nav").classList.remove("hide");
b++;
} else if (b == 1) {
document.querySelector(".nav").classList.toggle("show");
document.querySelector(".nav").classList.add("hide");
b--;
}
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Roboto Condensed', sans-serif;
}
body {
display: flex;
flex-direction: row;
}
.burger {
position: fixed;
top: 30px;
right: 30px;
width: 60px;
height: 45px;
transition: .2s;
cursor: pointer;
}
.burger.active {
transform: rotate(-90deg);
}
.burger span {
position: absolute;
width: 100%;
height: 10px;
background-color: black;
left: 0;
transition: top .2s .2s, bottom .2s .2s, opacity .2s .2s, transform .2s .4s;
}
.burger span:nth-child(1) {
top: 0
}
.burger.active span:nth-child(1) {
top: calc(50% - 5px);
transform: rotate(45deg);
}
.burger span:nth-child(2) {
top: calc(50% - 5px);
}
.burger.active span:nth-child(2) {
opacity: 0;
}
.burger span:nth-child(3) {
bottom: 0;
}
.burger.active span:nth-child(3) {
bottom: calc(50% - 5px);
transform: rotate(-45deg);
}
.nav {
display: none;
height: 100vh;
width: 15vw;
background-color: #3652f5;
text-align: center;
font-size: 100%;
}
ul,
ul li {
display: block;
list-style: none;
margin: 0;
padding: 0;
}
ul li {
font-size: 2em;
margin-bottom: 30px;
}
i {
margin-bottom: 30px;
color: white;
}
.icon-home {
margin-top: 30px;
}
.nav.show {
display: block;
animation: fadeInLeft .5s linear;
width: 15vw;
}
.nav.hide {
display: block;
opacity: 0;
animation: fadeOutLeft .5s linear;
width: 15vw;
}
#keyframes fadeOutLeft {
0% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(-15vw);
}
}
#keyframes fadeInLeft {
0% {
opacity: 0;
transform: translateX(-20px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
<div class="burger">
<span></span>
<span></span>
<span></span>
</div>
<nav class="nav">
<ul>
<li><i class='icon-home'></i></li>
<li><i class='icon-user'></i></li>
<li><i class='icon-facebook'></i></li>
<li><i class='icon-twitter'></i></li>
<li><i class='icon-linkedin'></i></li>
</ul>
</nav>
I code the responsive menu, but it does not work. My expectation: when you click on the hamburger menu, the menu will transform to the close icon, and the full-screen menu is open (background->opacity .5).
I am not sure where is the mistake. CSS? or js?
Do you have any suggestions?
Any help is appreciated. Thank you so much.
$(document).ready(function() {
let hamburgerClicked = false;
$('#toggle').on("click", function() {
if (hamburgerClicked == false) {
$(".top").css('transform', 'translate (11px) translateX(0) rotate(45deg)');
$(".bottom").css('transform', 'translateY(-11px) translateX(0) rotate(-45deg)');
hamburgerClicked = true;
} else {
$(".top").css('transform', 'translate (0px) translateX(0) rotate(0deg)');
$(".bottom").css('transform', 'translateY (0px) translateX(0) rotate(0deg)');
hamburgerClicked = false;
}
$("#overlay").toggleClass('active');
$('#overlay').toggleClass('open');
});
});
.button-container {
position: fixed;
top: 5%;
right: 2%;
height: 27px;
width: 35px;
cursor: pointer;
z-index: 100;
transition: opacity .25s ease;
opacity: 1;
content: "";
}
.button-container:hover {
opacity: .7;
}
.top:active {
transform: translate(11px) translateX(0) rotate(45deg);
}
.middle:active {
opacity: 0;
}
.bottom:active {
transform: translateY(-11px) translateX(0) rotate(-45deg);
}
span {
background: #fff;
border: none;
height: 4px;
width: 32px;
position: absolute;
top: 0;
left: 0;
transition: all .35s ease;
cursor: pointer;
border-radius: 3px;
}
.middle {
top: 10px;
}
.bottom {
top: 20px;
}
.overlay {
z-index: 500;
position: fixed;
background: rgba(0, 0, 0, 0.6);
top: 0;
left: 0;
width: 5%;
height: 0%;
opacity: .6;
visibility: hidden;
transition: opacity .35s, visibility .35s, height .35s;
}
li {
animation: fadeInRight .5s ease forwards;
animation-delay: .35s;
}
li:nth-of-type(2) {
animation-delay: .4s;
}
li:nth-of-type(3) {
animation-delay: .45s;
}
li:nth-of-type(4) {
animation-delay: .50s;
}
nav {
position: relative;
height: 70%;
top: 20%;
transform: translateY(-50%);
font-size: 0.8em;
}
ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
position: relative;
height: 100%;
}
li {
display: block;
height: 25%;
min-height: 50px;
position: relative;
opacity: 0;
}
a {
display: block;
position: relative;
text-decoration: none;
overflow: hidden;
}
a:hover {
transform: scale(1);
}
a:hover:after,
a:focus:after,
a:active:after {
width: 30%;
}
a:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0%;
transform: translateX(-50%);
height: 3px;
background: rgba(0, 0, 0, 0.6);
transition: .35s;
}
#keyframes fadeInRight {
0% {
opacity: 0;
left: 20%;
}
100% {
opacity: 1;
left: 0;
}
}
.active {
visibility: visible;
}
<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>12 Constellations</li>
<li>Stargazing</li>
</ul>
</nav>
</div>
</header>
There are mistakes in your Javascript code.
When you are changing the css of .top span, you are using 'translate' instead of 'translateY'.
$(".top").css('transform', 'translate (11px) translateX(0) rotate(45deg)'); // In if condition
$(".top").css ('transform', 'translate (0px) translateX(0) rotate(0deg)'); // In else condition
This should be:
$(".top").css('transform', 'translateY(11px) translateX(0) rotate(45deg)'); // In if condition
$(".top").css ('transform', 'translateY(0px) translateX(0) rotate(0deg)'); // In else condition
Also when clicking on the button you should toggle the visibility of the middle span so that the button looks like a cross.
$(".middle").css("display", "none"); // In if condition
$(".middle").css("display", ""); // In else condition
Here is a working demo on JSFiddle : https://jsfiddle.net/0p9faz7m/
I have created a responsive menu but it doesn't show. I would like to use a hamburger menu button. When it is active (button transform+transition, the hamburger menu icon -> the close icon), the ul will slide out from the right ( background -> opacity.5).
I am not sure which part is erroneous. Do you have any suggestions?
$(document).ready(function() {
$('#toggle').on("click", function() {
$("#overlay").toggleClass('active');
$('#overlay').toggleClass('open');
});
});
.button-container {
position: fixed;
top: 5%;
right: 2%;
height: 27px;
width: 35px;
cursor: pointer;
z-index: 100;
transition: opacity .25s ease;
opacity: 1;
content: "";
}
.button-container:hover {
opacity: .7;
}
.top:active {
transform: translate(11px) translateX(0) rotate(45deg);
}
.middle:active {
opacity: 0;
}
.bottom:active {
transform: translateY(-11px) translateX(0) rotate(-45deg);
}
span {
background: rgba(0, 0, 0, 0.6);
border: none;
height: 5px;
width: 5%;
position: absolute;
top: 0;
left: 0;
transition: all .35s ease;
cursor: pointer;
}
.overlay {
position: fixed;
background: rgba(0, 0, 0, 0.6);
top: 0;
left: 0;
width: 5%;
height: 0%;
opacity: .6;
visibility: hidden;
transition: opacity .35s, visibility .35s, height .35s;
}
li {
animation: fadeInRight .5s ease forwards;
animation-delay: .35s;
}
li:nth-of-type(2) {
animation-delay: .4s;
}
li:nth-of-type(3) {
animation-delay: .45s;
}
li:nth-of-type(4) {
animation-delay: .50s;
}
nav {
position: relative;
height: 70%;
top: 20%;
transform: translateY(-50%);
font-size: 0.8em;
}
ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
position: relative;
height: 100%;
}
li {
display: block;
height: 25%;
min-height: 50px;
position: relative;
opacity: 0;
}
a {
display: block;
position: relative;
text-decoration: none;
overflow: hidden;
}
a:hover {
transform: scale(1);
}
a:hover:after,
a:focus:after,
a:active:after {
width: 30%;
}
a:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0%;
transform: translateX(-50%);
height: 3px;
background: rgba(0, 0, 0, 0.6);
transition: .35s;
}
#keyframes fadeInRight {
0% {
opacity: 0;
left: 20%;
}
100% {
opacity: 1;
left: 0;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>12 Constellations</li>
<li>Stargazing</li>
</ul>
</nav>
</div>
You need to add visibility:visible to .active class. and also some css modification to show menu bars.
.active {
visibility: visible;
}
$(document).ready(function() {
$('#toggle').on("click", function() {
$("#overlay").toggleClass('active');
$('#overlay').toggleClass('open');
});
});
.button-container {
position: fixed;
top: 5%;
right: 2%;
height: 27px;
width: 35px;
cursor: pointer;
z-index: 100;
transition: opacity .25s ease;
opacity: 1;
}
.button-container:hover {
opacity: .7;
}
.top:active {
transform: translate(11px) translateX(0) rotate(45deg);
}
.middle:active {
opacity: 0;
}
.bottom:active {
transform: translateY(-11px) translateX(0) rotate(-45deg);
}
span {
background: rgba(0, 0, 0, 0.6);
border: none;
height: 5px;
width: 30px;
position: absolute;
top: 0;
left: 0;
transition: all .35s ease;
cursor: pointer;
}
.middle{
top:10px;
}
.bottom{
top:20px;
}
.overlay {
position: fixed;
background: rgba(0, 0, 0, 0.6);
top: 0;
left: 0;
width: 5%;
height: 0%;
opacity: .6;
visibility: hidden;
transition: opacity .35s, visibility .35s, height .35s;
}
li {
animation: fadeInRight .5s ease forwards;
animation-delay: .35s;
}
li:nth-of-type(2) {
animation-delay: .4s;
}
li:nth-of-type(3) {
animation-delay: .45s;
}
li:nth-of-type(4) {
animation-delay: .50s;
}
nav {
position: relative;
height: 70%;
top: 20%;
transform: translateY(-50%);
font-size: 0.8em;
}
ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
position: relative;
height: 100%;
}
li {
display: block;
height: 25%;
min-height: 50px;
position: relative;
opacity: 0;
}
a {
display: block;
position: relative;
text-decoration: none;
overflow: hidden;
}
a:hover {
transform: scale(1);
}
a:hover:after,
a:focus:after,
a:active:after {
width: 30%;
}
a:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0%;
transform: translateX(-50%);
height: 3px;
background: rgba(0, 0, 0, 0.6);
transition: .35s;
}
#keyframes fadeInRight {
0% {
opacity: 0;
left: 20%;
}
100% {
opacity: 1;
left: 0;
}
}
.active {
visibility: visible;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>12 Constellations</li>
<li>Stargazing</li>
</ul>
</nav>
</div>
I would make a second class for the mobile devices.
<div class="overlay" id="overlay"> // copy //Change Class
<nav class="overlay-menu"> //copy //Change Class
<ul>
<li>Home</li>
<li>About</li>
<li>12 Constellations</li>
<li>Stargazing</li>
</ul>
</nav>
</div>
I want to change a class from "class A" to "Class B" when it reaches DIV of "Class A" to "Class B"..
Here is the thing what I want, I have push menu when hamburger icon. The icon is generally in white background with black box shadow. My whole website background is dark. So it is perfect for dark background.
But I have few DIVs which are in white, when I reach that white DIV my menu is hardly visible.
So my question is I want to change the class of my menu from white to black when it reaches white background div. And I want to change the function of that menu as well in jquery. Because I have a "click" function to expand the menu.
Here is the HTML:
$('.nav-trigger').on('click', function() {
$(this).toggleClass('on');
$('.nav-menu').fadeToggle(200);
});
* {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
}
body {
margin: 0;
font-family: "Advent Pro", sans-serif;
overflow-x: hidden;
}
section {
width: 100%;
padding: 0 7%;
display: table;
margin: 0;
max-width: none;
background-color: #23222a;
height: 100vh;
color: #fff;
}
.content {
display: table-cell;
vertical-align: middle;
color: #fff;
}
.nav-trigger {
width: 30px;
height: 30px;
position: fixed;
top: 10px;
right: 10px;
z-index: 20;
cursor: pointer;
-webkit-transition: top .1s ease-in-out;
transition: top .1s ease-in-out;
}
.nav-trigger span {
display: block;
width: 100%;
height: 2px;
background: #fff;
margin: 7px auto;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.3);
}
.nav-trigger span:first-child {
top: 0;
left: 0;
}
.nav-trigger span:nth-child(2) {
width: 20px;
top: 10px;
left: 0;
}
.nav-trigger span:last-child {
top: 20px;
left: 0;
}
.nav-trigger .on {
top: 10px;
}
.nav-trigger.on span:first-child {
-webkit-transform: translateY(10px) rotate(45deg);
transform: translateY(10px) rotate(45deg);
}
.nav-trigger.on span:nth-child(2) {
-webkit-transform: translateX(50px);
transform: translateX(50px);
opacity: 0;
}
.nav-trigger.on span:last-child {
-webkit-transform: translateY(-8px) rotate(-45deg);
transform: translateY(-8px) rotate(-45deg);
}
.nav-trigger-dark {
width: 30px;
height: 30px;
position: fixed;
top: 10px;
right: 10px;
z-index: 20;
cursor: pointer;
-webkit-transition: top .1s ease-in-out;
transition: top .1s ease-in-out;
}
.nav-trigger-dark span {
display: block;
width: 100%;
height: 2px;
background: #000;
margin: 7px auto;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
box-shadow: 0 0 3px 1px rgba(255, 255, 255, 0.3);
}
.nav-trigger-dark span:first-child {
top: 0;
left: 0;
}
.nav-trigger-dark span:nth-child(2) {
width: 20px;
top: 10px;
left: 0;
}
.nav-trigger-dark span:last-child {
top: 20px;
left: 0;
}
.nav-trigger-dark .on {
top: 10px;
}
.nav-trigger-dark.on span:first-child {
-webkit-transform: translateY(10px) rotate(45deg);
transform: translateY(10px) rotate(45deg);
}
.nav-trigger-dark.on span:nth-child(2) {
-webkit-transform: translateX(50px);
transform: translateX(50px);
opacity: 0;
}
.nav-trigger-dark.on span:last-child {
-webkit-transform: translateY(-8px) rotate(-45deg);
transform: translateY(-8px) rotate(-45deg);
}
.nav-menu {
height: 100%;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: none;
z-index: 19;
overflow: hidden;
}
.nav-menu ul {
list-style-type: none;
padding: 0;
margin: 0;
width: 100%;
max-width: 100%;
text-align: center;
position: relative;
-webkit-transition: opacity .35s, visibility .35s, height .35s;
transition: opacity .35s, visibility .35s, height .35s;
}
.nav-menu ul a {
position: relative;
float: left;
margin: 0;
width: 25%;
height: 100vh;
text-align: center;
cursor: pointer;
background: #e65454;
color: #fff;
text-decoration: none;
}
#media (max-width: 30em) {
.nav-menu ul a {
width: 100%;
height: 25vh;
}
}
.nav-menu ul a li {
position: absolute;
text-transform: uppercase;
font-family: "Advent Pro", sans-serif;
top: 45%;
left: 0;
position: relative;
-webkit-animation: fadeInRight .5s ease forwards;
animation: fadeInRight .5s ease forwards;
}
#media (max-width: 30em) {
.nav-menu ul a li {
top: 25%;
}
}
.nav-menu ul a h2.mb {
-webkit-transition: -webkit-transform 0.35s;
transition: -webkit-transform 0.35s;
transition: transform 0.35s;
transition: transform 0.35s, -webkit-transform 0.35s;
margin-bottom: -20px;
font-size: 2.25rem;
/* 36/16 */
}
#media (max-width: 30em) {
.nav-menu ul a h2.mb {
font-size: 1.688rem;
/* 27/16 */
}
}
#media (min-width: 48em) and (max-width: 61.9375em) {
.nav-menu ul a h2.mb {
font-size: 2rem;
/* 32/16 */
margin-bottom: -13px;
}
}
.nav-menu ul a h2.mt {
-webkit-transition: -webkit-transform 0.35s;
transition: -webkit-transform 0.35s;
transition: transform 0.35s;
transition: transform 0.35s, -webkit-transform 0.35s;
margin-bottom: -73px;
font-size: 2.25rem;
/* 36/16 */
}
#media (max-width: 30em) {
.nav-menu ul a h2.mt {
font-size: 1.688rem;
/* 27/16 */
}
}
#media (min-width: 48em) and (max-width: 61.9375em) {
.nav-menu ul a h2.mt {
font-size: 2rem;
/* 32/16 */
}
}
.nav-menu ul a i {
font-style: normal;
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
transition: opacity 0.35s, transform 0.35s, -webkit-transform 0.35s;
-webkit-transform: translate3d(0, -30px, 0);
transform: translate3d(0, -30px, 0);
font-size: 1.875rem;
/* 30/16 */
}
#media (max-width: 30em) {
.nav-menu ul a i {
display: none;
}
}
.nav-menu ul a:hover {
background: #fff;
color: #e65454;
}
.nav-menu ul a:hover h2 {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.nav-menu ul a:hover i {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.nav-menu ul a.active {
background: #fff;
color: #e65454;
}
.nav-menu ul a.active:hover {
color: #000;
}
#-webkit-keyframes fadeInRight {
0% {
opacity: 0;
left: 20%;
}
100% {
opacity: 1;
left: 0;
}
}
#keyframes fadeInRight {
0% {
opacity: 0;
left: 20%;
}
100% {
opacity: 1;
left: 0;
}
}
.bgwhite {
background: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav-trigger">
<span></span><span></span><span></span>
</div>
<div class="nav-menu">
<ul>
<li><h2 class="mt">Home</h2><i>Go to</i></li>
<li><h2 class="mb">About</h2><i>Me</i></li>
<li><h2 class="mt">Work</h2><i>My</i></li>
<li><h2 class="mb">Contact</h2><i>Me</i></li>
</ul>
</div>
<section>
<div class="content">
</div>
</section>
<section class="bgwhite">
<div class="content">
</div>
</section>
as you can see in the snippit above when i reach the white background section, my hamburger menu trigger is hardly visible..
I have a css class with dark menu in the name of "nav-trigger dark".
Now I want to change that "nav-trigger" class to "nav-trigger-dark" class in that html and in that jquery script as well.
I believe I understood the effect you're trying to achieve.
In my solution I listen to the scroll event on the document and when I reach a new section I check whether that section contains a particular class, if it does I alter my navbar class to match the style I want to display.
Check this Fiddle for more information.
It goes like this:
HTML:
<nav>
<p class="js_header white">
Text
</p>
</nav>
<section class="bg-black"></section>
<section class="bg-white"></section>
<section class="bg-black"></section>
<section class="bg-white"></section>
CSS (the important part):
nav .white {
color: white;
}
nav .black {
color: black;
}
section.bg-black {
background-color: black;
}
section.bg-white {
background-color: white;
}
Javascript:
$(document).scroll(function (e) {
$.each($('section'), function (index, section) {
if($(this).scrollTop() >= section.getBoundingClientRect().top && $(this).scrollTop() <= section.getBoundingClientRect().bottom){
if ($(section).hasClass('bg-black')) {
$('.js_header').removeClass('black');
$('.js_header').addClass('white');
} else {
$('.js_header').removeClass('white');
$('.js_header').addClass('black');
}
}
});
});
UPDATE: Ok I got what you mean on your comments, in order to change the nav click behaviour when changing the class you need to add the listener to the body targeting the selector you want, instead of binding to the specific class from the beginning.
The JS would go like this for the changing the click behaviour:
$('body').on('click', '.nav-trigger', function() {
alert('light clicked');
$(this).toggleClass('on');
$('.nav-menu').fadeToggle(200);
});
$('body').on('click', '.nav-trigger-dark', function() {
alert('dark clicked');
$(this).toggleClass('on');
$('.nav-menu').fadeToggle(200);
});
I've altered your snippet to the following:
$('body').on('click', '.nav-trigger', function() {
alert('light clicked');
$(this).toggleClass('on');
$('.nav-menu').fadeToggle(200);
});
$('body').on('click', '.nav-trigger-dark', function() {
alert('dark clicked');
$(this).toggleClass('on');
$('.nav-menu').fadeToggle(200);
});
$(document).scroll(function (e) {
$.each($('section'), function (index, section) {
if($(this).scrollTop() >= section.getBoundingClientRect().top && $(this).scrollTop() <= section.getBoundingClientRect().bottom){
if ($(section).hasClass('bgwhite')) {
$('.js_navbar').removeClass('nav-trigger');
$('.js_navbar').addClass('nav-trigger-dark');
} else {
$('.js_navbar').removeClass('nav-trigger-dark');
$('.js_navbar').addClass('nav-trigger');
}
}
});
});
* {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
}
body {
margin: 0;
font-family: "Advent Pro", sans-serif;
overflow-x: hidden;
}
section {
width: 100%;
padding: 0 7%;
display: table;
margin: 0;
max-width: none;
background-color: #23222a;
height: 100vh;
color: #fff;
}
.content {
display: table-cell;
vertical-align: middle;
color: #fff;
}
.nav-trigger {
width: 30px;
height: 30px;
position: fixed;
top: 10px;
right: 10px;
z-index: 20;
cursor: pointer;
-webkit-transition: top .1s ease-in-out;
transition: top .1s ease-in-out;
}
.nav-trigger span {
display: block;
width: 100%;
height: 2px;
background: #fff;
margin: 7px auto;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.3);
}
.nav-trigger span:first-child {
top: 0;
left: 0;
}
.nav-trigger span:nth-child(2) {
width: 20px;
top: 10px;
left: 0;
}
.nav-trigger span:last-child {
top: 20px;
left: 0;
}
.nav-trigger .on {
top: 10px;
}
.nav-trigger.on span:first-child {
-webkit-transform: translateY(10px) rotate(45deg);
transform: translateY(10px) rotate(45deg);
}
.nav-trigger.on span:nth-child(2) {
-webkit-transform: translateX(50px);
transform: translateX(50px);
opacity: 0;
}
.nav-trigger.on span:last-child {
-webkit-transform: translateY(-8px) rotate(-45deg);
transform: translateY(-8px) rotate(-45deg);
}
.nav-trigger-dark {
width: 30px;
height: 30px;
position: fixed;
top: 10px;
right: 10px;
z-index: 20;
cursor: pointer;
-webkit-transition: top .1s ease-in-out;
transition: top .1s ease-in-out;
}
.nav-trigger-dark span {
display: block;
width: 100%;
height: 2px;
background: #000;
margin: 7px auto;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
box-shadow: 0 0 3px 1px rgba(255, 255, 255, 0.3);
}
.nav-trigger-dark span:first-child {
top: 0;
left: 0;
}
.nav-trigger-dark span:nth-child(2) {
width: 20px;
top: 10px;
left: 0;
}
.nav-trigger-dark span:last-child {
top: 20px;
left: 0;
}
.nav-trigger-dark .on {
top: 10px;
}
.nav-trigger-dark.on span:first-child {
-webkit-transform: translateY(10px) rotate(45deg);
transform: translateY(10px) rotate(45deg);
}
.nav-trigger-dark.on span:nth-child(2) {
-webkit-transform: translateX(50px);
transform: translateX(50px);
opacity: 0;
}
.nav-trigger-dark.on span:last-child {
-webkit-transform: translateY(-8px) rotate(-45deg);
transform: translateY(-8px) rotate(-45deg);
}
.nav-menu {
height: 100%;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: none;
z-index: 19;
overflow: hidden;
}
.nav-menu ul {
list-style-type: none;
padding: 0;
margin: 0;
width: 100%;
max-width: 100%;
text-align: center;
position: relative;
-webkit-transition: opacity .35s, visibility .35s, height .35s;
transition: opacity .35s, visibility .35s, height .35s;
}
.nav-menu ul a {
position: relative;
float: left;
margin: 0;
width: 25%;
height: 100vh;
text-align: center;
cursor: pointer;
background: #e65454;
color: #fff;
text-decoration: none;
}
#media (max-width: 30em) {
.nav-menu ul a {
width: 100%;
height: 25vh;
}
}
.nav-menu ul a li {
position: absolute;
text-transform: uppercase;
font-family: "Advent Pro", sans-serif;
top: 45%;
left: 0;
position: relative;
-webkit-animation: fadeInRight .5s ease forwards;
animation: fadeInRight .5s ease forwards;
}
#media (max-width: 30em) {
.nav-menu ul a li {
top: 25%;
}
}
.nav-menu ul a h2.mb {
-webkit-transition: -webkit-transform 0.35s;
transition: -webkit-transform 0.35s;
transition: transform 0.35s;
transition: transform 0.35s, -webkit-transform 0.35s;
margin-bottom: -20px;
font-size: 2.25rem;
/* 36/16 */
}
#media (max-width: 30em) {
.nav-menu ul a h2.mb {
font-size: 1.688rem;
/* 27/16 */
}
}
#media (min-width: 48em) and (max-width: 61.9375em) {
.nav-menu ul a h2.mb {
font-size: 2rem;
/* 32/16 */
margin-bottom: -13px;
}
}
.nav-menu ul a h2.mt {
-webkit-transition: -webkit-transform 0.35s;
transition: -webkit-transform 0.35s;
transition: transform 0.35s;
transition: transform 0.35s, -webkit-transform 0.35s;
margin-bottom: -73px;
font-size: 2.25rem;
/* 36/16 */
}
#media (max-width: 30em) {
.nav-menu ul a h2.mt {
font-size: 1.688rem;
/* 27/16 */
}
}
#media (min-width: 48em) and (max-width: 61.9375em) {
.nav-menu ul a h2.mt {
font-size: 2rem;
/* 32/16 */
}
}
.nav-menu ul a i {
font-style: normal;
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
transition: opacity 0.35s, transform 0.35s, -webkit-transform 0.35s;
-webkit-transform: translate3d(0, -30px, 0);
transform: translate3d(0, -30px, 0);
font-size: 1.875rem;
/* 30/16 */
}
#media (max-width: 30em) {
.nav-menu ul a i {
display: none;
}
}
.nav-menu ul a:hover {
background: #fff;
color: #e65454;
}
.nav-menu ul a:hover h2 {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.nav-menu ul a:hover i {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.nav-menu ul a.active {
background: #fff;
color: #e65454;
}
.nav-menu ul a.active:hover {
color: #000;
}
#-webkit-keyframes fadeInRight {
0% {
opacity: 0;
left: 20%;
}
100% {
opacity: 1;
left: 0;
}
}
#keyframes fadeInRight {
0% {
opacity: 0;
left: 20%;
}
100% {
opacity: 1;
left: 0;
}
}
.bgwhite {
background: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav-trigger js_navbar">
<span></span><span></span><span></span>
</div>
<div class="nav-menu">
<ul>
<li><h2 class="mt">Home</h2><i>Go to</i></li>
<li><h2 class="mb">About</h2><i>Me</i></li>
<li><h2 class="mt">Work</h2><i>My</i></li>
<li><h2 class="mb">Contact</h2><i>Me</i></li>
</ul>
</div>
<section>
<div class="content">
</div>
</section>
<section class="bgwhite">
<div class="content">
</div>
</section>
You can calculate the offset of white elements and then compare that with the scroll value. Then if you are on that divs, you change your css :
$(function() {
var oTop = $('#blueDiv').offset().top - $('#blueDiv').outerHeight() ;
$(window).scroll(function(){
var pTop = $('body').scrollTop();
//console.log( pTop + ' - ' + oTop );
if( pTop > oTop && pTop<oTop + $('#blueDiv').outerHeight() + $('#navbar').outerHeight() ){
white();
}else {
blue();
}
});
});
function white(){
document.getElementById("navbar").className = "";
document.getElementById("navbar").className = "navbar-white";
//Add your code here
}
function blue(){
document.getElementById("navbar").className = "";
document.getElementById("navbar").className = "navbar-blue";
//Add your code here
}
#navbar {
position : fixed;
top : 0px;
height : 30px;
width:100%;
opacity:0.7;
}
#blueDiv {
background-color : blue;
height:30px;
}
.navbar-white {
background-color: white;
}
.navbar-blue {
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navbar" class="navbar-blue">
menu
</div>
<p> s</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> s2</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> s3</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> s4</p>
<p> </p>
<p> </p>
<div id="blueDiv">counter...</div>
<p> s</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> s2</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> s3</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> s4</p>
<p> </p>
<p> </p>