I have responsive navbar on my project site. When screen width is lower than 968px, the hamburger menu with sliding menu. But when I resize screen again (so 'normal' wide navbar should appear again) navbar dissapears!
I think it's kind of conflict with my JS function's inside my main.js file. Here's the content of it:
$(document).on('click', 'a[href^="#"]', function (event) {
event.preventDefault();
$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top
}, 1400);
});
$(document).ready(function(){
$(".hamburger").on('click', function(event) {
event.preventDefault();
$(".navigation-list").toggle();
});
});
So i have two functions in JS file. First makes the sliding effect when anchor is clicked. The second one shows/hides the hamburger menu when clicked.
So why navbar is dissapearing?
Here's the link:
https://jsfiddle.net/2s7Lnxb6/
I recognised that it is because of the toggle() function.
By adding another class say hide and you can use toggleClass('hide')
$(document).ready(function(){
$(".hamburger").on('click', function(event) {
event.preventDefault();
$(".navigation-list").toggleClass('hide');
});
});
.topbar{
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1;
}
.navigation-list {
display: flex;
flex-direction: column;
text-align: center;
list-style: none;
max-height : 300px; /* here */
overflow:hidden; /* here */
transition: all 0.3s linear; /* here */
}
.navigation-list.hide { /* here */
max-height : 0px;
overflow:hidden;
transition: all 0.3s linear;
}
.navigation-list-item.hover {
padding: 10px;
flex: 1;
background: #a6b9cd;
list-style: none;
font-family: "Open Sans", sans-serif;
}
.center-logo {
display: none;
}
.navigation-list-item a {
color: #363636;
text-decoration: none;
font-size: 1em;
}
.navigation-list-item.hover {
transition: 0.1s linear;
}
.navigation-list-item.hover:hover {
background: #f8f8ff;
}
.hamburger-container {
text-align: center;
font-size: 2em;
background-color: #a6b9cd;
}
.hamburger:hover {
cursor: pointer;
}
#media screen and (min-width: 968px) {
.hamburger-container {
display: none;
}
.navigation-list {
display: unset;
display: flex;
flex-direction: row;
justify-content: space-between;
text-align: center;
line-height: 70px;
height: 70px;
white-space: nowrap;
}
.navigation-list.hide { /* here */
max-height : 100px;
}
.navigation-list-item {
flex: 1;
background: #a6b9cd;
list-style: none;
font-family: "Open Sans", sans-serif;
}
.navigation-list-item a {
text-decoration: none;
font-size: 1em;
}
.center-logo {
padding: 0;
display: unset;
flex: 1;
width: 100px;
background: #a6b9cd;
border: 5px solid #a6b9cd;
border-radius: 50%;
}
.navigation-list-item.hover {
padding: 0;
transition: 0.3s linear;
}
.hamburger:hover {
cursor: pointer;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="topbar clearfix">
<nav class="navigation">
<div class="hamburger-container">
<span>HAMBURGER</span>
</div>
<ul class="navigation-list">
<li class="navigation-list-item hover">Item1</li>
<li class="navigation-list-item hover">Item2</li>
<li class="navigation-list-item hover">Item3</li>
<li class="navigation-list-item"><img src="https://www.elecosoft.com/wp-content/uploads/2014/04/example-logo.png" class="center-logo" alt="page logo"></li>
<li class="navigation-list-item hover">Item4</li>
<li class="navigation-list-item hover">Item5</li>
<li class="navigation-list-item hover">Item6</li>
</ul>
</nav>
</div>
Related
I am using the onclick method for turning my navbar on/off the problem that I'm having is when I adjust my screen size to mobile view my nav auto turns on.
I'm not very good at JavaScript. I have just started learning it so just fiddled around and absolutely nothing worked for me. Someone told me to put aria-expanded on my HTML so also tried that:
function closeNav() {
document.getElementById("nav_bar").style.height = "0%";
document.getElementById("open-btn").style.display = "inline-block";
document.getElementById("close-btn").style.display = "none";
}
function openNav() {
document.getElementById("nav_bar").style.height = "100%";
document.getElementById("open-btn").style.display = "none";
document.getElementById("close-btn").style.display = "inline-block";
}
body {
background: url(images/bg-img-01.jpg) no-repeat;
background-size: cover;
}
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#nav_bar {
background: radial-gradient( ellipse at top, rgba(196, 199, 200, 0.8), rgba(250, 255, 255, 0.02) 60%, rgba(0, 0, 0, 0) 1%);
position: fixed;
top: 0;
width: 100%;
}
#nav_bar>img {
display: none;
}
.nav {
background: none;
overflow: hidden;
display: flex;
margin-inline: auto;
flex-direction: row;
justify-content: space-around;
align-items: center;
list-style: none;
width: 65%;
left: 20%;
padding: 1.4em;
}
.list-item {
text-decoration: none;
color: #CBD5DF;
font-weight: bolder;
}
.list-item {
position: relative;
}
.list-item::before {
position: absolute;
content: "";
background-color: #535792;
height: 4px;
width: 0%;
top: 25px;
transition: all .3s ease-in;
}
.list-item:hover::before {
width: 100%;
}
.list-item:hover {
color: #C4C7C8;
}
#close-btn,
#open-btn {
display: none;
}
#media only screen and (max-width:768px) {
#nav_bar>img {
display: block;
position: absolute;
width: 10em;
left: 20%;
top: 10%;
}
#nav_bar {
width: 100%;
position: fixed;
z-index: 1;
top: 0;
overflow: hidden;
transition: 0.5s;
}
.nav {
position: relative;
display: flex;
flex-direction: column;
gap: 1.2rem;
top: 20%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.list-item {
text-decoration: none;
display: block;
color: #ffdada;
font-size: 1.5rem;
transition: 0.3s;
}
#close-btn,
#open-btn {
display: block;
position: absolute;
right: 25px;
top: 20px;
font-size: 2rem;
color: #818181;
transition: all 0.3s;
}
#close-btn:hover {
color: #fff;
}
<body>
<div id="nav_bar">
<a href="#" id="close-btn">
<i aria-expanded="false" onclick="closeNav()" class="bi bi-x-lg"></i>
</a>
<img src="assests/images/moon.png" alt="" />
<div class="nav">
<a class="list-item" href="#">Home</a>
<a class="list-item" href="#">About Me</a>
<a class="list-item" href="#">Projects</a>
<a class="list-item" href="#">C.V</a>
<a class="list-item" href="#">Contact</a>
</div>
</div>
<a aria-expanded="false" href="#" id="open-btn" onclick="openNav()"><i class="bi bi-list"></i
></a>
<script src="assests/nav.js"></script>
</body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
Make use of the classList.toggle function that adds/remove a class from the Navbar. In this example, I add or remove the class d-none that has the property: display: none in CSS. With that you can hide or show the navbar by pressing the same button with a single line of code:
const BUTTON = document.querySelector('#toggle_navBar');
const NAV = document.querySelector('nav');
BUTTON.addEventListener('click', function() {
NAV.classList.toggle('d-none');
});
body {
background: url(images/bg-img-01.jpg) no-repeat;
background-size: cover;
}
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
nav {
background: radial-gradient( ellipse at top, rgba(196, 199, 200, 0.8), rgba(250, 255, 255, 0.02) 60%, rgba(0, 0, 0, 0) 1%);
position: sticky;
top: 0;
width: 100%;
}
menu {
background: none;
overflow: hidden;
display: flex;
margin-inline: auto;
flex-direction: row;
justify-content: space-around;
align-items: center;
list-style: none;
width: 65%;
left: 20%;
padding: 1.4em;
}
nav li a {
text-decoration: none;
color: #CBD5DF;
font-weight: bolder;
position: relative;
}
nav li a::before {
position: absolute;
content: "";
background-color: #535792;
height: 4px;
width: 0%;
top: 25px;
transition: all .3s ease-in;
}
nav li a:hover::before {
width: 100%;
}
nav li a:hover {
color: #C4C7C8;
}
.d-none {
display: none;
}
<nav>
<img src="assests/images/moon.png" alt="" />
<menu>
<li><a class="list-item" href="#">Home</a></li>
<li><a class="list-item" href="#">About Me</a></li>
<li><a class="list-item" href="#">Projects</a></li>
<li><a class="list-item" href="#">C.V</a></li>
<li><a class="list-item" href="#">Contact</a></li>
</menu>
</nav>
<button id="toggle_navBar">Toggle NavBar</button>
A few changes I made were for semantic reasons. You should use semantic tags if possible and have accessibility in mind. Accessibility is also part of SEO-ratings!
I think the basic idea would be to have a button toggle some variable and then update the UI according to the value of that variable.
You can do this in several ways, but here is an example of a simple way to do it:
// Get your toggle button element
const toggle = document.querySelector(".nav-toggle");
// Get your nav element
const nav = document.querySelector(".nav");
// Create a variable to hold the state of your nav
let navIsOpen = false;
// Listen for clicks on your nav toggle button
toggle.addEventListener('click', () => {
// Update the nav state variable
navIsOpen = !navIsOpen;
// run a function that will update the nav "styles"
updateNav();
})
// This function will update the UI state according to the value of the navIsOpen variable. Here you can update all things you need, like your navbar, your toggle button, ...
function updateNav() {
navIsOpen
?
nav.classList.add('nav--is-open') :
nav.classList.remove('nav--is-open');
}
.nav {
margin-top: 1rem;
padding: 1rem;
background-color: lightgrey;
}
.nav--is-open {
background-color: purple;
color: white;
}
<button class="nav-toggle">Toggle nav</button>
<nav class="nav">
Your nav here
</nav>
my Friends I have a problem.i have a project that has 3 buttons in it's header .these buttons change width of main div to my specific width has set in my Java script.i want something like media queries for example change my div color or hide or show something when div width changes. i know I can use Java script to define background color for every width but imagine that i have navbar that has sandwich menu button on mobile.this button can easily hide in an specific width that i have defined on my media queries;but what about hiding this button when my main div width decreases to mobile view width instead of changing browser width?
please excuse me for this long text.
<body>
<header>
<span role="button" class="header-collapse"
><i class="fas fa-angle-up"></i
></span>
<ul class="screens">
<li>
<i class="fas fa-mobile-alt"></i>
</li>
<li>
<i class="fas fa-tablet-alt"></i>
</li>
<li>
<i class="fas fa-desktop"></i>
</li>
</ul>
</header>
<main class="content">
</main>
<footer>
<span>Coded by Mahdi Baghaei</span>
</footer>
<script src="./js/app.js"></script>
</body>
*,
html {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
display: flex;
flex-direction: column;
font-family: "poppins", sans-serif;
}
header {
min-height: 5vh;
position: relative;
background-color: #e4e1fc;
width: 15%;
margin: 0 auto;
transition: all 0.2s ease;
}
.header-collapse {
position: absolute;
display: block;
left: 50%;
transform: translateX(-50%);
top: 100%;
background-color: #e4e1fc;
width: 2rem;
height: 1rem;
display: flex;
justify-content: center;
align-items: center;
color: #2512cc;
cursor: pointer;
transition: background-color 0.3s ease, color 0.2s ease;
}
.header-collapse:hover {
background-color: #a49af6;
color: white;
}
.header-set {
transform: translateY(-100%);
}
.header-collapse-set {
transform: translateX(-50%) rotateZ(-180deg);
}
.screens {
width: 100%;
margin: 0 auto;
display: flex;
list-style: none;
justify-content: space-around;
height: 100%;
align-items: center;
padding: 1rem;
}
.screens li a {
width: 2rem;
height: 2rem;
display: flex;
flex-direction: column;
text-align: center;
justify-content: center;
transition: background-color 0.3s ease, color 0.2s ease;
color: #2512cc;
align-items: center;
}
.screens li a:hover {
background-color: #a49af6;
color: white;
}
.screens li a i {
font-size: 1rem;
}
.content {
width: 100%;
height: 75vh;
transition: all 0.4s ease;
margin: auto;
border: 1px solid white;
}
.content-mobile {
width: 768px;
}
.content-tablet {
width: 1200px;
}
footer {
margin-top: auto;
background-color: #e4e1fc;
min-height: 5vh;
padding: 1rem;
text-align: center;
}
footer span {
font-size: 0.9rem;
}
#media screen and (max-width: 768px) {
.content {
background-color: red;
}
}
#media screen and (min-width: 768px) {
.content {
background-color: green;
}
}
#media screen and (min-width: 1200px) {
.content {
background-color: blue;
}
}
const header = document.querySelector("header");
const headerCollapse = document.querySelector(".header-collapse");
const content = document.querySelector(".content");
const screenSwitch = document.querySelectorAll(".screens li");
headerCollapse.addEventListener("click", headerCollapseF);
function headerCollapseF() {
header.classList.toggle("header-set");
headerCollapse.classList.toggle("header-collapse-set");
}
screenSwitch[0].addEventListener("click", mobileView);
screenSwitch[1].addEventListener("click", tabletView);
screenSwitch[2].addEventListener("click", standardView);
function mobileView() {
content.style.width = "768px";
content.style.border = "1px solid black";
}
function tabletView() {
content.style.width = "1200px";
content.style.border = "1px solid black";
}
function standardView() {
content.style.width = "100%";
content.style.border = "1px solid white";
}
I have solved my problem by using iframe html tag
thanks you all.
I created a navigation bar it works fine.
It consists of several tabs such as Home, about, services, contact.
But I want to close it when I click on the contents of the web page.
Code:
(function() {
var bodyEl = $('nav'),
navToggleBtn = bodyEl.find('.nav-toggle-btn');
navToggleBtn.on('click', function(e) {
bodyEl.toggleClass('active-nav');
e.preventDefault();
});
})();
var height = $(window).height();
var width = $(window).width();
$(window).resize(function() {
$("nav").removeClass("active-nav");
});
* {
margin: 0;
padding: 0;
}
body {
font-family: Open Sans, Arial, sans-serif;
overflow-x: hidden;
}
nav {
position: fixed;
z-index: 1000;
top: 0;
bottom: 0;
width: 200px;
background-color: #036;
transform: translate3d(-200px, 0, 0);
transition: transform 0.4s ease;
}
.active-nav {
transform: translate3d(0, 0, 0);
}
nav ul {
list-style: none;
margin-top: 100px;
}
nav ul li a {
text-decoration: none;
display: block;
text-align: center;
color: #fff;
padding: 10px 0;
}
.nav-toggle-btn {
display: block;
position: absolute;
left: 200px;
width: 50px;
line-height: 40px;
text-align: center;
background-color: #666;
}
.content {
padding-top: 300px;
height: 1200px;
background-color: lightgrey;
text-align: center;
transition: transform 0.4s ease;
}
.active-nav .content {
transform: translate3d(200px, 0, 0);
}
.fa-bars {
font-size: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<nav>
<a href="#" class="nav-toggle-btn"> <i class="fa fa-bars"></i>
</a>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
<div class="content">
<h1>This is content</h1>
</div>
How can I close my navigation bar, when I click on the other contents in the web page.
Any help will be appreciated.
Thank you in advance.
The simplest way is to set a "click" event on the "content" area so that whenever anything within it is clicked on, it causes the menu to be hidden again:
$(".content").click(function(e) {
bodyEl.removeClass('active-nav');
});
Demo:
$(function() {
var bodyEl = $('nav'),
navToggleBtn = bodyEl.find('.nav-toggle-btn');
navToggleBtn.on('click', function(e) {
bodyEl.toggleClass('active-nav');
e.preventDefault();
});
$(".content").click(function(e) {
bodyEl.removeClass('active-nav');
});
var height = $(window).height();
var width = $(window).width();
$(window).resize(function() {
$("nav").removeClass("active-nav");
});
});
* {
margin: 0;
padding: 0;
}
body {
font-family: Open Sans, Arial, sans-serif;
overflow-x: hidden;
}
nav {
position: fixed;
z-index: 1000;
top: 0;
bottom: 0;
width: 200px;
background-color: #036;
transform: translate3d(-200px, 0, 0);
transition: transform 0.4s ease;
}
.active-nav {
transform: translate3d(0, 0, 0);
}
nav ul {
list-style: none;
margin-top: 100px;
}
nav ul li a {
text-decoration: none;
display: block;
text-align: center;
color: #fff;
padding: 10px 0;
}
.nav-toggle-btn {
display: block;
position: absolute;
left: 200px;
width: 50px;
line-height: 40px;
text-align: center;
background-color: #666;
}
.content {
padding-top: 300px;
height: 2000px;
background-color: #ccf;
text-align: center;
transition: transform 0.4s ease;
}
.active-nav .content {
transform: translate3d(200px, 0, 0);
}
.fa-bars {
font-size: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<nav>
<a href="#" class="nav-toggle-btn"> <i class="fa fa-bars"></i>
</a>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
<div class="content">
<h1>This is content</h1>
</div>
P.S. I rearranged the rest of your JavaScript slightly to all be within a "ready" block, I wasn't sure what the logic of it was previously.
P.P.S. Your demo contained jQuery twice. This is both unnecessary and can also lead to unpredictable issues. I've removed the older version in my demo above.
SERBIAN: Jednostavno samo dodaj ovo na kraju svoje skripte:
ENG: Just add this at the end of your script:
$('div').click(function(){
$('nav').removeClass("active-nav");
});
You only have to attach an onclick event handler to document.
var height = $(window).height();
var width = $(window).width();
$(function() {
var bodyEl = $('nav'),
navToggleBtn = bodyEl.find('.nav-toggle-btn');
navToggleBtn.on('click', function(e) {
bodyEl.toggleClass('active-nav');
e.preventDefault();
});
$(document).on('click', function(e) {
if(!$(e.target).closest(bodyEl).length && bodyEl.hasClass('active-nav')) {
bodyEl.removeClass('active-nav');
}
});
});
$(window).resize(function() {
$("nav").removeClass("active-nav");
});
* {
margin: 0;
padding: 0;
}
body {
font-family: Open Sans, Arial, sans-serif;
overflow-x: hidden;
}
nav {
position: fixed;
z-index: 1000;
top: 0;
bottom: 0;
width: 200px;
background-color: #036;
transform: translate3d(-200px, 0, 0);
transition: transform 0.4s ease;
}
.active-nav{
transform: translate3d(0, 0, 0);
}
nav ul {
list-style: none;
margin-top: 100px;
}
nav ul li a {
text-decoration: none;
display: block;
text-align: center;
color: #fff;
padding: 10px 0;
}
.nav-toggle-btn {
display: block;
position: absolute;
left: 200px;
width:50px;
line-height: 40px;
text-align:center;
background-color: #666;
}
.content {
padding-top: 300px;
height: 2000px;
background-color: #ccf;
text-align: center;
transition: transform 0.4s ease;
}
.active-nav .content {
transform: translate3d(200px, 0, 0);
}
.fa-bars{
font-size:20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
</script>
<nav>
<i class="fa fa-bars"></i>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
<div class="content">
<h1>This is content</h1>
</div>
Hi all I have a header with a .header-top that I want to hide on scroll which I have managed using the below code, however, I would like the nav to slide up to the top when the .header-top fades out, not just jump to the top. Any ideas?
I have tried adding a transition all to * in my css but that doesnt work, I am unsure what would be the best way to do this
<header>
<div class="header-top">
<img class="logo" src="img/Logo long colour.png" alt="Accountancy Wise Logo">
<i class="fa fa-envelope" aria-hidden="true"></i> email#accountancywise.com
<i class="fa fa-envelope" aria-hidden="true"></i> 07554007114
<form action="subscribe">
<label for="field_email" class="email">
<input class="email-input" id="field_email" name="email" value="" placeholder="Your full email" required="" type="email">
</label>
<div id="submit">
<input class="" name="submit" value="SUBMIT" id="button" type="submit">
</div>
</form>
</div>
<nav>
<div class="menu-button">
<img src="img/Menu.png" alt="">
</div>
<ul>
<li>Home</li>
<li>News</li>
<li>Services</li>
<li>Software Savy</li>
<li>Contact Us</li>
</ul>
</nav>
</header>
$(window).scroll(function() {
if ($(this).scrollTop()>0)
{
$('.header-top').fadeOut(400);
}
else
{
$('.header-top').fadeIn(400);
}
});
header {
position: fixed;
top: 0;
width: 100%;
background: white;
}
.header-top {
#include container;
display: flex;
flex-direction: column;
justify-content: space-between;
#include desktop {
#include container ($width:80%);
}
.logo {
max-width: 40%;
margin: 0 auto;
margin: 10px auto;
}
a {
display: inline-block;
width: 100%;
text-align: left;
color: $brand-blue;
text-decoration: none;
padding: 10px 0;
&:hover {
color: darken($brand-blue, 20%);
}
}
form {
display: flex;
flex-direction: row;
.email-input {
padding: 5px;
margin-right: 10px;
border-radius: 5px;
}
#submit {
#button {
background:$brand-blue;
color: white;
border: none;
padding: 8px 15px;
border-radius: 5px;
&:hover {
background: darken($brand-blue, 20%);
}
}
}
}
}
nav {
background:$brand-blue;
position: relative;
top: 0px;
min-height: 60px;
-webkit-transition: all .2s linear;
-o-transition: all .2s linear;
transition: all .2s linear;
.menu-button {
position: absolute;
top: 4px;
left: 10px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
display: none;
li {
display:block;
a {
color: white;
display: block;
padding: 10px;
text-align: center;
text-decoration: none;
}
}
}
}
I fixed this by doing
$(window).scroll(function() {
if ($(this).scrollTop()>0)
{
$('.header-top').addClass('header-top-hide');
}
else
{
$('.header-top').removeClass('header-top-hide');
}
});
and then adding the css to match the added class
.header-top-hide {
height: 0px !important;
margin: 0;
padding: 0;
.logo {
display: none;
}
a{
display: none;
}
form {
display: none;
}
}
if you move out of page navbar should hide thats it right?
here jquery to hide navbar
$(window).scroll(function () {
//if you hard code, then use console
//.log to determine when you want the
//nav bar to stick.
console.log($(window).scrollTop())
if ($(window).scrollTop() > 280) {
$('nav').hide();
}
if ($(window).scrollTop() < 281) {
$('nav').show();
}
});
this hides navbar if you scroll down. change value in IF condition according to yours.
setTimeout(function() {
$('#myModal').modal();}, 2000);
place your code which hides navbar in the first argument
Okay so I am working on my new personal website and I have came to making the off canvas menu toggable. How cna I do so?
So far I have:
var mainNav = document.getElementById('menu');
var navToggle = document.getElementById('menu-toggle');
mainNav.classList.add('collapsed');
function mainNavToggle() {
mainNav.classList.toggle('collapsed');
}
navToggle.addEventListener('click', mainNavToggle);
.collapsed {
margin-left: -330px;
}
.navigation {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 300px;
height: 100%;
color: #212121;
background-color: #FFFFFF;
transition: all ease-in-out 200ms;
box-shadow: 3px 0px 30px rgba(0, 0, 0, 0.4);
}
.navigation ul {
display: flex;
flex-direction: column;
padding: 90px 0 0 30px;
}
.navigation li {
margin-bottom: 30px;
}
.navigation a {
display: inline-block;
font-size: 16px;
font-weight: 500;
}
.navigation i {
vertical-align: top;
margin-right: 10px;
}
.navigation .double-line {
display: inline-block;
line-height: 1.45;
}
.navigation .double-line span {
display: block;
font-size: 12px;
opacity: 0.3;
}
.clicked span {
background-color: #000;
}
.menu-toggle {
background-color: transparent;
border: 0px;
outline: 0px;
cursor: pointer;
position: relative;
z-index: 10;
}
.menu-toggle span {
display: block;
width: 18px;
height: 2px;
margin: 4px;
background-color: #FFFFFF;
}
<button class="menu-toggle" id="menu-toggle">
<span></span>
<span></span>
<span></span>
</button>
<nav class="navigation" role="navigation" id="menu">
<ul>
/* Menu contents */
</ul>
</nav>
But with this code when the page loads you can see the menu being swept to the left, I dont want this.
How can I make my toggle button change colour when the menu is open?
Adding the class collapsed to the nav and removing the initial toggle solves your blinking issue! And toggling an active class on the toggle gets you a grey toggle when the $menu is open! The transition CSS property is optional to make the bg transition from transparent to grey look smooth.
Fiddle: https://jsfiddle.net/mbs1kymv/1/
JS:
var $menu = document.getElementById('menu');
var $toggle = document.getElementById('menu-toggle');
$toggle.addEventListener('click', function()
{
$menu.classList.toggle('collapsed');
$toggle.classList.toggle('active');
});
HTML:
<nav class="navigation collapsed" role="navigation" id="menu"> ... </nav>
CSS:
.menu-toggle {
transition: background-color 0.25s;
}
.menu-toggle.active {
background-color: #CCC;
}