I am trying to make my hamburger icon drop the navigation bar. The icon works and is responsive, however the overlay does not drop.
https://jsfiddle.net/run1kqmj/
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.overlay {
height: 0%;
width: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-y: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}
.container {
display: inline-block;
cursor: pointer;
}
.bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
z-index: 3;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
}
.change .bar2 {opacity: 0;}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}
</style>
</head>
<body>
<div id="myNav" class="overlay">
<div class="overlay-content">
<h4>
Home<br>
V-Plus<br>
Carbon Edition<br>
Special Edition<br></h4>
</div>
</div>
<div class="container" onclick="myFunction(this);runNav()">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<script>
function myFunction(x) {
x.classList.toggle("change");
}
function runNav() {
if (document.getElementById("myNav").style.height = "0%");
{document.getElementById("myNav").style.height = "100%"};
{document.getElementById("myNav").style.height = "0%"};
}
</script>
When I manually make the overlay 100%, to preview the look, I am then unable to interact with the hamburger icon. It will not perform it's action.
I set the ("myNav").style.height = "5%"}; and it would cover over the icon and I would be unable to interact where the overlay was.
Your javascript for enabling the overlay was broken. I also added some margin-top to the overlay in order to make the icon accessible.
function myFunction(x) {
x.classList.toggle("change");
}
function runNav() {
if (document.getElementById("myNav").style.height == 0 || document.getElementById("myNav").style.height == "0%") {
document.getElementById("myNav").style.height = "100%";
}
else {
document.getElementById("myNav").style.height = "0%";
}
}
.overlay {
height: 0%;
margin-top: 50px;
width: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-y: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}
.container {
display: inline-block;
cursor: pointer;
}
.bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
z-index: 3;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
}
.change .bar2 {opacity: 0;}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="myNav" class="overlay">
<div class="overlay-content">
<h4>
Home <br>
V-Plus<br>
Carbon Edition<br>
Special Edition<br></h4>
</div>
</div>
<div class="container" onclick="myFunction(this);runNav()">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</body>
</html>
Related
I am starting out designing a website with Python & Flask.
I have a menu bar in the centre of the page, which when click turns to a cross. Upon opening
I want a menu list to appear.
Do I enter the code in the CSS or the JS section of code?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
display: inline-block;
cursor: pointer;
}
.bar1,
.bar2,
.bar3 {
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
position: relative;
left: 650px;
top: 50px;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
}
.change .bar2 {
opacity: 0;
}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}
</style>
</head>
<body>
<div class="container" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<script>
function myFunction(x) {
x.classList.toggle("change");
}
</script>
</body>
</html>
You can try something like below in html to toggle as menu . Also improved some CSS.
Use the container with class= "wantToCenter" if want to center the menu else you can remove it
Use decoration according to need . I have shown here is demo only
function myFunction(x) {
var y = document.querySelector(".menu")
x.classList.toggle("change");
y.classList.toggle("menuChange");
}
.wantToCenter {
display: flex;
justify-content: center;
}
.container {
display: inline-block;
cursor: pointer;
/*left: 0px;*/
margin-top: 50px;
/*top: 50px;*/
}
.bar1,
.bar2,
.bar3 {
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
position: relative;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
}
.change .bar2 {
opacity: 0;
}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}
.menu {
display: none
}
.menuChange {
display: block
}
<div class="wantToCenter">
<div class="container" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
<div class="menu">
<div class="menuItems">Home</div>
<div class="menuItems">Service</div>
<div class="menuItems">Work</div>
</div>
</div>
</div>
I am working on a website with a hamburger menu that fills the entire page when clicked. The only problem is the page behind still scrolls when the nav is open, and I can't figure out how to disable scrolling while the menu is open. I have tried changing overflow-y: hidden, but it doesn't seem to work.
Here is the HTML for the menu:
<div id="menu">
<div class="logotext">
ONWORD
</div>
<input type="checkbox" id="myInput">
<label for="myInput">
<span class="bar top"></span>
<span class="bar middle"></span>
<span class="bar bottom"></span>
</label>
<aside>
<div class="aside-section aside-left">
<div class="aside-content">
<p> Languages of the land</p>
</div>
</div>
<div class="aside-section aside-right">
<ul class="aside-list">
<li>Start Learning</li>
<li>Language Map</li>
<li>History</li>
<li>Stories</li>
<li>Contact</li>
</ul>
</div>
</aside>
</div>
Here is the CSS:
.logotext a {
font-family: "Raleway", sans-serif;
font-size: 20px;
text-transform: uppercase;
font-weight: 600;
letter-spacing: 2px;
left: 1%;
z-index: 99999;
color: white;
position: absolute;
padding-left: 19px;
padding-right: 19px;
padding-top: 22px;
transition: 0.5s;
}
.logotext a:hover {
-webkit-transform: scale(0.9);
transition-delay: 200ms;
transition-duration: 0.5s;
}
.aside-section {
top: 0;
bottom: 0;
position: absolute;
z-index: 99998;
overflow: hidden;
}
.aside-left {
display: none;
width: 40%;
left: 0;
background-color: white;
background-image: url(../img/menu1.jpeg);
background-position: center;
background-size: cover;
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%);
transition: transform 0.4s ease-in-out;
z-index: 99998;
position: fixed;
overflow-y: hidden;
}
.aside-right {
width: 100%;
right: 0;
background-color: #000000;
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%);
transition: transform 0.4s ease-in-out;
z-index: 99998;
position: fixed;
overflow-y: hidden;
}
.aside-list {
list-style: none;
padding: 0;
margin: 0;
margin-top: 160px;
text-align: left;
padding-left: 50px;
z-index: 99998;
}
.aside-content {
margin-top: 150px;
padding: 0 40px;
position: relative;
color: #000000;
text-align: center;
z-index: 99998;
}
.aside-list li {
margin-bottom: 20px;
z-index: 99998;
padding-bottom: 7px;
}
.aside-anchor::after {
content: "";
position: absolute;
bottom: 0;
background-color: #000000;
left: 0;
right: 0;
height: 2px;
border-radius: 3px;
}
.aside-anchor::before {
border-radius: 3px;
content: "";
position: absolute;
bottom: 0;
background-color: #f5eded;
left: 0;
height: 1px;
z-index: 1;
width: 50%;
-webkit-transition: transform 0.2s ease-in-out;
-o-transition: transform 0.2s ease-in-out;
transition: transform 0.2s ease-in-out;
}
.aside-anchor:hover:before {
-webkit-transform: translateX(50%);
-moz-transform: translateX(50%);
-ms-transform: translateX(50%);
-o-transform: translateX(50%);
transform: translateX(50%);
background-color: #dd8800;
}
.aside-anchor {
padding-bottom: 5px;
color: #fff;
text-decoration: none;
font-size: 14px;
position: relative;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 600;
}
input[type="checkbox"] {
display: none;
}
input[type="checkbox"]:checked ~ aside .aside-left {
transform: translateY(0%);
}
input[type="checkbox"]:checked ~ aside .aside-right {
transform: translateX(0%);
}
input[type="checkbox"]:checked ~ label .bar {
background-color: #fff;
}
input[type="checkbox"]:checked ~ label .top {
-webkit-transform: translateY(0px) rotateZ(45deg);
-moz-transform: translateY(0px) rotateZ(45deg);
-ms-transform: translateY(0px) rotateZ(45deg);
-o-transform: translateY(0px) rotateZ(45deg);
transform: translateY(0px) rotateZ(45deg);
}
input[type="checkbox"]:checked ~ label .bottom {
-webkit-transform: translateY(-15px) rotateZ(-45deg);
-moz-transform: translateY(-15px) rotateZ(-45deg);
-ms-transform: translateY(-15px) rotateZ(-45deg);
-o-transform: translateY(-15px) rotateZ(-45deg);
transform: translateY(-15px) rotateZ(-45deg);
}
input[type="checkbox"]:checked ~ label .middle {
width: 0;
}
.middle {
margin: 0 auto;
}
label {
top: 10px;
display: inline-block;
padding: 7px 10px;
background-color: transparent;
cursor: pointer;
margin: 10px;
position: absolute;
z-index: 99999;
text-align: right;
right: 1%;
transition: 0.5s;
}
label:hover {
-webkit-transform: scale(0.9);
transition-delay: 200ms;
transition-duration: 0.5s;
}
.bar {
display: block;
background-color: #ffffff;
width: 30px;
height: 3px;
border-radius: 5px;
margin: 5px auto;
transition: background-color 0.4s ease-in, transform 0.4s ease-in,
width 0.4s ease-in;
z-index: 99999;
}
.aside-section h1 {
margin: 0;
position: relative;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
text-align: center;
font-size: 35px;
font-family: 'BritishShorthair';
}
.aside-section p {
font-size: 90px;
text-align: center;
line-height: 130px;
font-family: 'BritishShorthair';
margin-top: 0px;
color: white;
}
#media (min-width: 992px) {
h1 {
font-size: 40px;
}
.aside-left {
display: block;
}
.aside-right {
width: 60%;
}
}
When you said you set overflow-y: hidden. Did you do this on the body?
So I have a navbar with an animated hamburger, and when I click the hamburger I want to display the navigation links, which are hidden by default.
How do I include the closeNav function on the hamburger when its an X? If I just insert it behind the openNav function then nothing shows up at all, so thats obviously not the right way.
function openNav() {
document.getElementById("navbar--middle").style.display = "block";
}
function closeNav() {
document.getElementById("navbar--middle").style.display = "none";
}
function myFunction(x) {
x.classList.toggle("change");
}
.navbar--middle {
display: none;
margin-left: 26%;
position: fixed;
display: none;
& a {
display: inline-flex;
padding: 8px 8px 8px 32px;
}
}
.hamburger {
display: inline-block;
margin-top: 45px;
cursor: pointer;
}
.icon1 {
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
border-radius: 5px;
transition: 0.4s;
}
.icon2 {
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
border-radius: 5px;
transition: 0.4s;
}
.icon3 {
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
border-radius: 5px;
transition: 0.4s;
}
/* Rotate first bar */
.change .icon1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
transform: rotate(-45deg) translate(-9px, 6px) ;
}
/* Fade out the second bar */
.change .icon2 {
opacity: 0;
}
/* Rotate last bar */
.change .icon3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px) ;
transform: rotate(45deg) translate(-8px, -8px) ;
}
<div class="navbar--middle" id="navbar--middle">
Home
Toepassing
Specificaties
Referenties
Dealers
</div>
<div class="navbar--right">
<div class="hamburger" id="hamburger" onclick="openNav(); myFunction(this)">
<div class="icon1"></div>
<div class="icon2"></div>
<div class="icon3"></div>
</div>
</div>
You have to put the if else condition of element.style.display like below
var hamburger = document.getElementById('hamburger');
var menu = document.getElementById('navbar--middle');
menu.style.display = "none";
hamburger.addEventListener('click', function() {
this.classList.toggle("change");
if (menu.style.display === "none") {
menu.style.display = "block";
} else {
menu.style.display = "none";
}
})
.navbar--middle {
display: none;
margin-left: 26%;
position: fixed;
display: none;
}
.navbar--middle a {
display: inline-flex;
padding: 8px 8px 8px 32px;
}
.hamburger {
display: inline-block;
margin-top: 45px;
cursor: pointer;
}
.icon1 {
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
border-radius: 5px;
transition: 0.4s;
}
.icon2 {
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
border-radius: 5px;
transition: 0.4s;
}
.icon3 {
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
border-radius: 5px;
transition: 0.4s;
}
/* Rotate first bar */
.change .icon1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
}
/* Fade out the second bar */
.change .icon2 {
opacity: 0;
}
/* Rotate last bar */
.change .icon3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}
<div class="navbar--middle" id="navbar--middle">
Home
Toepassing
Specificaties
Referenties
Dealers
</div>
<div class="navbar--right">
<div class="hamburger" id="hamburger">
<div class="icon1"></div>
<div class="icon2"></div>
<div class="icon3"></div>
</div>
</div>
You want to include the state of the navbar in the class, usually this is done with open and close then once you click the hamburger button you can check to see the current state and execute the appropriate code.
https://api.jquery.com/addclass/
https://api.jquery.com/removeclass/
Why not add a class open, which you toggle in the 'myFunction' you have.
And set the style to display:block for that class?
This works for me:
function openNav() {
document.getElementById("navbar--middle").style.display = "block";
}
function closeNav() {
document.getElementById("navbar--middle").style.display = "none";
}
function myFunction(x) {
x.classList.toggle("change");
if(x.classList.contains("change")) {
openNav();
} else {
closeNav();
}
}
.navbar--middle {
display: none;
margin-left: 26%;
position: fixed;
display: none;
& a {
display: inline-flex;
padding: 8px 8px 8px 32px;
}
}
.hamburger {
display: inline-block;
margin-top: 45px;
cursor: pointer;
}
.icon1 {
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
border-radius: 5px;
transition: 0.4s;
}
.icon2 {
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
border-radius: 5px;
transition: 0.4s;
}
.icon3 {
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
border-radius: 5px;
transition: 0.4s;
}
/* Rotate first bar */
.change .icon1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
transform: rotate(-45deg) translate(-9px, 6px) ;
}
/* Fade out the second bar */
.change .icon2 {
opacity: 0;
}
/* Rotate last bar */
.change .icon3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px) ;
transform: rotate(45deg) translate(-8px, -8px) ;
}
<div class="navbar--middle" id="navbar--middle">
Home
Toepassing
Specificaties
Referenties
Dealers
</div>
<div class="navbar--right">
<div class="hamburger" id="hamburger" onclick="myFunction(this)">
<div class="icon1"></div>
<div class="icon2"></div>
<div class="icon3"></div>
</div>
</div>
You could toggle a class on both the menu and the hamburger, and adjust the styles in your CSS instead.
example...
var navbarBurger = document.getElementById('hamburger');
navbarBurger.addEventListener('click', function() {
var menu = document.getElementById("navbar--middle");
navbarBurger.classList.toggle('is-active');
menu.classList.toggle('is-active');
});
.navbar--middle {
display: none;
margin-left: 26%;
position: fixed;
display: none;
& a {
display: inline-flex;
padding: 8px 8px 8px 32px;
}
}
.navbar--middle.is-active {
display: block;
}
.hamburger {
display: inline-block;
margin-top: 45px;
cursor: pointer;
}
.icon1 {
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
border-radius: 5px;
transition: 0.4s;
}
.icon2 {
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
border-radius: 5px;
transition: 0.4s;
}
.icon3 {
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
border-radius: 5px;
transition: 0.4s;
}
/* Rotate first bar */
.is-active .icon1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
}
/* Fade out the second bar */
.is-active .icon2 {
opacity: 0;
}
/* Rotate last bar */
.is-active .icon3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}
<div class="navbar--middle" id="navbar--middle">
Home
Toepassing
Specificaties
Referenties
Dealers
</div>
<div class="navbar--right">
<div class="hamburger" id="hamburger">
<div class="icon1"></div>
<div class="icon2"></div>
<div class="icon3"></div>
</div>
</div>
You would be better off simply toggling a class (on a parent element) on click with javascript. Transitions should be handled by CSS and by having a single parent class toggle you can use 1 class to handle all style changes.
Also take note of the z-index on the hamburger icon. This rule keeps the icon on the highest layer and clickable at all times.
function toggleNav() {
document.getElementById("body-id").classList.toggle('nav-toggle-class');
}
.navbar--middle {
padding-top: 80px;
position: fixed;
left: 0;
top: 0;
bottom: 0;
background: red;
opacity: 0;
pointer-events: none;
transform: translateX(-100%);
transition: all 0.4s ease;
}
body.nav-toggle-class .navbar--middle {
opacity: 1;
pointer-events: all;
transform: translateX(0);
}
.hamburger {
display: block;
cursor: pointer;
position: fixed;
left: 20px;
top: 20px;
z-index: 1;
}
.icon1 {
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
border-radius: 5px;
transition: 0.4s;
}
.icon2 {
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
border-radius: 5px;
transition: 0.4s;
}
.icon3 {
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
border-radius: 5px;
transition: 0.4s;
}
/* Rotate first bar */
.nav-toggle-class .icon1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
transform: rotate(-45deg) translate(-9px, 6px) ;
}
/* Fade out the second bar */
.nav-toggle-class .icon2 {
opacity: 0;
}
/* Rotate last bar */
.nav-toggle-class .icon3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px) ;
transform: rotate(45deg) translate(-8px, -8px) ;
}
.navbar--middle a {
display: block;
padding: 8px 8px 8px 32px;
}
<body id="body-id" class="">
<div class="navbar--middle" id="navbar--middle">
Home
Toepassing
Specificaties
Referenties
Dealers
</div>
<div class="navbar--right">
<div class="hamburger" id="hamburger" onclick="toggleNav();">
<div class="icon1"></div>
<div class="icon2"></div>
<div class="icon3"></div>
</div>
</div>
</body>
for some reason i cant make the navigation locations apear and disapear. i am not good at java script but i think that is the problem. i am trying to make the locations: WebDesign, Photography, SketchUp, Photoshop, About, Home apear when i press the 3 bars. the bars can change into a cross no problem.
function rotatebar(x) {
x.classList.toggle("rotate");
}
.navigation {
display: inline-block;
float: right;
cursor: pointer;
margin-top: 80px;
margin-right: 120px;
}
.stripes {
float: right;
}
.bar1, .bar2, .bar3 {
width: 30px;
height: 2px;
background-color: #fff;
transition: 0.2S;
}
/* nav button movement */
.bar2, .bar3 {
margin-top: 7px;
}
.rotate .bar1 {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg) translate( -5px, 7px);
}
.rotate .bar3 {
-webkit-transform: rotate(45deg);
transform: rotate(45deg) translate( -6px, -7px);
}
.rotate .bar2 {
opacity: 0;
}
/* nav locations */
.navloc {
display: inline;
color: #fff;
font-family: Open sans;
text-align: center;
cursor: pointer;
margin-right: 30px;
transition: 0.2S;
}
.loc {
margin: 0;
padding: 0;
float: left;
margin-left: 30px;
cursor: pointer;
}
.loc:hover {
color: #ff0000;
border-bottom: 2px solid;
margin-bottom: -2px;
}
/* nav locations movement */
.rotate .navloc {
opacity: 1;
}
<div class="navigation" onclick="rotatebar(this)">
<div class="navloc">
<p class="loc">WebDesign</p>
<p class="loc">Photography</p>
<p class="loc">SketchUp</p>
<p class="loc">Photoshop</p>
<p class="loc">About</p>
<p class="loc">Home</p>
</div>
<div class="stripes">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</div>
You need to add .navlov as opacity:0 and display: inline-block in css. I added working snippet look at it.
function rotatebar(x) {
x.classList.toggle("rotate");
}
body {
background: #000;
}
.navigation {
display: inline-block;
float: right;
cursor: pointer;
margin-top: 80px;
margin-right: 120px;
}
.stripes {
float: right;
}
.bar1, .bar2, .bar3 {
width: 30px;
height: 2px;
background-color: #fff;
transition: 0.2S;
}
/* nav button movement */
.bar2, .bar3 {
margin-top: 7px;
}
.rotate .bar1 {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg) translate( -5px, 7px);
}
.rotate .bar3 {
-webkit-transform: rotate(45deg);
transform: rotate(45deg) translate( -6px, -7px);
}
.rotate .bar2 {
opacity: 0;
}
/* nav locations */
.navloc {
display: inline-block;
color: #fff;
font-family: Open sans;
text-align: center;
cursor: pointer;
margin-right: 30px;
transition: 0.2S;
}
.loc {
margin: 0;
padding: 0;
float: left;
margin-left: 30px;
cursor: pointer;
}
.loc:hover {
color: #ff0000;
border-bottom: 2px solid;
margin-bottom: -2px;
}
/* nav locations movement */
.navloc {
opacity: 0;
}
.rotate .navloc {
opacity: 1;
}
<div class="navigation" onclick="rotatebar(this)">
<div class="navloc">
<p class="loc">WebDesign</p>
<p class="loc">Photography</p>
<p class="loc">SketchUp</p>
<p class="loc">Photoshop</p>
<p class="loc">About</p>
<p class="loc">Home</p>
</div>
<div class="stripes">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</div>
So I am trying to basically change the button that is currently actives color. I have tried to create a css class called "activePage" and add it to whichever button is clicked on. But that has not worked.
So basically if you click the "projects" button it should change the color of that button to red, and if you click the "about" button it should change that button to red and change the "projects" button back to its original color.
function homeTransition()
{
$(this).toggleClass('activePage');
if(document.getElementById("aboutContent").className.indexOf("slideInLeft") !== -1){
document.getElementById("aboutContent").className = " animated slideOutLeft";
}
if(document.getElementById("projectsContent").className.indexOf("slideInLeft") !== -1){
document.getElementById("projectsContent").className = " animated slideOutLeft";
}
if(document.getElementById("contactContent").className.indexOf("slideInLeft") !== -1){
document.getElementById("contactContent").className = " animated slideOutLeft";
}
document.getElementById("astronaut").className = " animated fadeIn";
}
function aboutTransition()
{
document.getElementById("astronaut").className = " animated fadeOut";
document.getElementById("aboutContent").className = "activePage animated slideInLeft";
document.getElementById("projectsContent").className = " animated fadeOutLeft";
document.getElementById("contactContent").className = " animated fadeOutLeft";
}
function projectsTransition()
{
$(this).toggleClass('activePage');
document.getElementById("astronaut").className = " animated fadeOut";
document.getElementById("projectsContent").className = "activePage animated slideInLeft";
document.getElementById("aboutContent").className = " animated fadeOutLeft";
document.getElementById("contactContent").className = " animated fadeOutLeft";
}
function contactTransition()
{
$(this).toggleClass('activePage');
document.getElementById("astronaut").className = " animated fadeOut";
document.getElementById("contactContent").className = "activePage animated slideInLeft";
document.getElementById("aboutContent").className = " animated fadeOutLeft";
document.getElementById("projectsContent").className = " animated fadeOutLeft";
}
//Menu
function expand(){
$(this).toggleClass("on");
$(".menu").toggleClass("active");
};
$(".button").on('click', expand);
body {
font-family: "Source Sans Pro", sans-serif;
color: #ccc;
z-index: -100;
background-color: black;
overflow: hidden;
}
#aboutContent {
position: fixed;
top: 0;
left: 0;
bottom: 0;
padding: 0;
overflow: hidden;
width: 100%;
height: 100%;
transition: all 250ms;
-webkit-transform: translateZ(0) translateX(-100%);
transform: translateZ(0) translateX(-100%);
background-color: black;
z-index: -1;
}
#projectsContent {
position: fixed;
top: 0;
left: 0;
bottom: 0;
padding: 0;
overflow: hidden;
width: 100%;
height: 100%;
transition: all 250ms;
-webkit-transform: translateZ(0) translateX(-100%);
transform: translateZ(0) translateX(-100%);
background-color: black;
z-index: -1;
}
#contactContent {
position: fixed;
top: 0;
left: 0;
bottom: 0;
padding: 0;
overflow: hidden;
width: 100%;
height: 100%;
transition: all 250ms;
-webkit-transform: translateZ(0) translateX(-100%);
transform: translateZ(0) translateX(-100%);
background-color: black;
z-index: -1;
}
.menu {
position: fixed;
top: 0;
left: 0;
bottom: 0;
padding: 0;
overflow: hidden;
background: rgba(38, 139, 190, 0.84);
width: 18%;
box-sizing: border-box;
transition: all 250ms;
-webkit-transform: translateZ(0) translateX(-100%);
transform: translateZ(0) translateX(-100%);
text-align:center;
box-shadow: 0 0 20px #000000;
}
.active {
transform: translateZ(0) translateX(0);
transform: translateZ(0) translateX(0);
-webkit-transition: 0.4s;
transition: 0.4s;
color: #e5e5e5;
}
.activePage {
color: red;
}
h1 {
margin-top:60%;
font-size: 2.5em;
cursor: default;
}
ul {
padding:0;
list-style:none;
font-size:16px;
}
li {
padding:10px 10px;
}
a {
text-decoration:none;
padding:10px 15px;
color:#fff;
font-family:'Lato';
font-size: 1.5em;
font-weight: 300;
}
a:hover {
color: #0dffec;
}
.content {
position:relative;
width:300px;
}
.button {
width:20px;
height:40px;
margin:24% 36%;
padding: 14px;
cursor:pointer;
transition: all .2s ease-in-out;
}
.button:hover {
transform: scale(1.2);
}
.line {
width: 40px;
height: 2px;
background-color: #fff;
transition: transform 0.3s ease, background 0.3s ease, opacity 0.3s ease, top 0.3s ease;
}
.line.first {
transform: translateX(-10px) translateY(22px) rotate(-90deg);
}
.line.second {
transform: translateX(-10px) translateY(19px) rotate(0deg);
}
.button.on .line.top {
transform: translateX(-10px) translateY(20px) rotate(45deg);
}
.button.on .line.bottom {
transform: translateX(-10px) translateY(17px)rotate(-45deg);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Home</title>
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro|Play|Raleway|Lato" rel="stylesheet">
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/animate.css">
</head>
<body>
<img id="astronaut" src="images/astronaut.png">
<div id="wrapper">
<div class="menu">
<h1>Title</h1>
<ul>
<div id="home" onclick="homeTransition()" class="noselect"><li><i class="fa fa-home"></i> home</li></div>
<div id="about" onclick="aboutTransition()" class="noselect"><li><i class="fa fa-user"></i> about</li></div>
<div id="projects" onclick="projectsTransition()" class="noselect"><li><i class="fa fa-code"></i> projects</li></div>
<div id="contact" onclick="contactTransition()" class="noselect"><li><i class="fa fa-paper-plane"></i> contact</li></div>
</ul>
</div>
<div class="content animated fadeInDown">
<div class="button">
<div class="line first top"></div>
<div class="line second bottom"></div>
</div>
</div>
<div id="aboutContent">
</div>
<div id="projectsContent">
</div>
<div id="contactContent">
</div>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script type="text/javascript" src="js/transition.js"></script>
<script type="text/javascript" src="js/background.js"></script>
</body>
</html>
Your click functions are out of jQuery's scope.
I clipped out irrelevant code, so don't just copy and paste.
I change the HTML so it does not use onClick, and the binding happens inside jQuery's ready function instead. In addition, I modified the CSS to target the anchor tage which is actually responsible for the text style.
See the refactoring to your snippet I did below:
//Menu
$(function() {
function expand() {
$(this).toggleClass("on");
$(".menu").toggleClass("active");
};
$('.noselect').click(function() {
$('.noselect').removeClass('activePage');
$(this).toggleClass('activePage');
});
$(".button").on('click', expand);
});
body {
font-family: "Source Sans Pro", sans-serif;
color: #ccc;
z-index: -100;
background-color: black;
overflow: hidden;
}
#aboutContent {
position: fixed;
top: 0;
left: 0;
bottom: 0;
padding: 0;
overflow: hidden;
width: 100%;
height: 100%;
transition: all 250ms;
-webkit-transform: translateZ(0) translateX(-100%);
transform: translateZ(0) translateX(-100%);
background-color: black;
z-index: -1;
}
#projectsContent {
position: fixed;
top: 0;
left: 0;
bottom: 0;
padding: 0;
overflow: hidden;
width: 100%;
height: 100%;
transition: all 250ms;
-webkit-transform: translateZ(0) translateX(-100%);
transform: translateZ(0) translateX(-100%);
background-color: black;
z-index: -1;
}
#contactContent {
position: fixed;
top: 0;
left: 0;
bottom: 0;
padding: 0;
overflow: hidden;
width: 100%;
height: 100%;
transition: all 250ms;
-webkit-transform: translateZ(0) translateX(-100%);
transform: translateZ(0) translateX(-100%);
background-color: black;
z-index: -1;
}
.menu {
position: fixed;
top: 0;
left: 0;
bottom: 0;
padding: 0;
overflow: hidden;
background: rgba(38, 139, 190, 0.84);
width: 18%;
box-sizing: border-box;
transition: all 250ms;
-webkit-transform: translateZ(0) translateX(-100%);
transform: translateZ(0) translateX(-100%);
text-align: center;
box-shadow: 0 0 20px #000000;
}
.active {
transform: translateZ(0) translateX(0);
transform: translateZ(0) translateX(0);
-webkit-transition: 0.4s;
transition: 0.4s;
color: #e5e5e5;
}
.activePage {
color: red;
}
h1 {
margin-top: 60%;
font-size: 2.5em;
cursor: default;
}
ul {
padding: 0;
list-style: none;
font-size: 16px;
}
li {
padding: 10px 10px;
}
a {
text-decoration: none;
padding: 10px 15px;
color: #fff;
font-family: 'Lato';
font-size: 1.5em;
font-weight: 300;
}
a:hover {
color: #0dffec;
}
.content {
position: relative;
width: 300px;
}
.button {
width: 20px;
height: 40px;
margin: 24% 36%;
padding: 14px;
cursor: pointer;
transition: all .2s ease-in-out;
}
.button:hover {
transform: scale(1.2);
}
.line {
width: 40px;
height: 2px;
background-color: #fff;
transition: transform 0.3s ease, background 0.3s ease, opacity 0.3s ease, top 0.3s ease;
}
.line.first {
transform: translateX(-10px) translateY(22px) rotate(-90deg);
}
.line.second {
transform: translateX(-10px) translateY(19px) rotate(0deg);
}
.button.on .line.top {
transform: translateX(-10px) translateY(20px) rotate(45deg);
}
.button.on .line.bottom {
transform: translateX(-10px) translateY(17px)rotate(-45deg);
}
.activePage a {
color: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Home</title>
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro|Play|Raleway|Lato" rel="stylesheet">
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/animate.css">
</head>
<body>
<img id="astronaut" src="images/astronaut.png">
<div id="wrapper">
<div class="menu">
<h1>Title</h1>
<ul>
<div id="home" class="noselect">
<li><i class="fa fa-home"></i> home</li>
</div>
<div id="about" class="noselect">
<li><i class="fa fa-user"></i> about</li>
</div>
</ul>
</div>
<div class="content animated fadeInDown">
<div class="button">
<div class="line first top"></div>
<div class="line second bottom"></div>
</div>
</div>
<div id="aboutContent"></div>
<div id="projectsContent"></div>
<div id="contactContent"></div>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script type="text/javascript" src="js/transition.js"></script>
<script type="text/javascript" src="js/background.js"></script>
</body>
</html>
There's an 'active' property in CSS that allows you to change color and other characteristics of your elements.
Example:
button:active{
background:olive;
}
button:focus{
background:olive;
}
Hope this helps
'this' variable inside homeTransition and all other functions referring to window object.
You can fix the code by:
Changing onclick function call in HTML to:
<div id="home" onclick="homeTransition(event)"
And by adding event arguement in js file:
function homeTransition(event) {
$(event.target).toggleClass('activePage');
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.btn {
border: none;
outline: none;
padding: 10px 16px;
background-color: #f1f1f1;
cursor: pointer;
font-size: 18px;
}
.active, .btn:hover {
background-color: #666;
color: white;
}
</style>
</head>
<body>
<div id="myDIV">
<button class="btn">1</button>
<button class="btn active">2</button>
<button class="btn">3</button>
<button class="btn">4</button>
<button class="btn">5</button>
</div>
<script>
// Add active class to the current button (highlight it)
var header = document.getElementById("myDIV");
var btns = header.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}
</script>
</body>
</html>