I'd like to change the colour of my logo when the menu button is clicked to match the style of the overlay.
Currently, I've been able to change it from black logo to white logo. However, when you attempt to close the menu, it does not change back to black logo, even though my js function should handle the switch.
Any help is appreciated.
function menuButton(x) {
x.classList.toggle("change");
}
function toggleNav() {
var x = document.getElementById("myNav");
if (x.style.height === "100%") {
x.style.height = "0%";
} else {
x.style.height = "100%";
}
}
function changeImg() {
var logo = document.getElementById("logo");
if (logo.src == "/images/1x/White.png") {
logo.src = "/images/1x/Asset 1.png";
} else {
logo.src = "/images/1x/White.png";
}
}
/* Global */
.white {
color: #fff
}
html,
body {
margin: 0;
padding: 0;
/* background-color: darkgray; */
}
/* Header */
header {
width: 100%;
min-height: 80px;
padding: 0;
background-color: white;
color: black;
position: fixed;
margin: 0px;
/* border-bottom: 5px solid black; */
/* z-index: 2; */
}
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
header .logo {
float: left;
margin-top: 4px;
position: relative;
z-index: 2;
transition: 0.5s;
}
header .menu {
float: right;
margin-top: 25px;
cursor: pointer;
position: relative;
z-index: 2;
}
/* header .title h1{
margin: 21.5px 0px 0px 0px;
padding: 0;
text-align: center;
font-family: 'Raleway', sans-serif;
font-size: 30px;
}
header .title a:link, a:visited{
color: black;
text-decoration: none;
} */
.bar1,
.bar2,
.bar3 {
background-color: black;
width: 35px;
height: 5px;
margin-bottom: 6px;
transition: 0.4s;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
background-color: white;
}
.change .bar2 {
opacity: 0;
}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
background-color: white;
}
/* Navigation */
.overlay {
width: 100%;
height: 0;
position: fixed;
left: 0;
top: 0;
background-color: rgba(0, 0, 0, 0.9);
z-index: 0;
transition: 0.5s;
overflow: hidden;
}
.overlayContent {
position: relative;
text-align: center;
top: 25%;
height: 100%;
margin-top: 30px;
font-family: 'Raleway', sans-serif;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: whitesmoke;
display: block;
transition: 0.3s;
}
.overlay a:hover,
a:active {
color: darkgrey;
}
<link href="https://fonts.googleapis.com/css?family=Raleway" type="text/css" rel="stylesheet">
<!-- Header Start - Includes Title, Logo, and Menu -->
<header id="top">
<div class="container">
<!-- Logo -->
<div class="logo">
<img id="logo" src="/images/1x/Asset 1.png" alt="Initials JB">
</div>
<!-- Menu Button -->
<div class='menu' onclick="menuButton(this); toggleNav(); changeImg()">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<!-- Title -->
<!-- <div class = "title">
<h1>
JADON BULL
</h1>
</div> -->
<!-- Navigation Start -->
<div class="container">
<nav id="myNav" class="overlay">
<div class="overlayContent">
Overview
Projects
Services
About Me
Contact
</div>
</nav>
</div>
</div>
</header>
<!-- Header End -->
<!-- Showcase -->
<div id="showcase">
</div>
JS:
You have to use absolute path of the image to the source of the image.
in the changeImg function, just change your if condition to :
if (logo.getAttribute('src') === '/images/1x/White.png')
and it will work.
There is a small error in your below line:
logo.src = "/images/1x/Asset 1.png";
Always make sure any filename or asset do not have spaces in their name. You could use underscore Asset_1.png and save the image. Later, use it as
logo.src = "/images/1x/Asset_1.png";
Also change the name if used elsewhere in html or css.
Related
I have 2 toggle switches, the problem I have is sperating each toggle switches to do their own thing. I'm unable to, in javascript, to make a if/else statement for my 2nd toggle switch.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Asignment 3</title>
<link rel="shortcut icon" href="https://cdn-icons-png.flaticon.com/512/136/136724.png" type="image/x-icon">
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div id="RainbowId">
<div id="mySidebar" class="sidebar">
<a class="closebtn" onclick="closeNav()">×</a>
<a>RAINBOW MODE</a>
<a><label class="switch"><input type="checkbox"><div class="slider round"><div id="text">OFF</div></div></label></a>
<a><br></a>
<a><br></a>
<a>DO NOT TOUCH</a>
<a><label class="switch2"><input type="checkbox2"><div class="slider2 round2"><div id="text2">OFF</div></div></label></a>
</div>
<button class="openbtn" id="openBtnId" onclick="openNav()">⚙️</button>
</div>
</body>
</html>
the first if statement for the frist switch works but when I copy the code i couldn't make an ID for the CHECKBOX for javascript and CSS.
function openNav() {
document.getElementById("mySidebar").style.width = "250px";
}
function closeNav() {
document.getElementById("mySidebar").style.width = "0";
}
document.addEventListener('DOMContentLoaded', function () {
var checkbox = document.querySelector('input[type="checkbox"]');
checkbox.addEventListener('change', function () {
if (checkbox.checked) {
RainbowId.classList.toggle('Rainbow');
document.getElementById('text').innerHTML = 'ON';
}
else {
RainbowId.classList.toggle("Rainbow");
document.getElementById('text').innerHTML = 'OFF';
}
});
});
I gave the 2nd switch its own classes but couldn't give the CHECKBOX its own class.
/* Rainbow background*/
.Rainbow {
height: 100%;
width: 100%;
left:0;
right: 0;
top: 0;
bottom: 0;
background: linear-gradient(#ff0000, #ff4000, #ff8000, #ffbf00, #ffff00, #bfff00, #80ff00, #40ff00, #00ff00, #00ff40, #00ff80, #00ffbf, #00ffff, #00bfff, #0080ff, #0040ff, #0000ff, #4000ff, #8000ff, #bf00ff, #ff00ff, #ff00bf, #ff0080, #ff0040, #ff0000);
position: absolute;
background-size: 1800% 1800%;
-webkit-animation: rainbow 3s ease infinite;
animation: rainbow 3s ease infinite;
}
#keyFrames rainbow {
0%{background-position:0% 82%}
25%{background-position: 50% 9.5%}
50%{background-position:100% 19%}
75%{background-position: 75% 41%}
100%{background-position:0% 82%}
}
/* Sidebar Styles */
.sidebar {
height: 100%;
width: 0;
position: fixed;
top: 0;
left: 0;
background: grey;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
overflow-x: hidden;
transition: 1s;
}
.sidebar a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: white;
display: block;
white-space: nowrap;
transition: 0.3s;
}
.closebtn {
cursor: pointer;
}
.sidebar .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 40px;
}
.openbtn {
font-size: 40px;
cursor: pointer;
border: none;
background: none;
}
.openbtn:hover {
opacity: 50%;
}
br {
user-select: none;
}
/* Toggle Switch Styles */
.switch {
position: absolute;
width: 60px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
}
.switch input {
display:none;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
transform: translateX(26px);
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
.switch #text {
user-select: none;
position: absolute;
left: 60px;
margin-left: 10px;
}
/*Toogle Switch 2*/
.switch2 {
position: absolute;
width: 60px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
}
.switch2 input {
display:none;
}
.slider2 {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: .4s;
}
.slider2:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
transition: .4s;
}
input:checked + .slider2 {
background-color: #2196F3;
}
input:focus + .slider2 {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider2:before {
transform: translateX(26px);
}
.slider2.round2 {
border-radius: 34px;
}
.slider2.round2:before {
border-radius: 50%;
}
.switch2 #text2 {
user-select: none;
position: absolute;
left: 60px;
margin-left: 10px;
}
Change your code as follows - use querySelectorAll to find all .checkbox
You'll see that both id="text" (and text2) are now class="text" this is important, since we can get the parent of the clicked checkbox and use querySelector to find the appropriate text
document.addEventListener('DOMContentLoaded', function() {
var checkboxes = document.querySelectorAll('input[type="checkbox"]');
checkboxes.forEach(checkbox => {
checkbox.addEventListener('change', function() {
checkbox.parentElement.querySelector('.text').innerHTML =
checkbox.checked ? 'ON' : 'OFF';
if (this.dataset.action === 'rainbow') {
RainbowId.classList.toggle('Rainbow');
} else {
console.log('DO NOT TOUCH as TOUCHED');
}
});
});
});
I also tidied the code a bit to be more DRY
And your html - I've put line breaks in to make it readable, but I know that may cause issues, but at least you can see easily what has changed
<div id="RainbowId">
<div id="mySidebar" class="sidebar">
<a class="closebtn" onclick="closeNav()">×</a>
<a>RAINBOW MODE</a>
<a>
<label class="switch">
<input type="checkbox" data-action="rainbow">
<div class="slider round">
<!-- added class here -->
<div id="text" class="text">OFF</div>
</div>
</label>
</a>
<a><br></a>
<a><br></a>
<a>DO NOT TOUCH</a>
<a>
<label class="switch2">
<input type="checkbox" data-action="not a rainbow">
<div class="slider2 round2">
<!-- added class here -->
<div id="text2" class="text">OFF</div>
</div>
</label>
</a>
</div>
<button class="openbtn" id="openBtnId" onclick="openNav()">⚙️</button>
</div>
It used to work and now I have no idea what I did wrong. When I toggle the mobile menu, the navigation items don't show up but when I inspect it the browser shows they're there but aren't visible.
Can someone help me figure out this menu problem? This has stumped me
I tried making the menu links appear at the top with a high z index, different combinations of selecting the a tags in the list items, still nothing.
var $hamburger = $(".hamburger");
$hamburger.on("click", function(e) {
$hamburger.toggleClass("is-active");
// Do something else, like open/close menu
});
/* Code for the toggling of the navbar */
let toggleNavStatus = false;
let toggleNav = function () {
let getMenu = document.getElementById("main-navigation");
let getSidebar = document.getElementById("bottom-nav-bar");
let getSidebarUL = document.querySelector(".side-nav ul");
let getSidebarLinks = document.querySelectorAll(".side-nav a");
if (toggleNavStatus === false) {
getSidebar.style.visibility = "visible";
getSidebar.style.opacity = "1";
getMenu.style.top = "20px";
getMenu.style.visibility = "visible";
getSidebarLinks.forEach((item, index)=>{
console.log(item);
item.style.display = "block";
item.style.opacity = "1";
})
getSidebar.style.height = "290px";
toggleNavStatus = true;
}
else if (toggleNavStatus === true) {
getSidebar.style.visibility = "hidden";
getSidebar.style.opacity = "1";
getSidebarLinks.forEach((item, index)=>{
item.style.opacity = "0";
item.style.visibility = "hidden";
item.style.display = "none";
})
getSidebar.style.height = "0";
toggleNavStatus = false;
}
}
/*
Core Styles
*/
body, html {
margin: 0;
padding: 0;
}
.container {
padding: 0 5%;
}
a, p, h1, h2, h3, h4, h5, h6, li {
font-family: 'Roboto', sans-serif;
}
p {
font-size: 1.125em;
font-family: 'Poppins', sans-serif;
}
h1 {
font-size: 2.5em;
}
h1+h2 {
font-size: 1.25em;
font-weight: normal;
}
h2 {
font-size: 1em;
}
/* Buttons */
.solid {
background: #000;
color: #fff;
font-size: var(--button-reg);
border: none;
width: 150px;
height: auto;
padding: 10px 25px;
margin-bottom: 15px;
}
.primary {
background: var(--primary);
color: #fff;
font-size: var(--button-reg);
border: none;
width: 150px;
height: auto;
padding: 10px 25px;
}
:root {
--primary: #fdd008;
--button-reg: 1em;
--button-sm: .75em;
--heading: #1a1a1a;
--p: #4c4c4c;
}
/*
Navigation
*/
#top-navbar {
display: none;
}
.sub-nav {
visibility: hidden;
height: 0;
position: relative;
z-index: 2000;
background: #fff;
display: none;
}
.quote {
display: none;
}
/* Side Nav */
#main-navigation {
margin: 0;
padding-right: 20px;
position: relative;
top: -2020px;
z-index: 2;
visibility: hidden;
}
#bottom-nav-bar {
height: 0;
width: 100%;
position: absolute;
top: 0;
right: 0;
z-index: 200;
background: #232b2b;
transition: .3s ease-in-out;
visibility: hidden;
opacity: 0;
}
nav ul li {
position: relative;
list-style: none;
text-align: right;
padding: 0px;
top: 50px;
z-index: 1200;
margin: 15px 0;
width: auto;
font-weight: bold;
font-size: 10px;
}
.side-nav a {
text-decoration: none;
padding: 0;
margin-bottom: 5px;
color: #fff;
font-size: 13px;
opacity: 0;
visibility: hidden;
display: none;
position: relative;
z-index: 200;
}
nav img {
position: absolute;
top: 15px;
left: 0;
z-index: 10;
}
/* Hamburger Menu */
#menu-button {
position: absolute;
right: 10px;
display: flex;
align-items: center;
top: 7px;
width: 60px;
}
.hamburger {
padding: 15px 15px;
display: inline-block;
cursor: pointer;
transition-property: opacity, filter;
transition-duration: 0.15s;
transition-timing-function: linear;
font: inherit;
color: inherit;
text-transform: none;
background-color: transparent;
border: 0;
margin: 0;
overflow: visible;
position: relative;
z-index: 2000;
}
.hamburger:hover {
opacity: 0.7;
cursor: pointer;
}
.hamburger.is-active:hover {
opacity: 0.7;
cursor: pointer;
}
.hamburger.is-active .hamburger-inner, .hamburger.is-active .hamburger-inner::before, .hamburger.is-active .hamburger-inner::after {
background-color: #fff;
}
.hamburger-box {
width: 40px;
height: 24px;
display: inline-block;
position: relative;
z-index: 2000;
}
.hamburger-inner {
display: block;
top: 50%;
margin-top: -2px;
}
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
width: 30px;
height: 3px;
background-color: #fff;
border-radius: 4px;
position: absolute;
transition-property: transform;
transition-duration: 0.15s;
transition-timing-function: ease;
}
.hamburger-inner::before, .hamburger-inner::after {
content: "";
display: block;
}
.hamburger-inner::before {
top: -10px;
}
.hamburger-inner::after {
bottom: -10px;
}
/* * Spring */
.hamburger--spring .hamburger-inner {
top: 2px;
transition: background-color 0s 0.13s linear;
transition-delay: .22s;
}
.hamburger--spring .hamburger-inner::before {
top: 10px;
transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
transition-delay: .22s;
}
.hamburger--spring .hamburger-inner::after {
top: 20px;
transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
transition-delay: .22s;
}
.hamburger--spring.is-active .hamburger-inner {
transition-delay: 0.22s;
background-color: transparent !important;
}
.hamburger--spring.is-active .hamburger-inner::before {
top: 0;
transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
transform: translate3d(0, 10px, 0) rotate(45deg);
}
.hamburger--spring.is-active .hamburger-inner::after {
top: 0;
transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
transform: translate3d(0, 10px, 0) rotate(-45deg);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- Stylesheet -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/hamburgers.css">
<link rel="stylesheet" href="https://unpkg.com/aos#next/dist/aos.css" />
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Poppins|Roboto&display=swap" rel="stylesheet">
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Valley Construction Supply | Marysville, WA</title>
</head>
<header>
<button id="menu-button" class="hamburger hamburger--spring" onclick="toggleNav()" type="button">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
<!-- Top Navigation Bar -->
<div id="top-navbar">
<div class="container">
<img src="" alt="valley_construction_supply_logo">
<div class="location">
<div class="icon">
<!-- icon -->
</div>
<div class="location-info">
<p>Marysville, WA</p>
<p>(800) 559-8566</p>
</div>
</div>
<div class="location">
<div class="icon">
<!-- icon -->
</div>
<div class="location-info">
<p>Tacoma, WA</p>
<p>(800) 922-2082</p>
</div>
</div>
<div class="location">
<div class="icon">
<!-- icon -->
</div>
<div class="location-info">
<p>Hours</p>
<p>Mon-Fri: 9am - 5pm</p>
</div>
</div>
</div>
</div>
<nav>
<!-- Desktop Navigation -->
<img src="images/vcs.png" alt="" height="60px">
<div id="bottom-nav-bar" class="side-nav" class="container">
<ul id="main-navigation" class="side-nav">
<li>HOME</li>
<li>ABOUT</li>
<ul class="sub-nav">
<li>JOBS</li>
<li>ABOUT VCS</li>
</ul>
<li>SERVICES</li>
<ul class="sub-nav">
<li>REBAR FABRICATION</li>
<li>HOMECONCRETE</li>
<li>BUILDING MATERIALS</li>
<li>EQUIPMENT AND TOOLS</li>
</ul>
<li>PRODUCTS</li>
<li>PROMOTIONS</li>
<li>CONTACT</li>
<ul class="sub-nav">
<li>APPLY FOR CREDIT</li>
</ul>
</ul>
<button class="quote" type="button">
REQUEST A QUOTE
</button>
</div>
</nav>
</header>
<body>
</body>
</html>
when you click the hamburger menu the navigation list is supposed to appear from the top with the slide down menu. But no links show up.
The problem is in your toggleNav() function. If you look at this part of the code:
if (toggleNavStatus === false) {
getSidebarLinks.forEach((item, index)=>{
console.log(item);
// here, you are setting display back to block, BUT visibility stays hidden!
item.style.display = "block";
item.style.opacity = "1";
})
}
else if (toggleNavStatus === true) {
getSidebarLinks.forEach((item, index)=>{
item.style.opacity = "0";
// here, you are setting display to none AND visibility to hidden
item.style.visibility = "hidden";
item.style.display = "none";
})
}
Side note for you: In order to hide an element from the page, you don't need to set both visibility:hidden and display:none. Either one will do the job, although they differ in details. If you are interested, you can learn more about these differences in the following question: What is the difference between visibility:hidden and display:none?
I'm trying to build a website and am facing serious trouble with the following. So let's say that the user reloads or clicks on a link to another page on the site, I want to show the loading page before we arrive at the page we are looking to go to. Here's my code and I really am having some trouble. Any suggestions would be much appreciated, but I would really like to do this without adding or removing too much. I tried to play around with the javascript but alas, it did not work. If you have suggestions about that, please let me know as well. Thank you so much!
index.html
<!DOCTYPE html>
<meta charset = 'UTF-8'>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "styles.css">
<link rel = "stylesheet" href = "animate.css">
<head>
<script src = "scripts.js"></script>
<a href="#">
<img class = "animated zoomIn" src = "image.png">
</a>
<div id = "navbar" class = "overlay">
×
<div class = "overlay-content">
Home
About Us
Gallery
The Podcast
More
Merch
Appearances
Contact Us
We're Hiring!
<div class = "line"></div>
</div>
</div>
<div class = "animated slideInLeft" style = "text-align: center;">
<span style="font-size:30px;cursor:pointer;" onclick="openNav()">
☰ Open Me!
</span>
</div>
</head>
<body>
<h1 style ="text-align:center">
</body>
styles.css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
#font-face {
font-family: Paintball;
font-weight: bold;
src: url(paintball_web.woff);
}
/* Header Properties */
body{
background-color: navy;
font-family: Paintball;
}
img {
display: block;
margin-left: auto;
margin-right: auto;
width: 40%;
}
/*Navigation Bar Properties */
.overlay {
height: 100%;
width: 0;
position: absolute;
z-index: 1;
top: 0;
text-align: center;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-x: 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;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
div span{
color:#42f459;
}
/* Loader Properties */
.wrap {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.text {
color: #42f459;
display: inline-block;
margin-left: 5px;
}
.bounceball {
position: relative;
display: inline-block;
height: 37px;
width: 15px;
}
.bounceball:before {
position: absolute;
content: '';
display: block;
top: 0;
width: 15px;
height: 15px;
border-radius: 50%;
background-color: #42f459;
-webkit-transform-origin: 50%;
transform-origin: 50%;
-webkit-animation: bounce 500ms alternate infinite ease;
animation: bounce 500ms alternate infinite ease;
}
#-webkit-keyframes bounce {
0% {
top: 30px;
height: 5px;
border-radius: 60px 60px 20px 20px;
-webkit-transform: scaleX(2);
transform: scaleX(2);
}
35% {
height: 15px;
border-radius: 50%;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
100% {
top: 0;
}
}
#keyframes bounce {
0% {
top: 30px;
height: 5px;
border-radius: 60px 60px 20px 20px;
-webkit-transform: scaleX(2);
transform: scaleX(2);
}
35% {
height: 15px;
border-radius: 50%;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
100% {
top: 0;
}
}
Welcome.html
<!DOCTYPE html>
<meta charset = 'UTF-8'>
<meta http-equiv="Refresh" content="4; url=index.html" />
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "styles.css">
<div class="wrap">
<div class="loading">
<div class="bounceball"></div>
<div class="text">NOW LOADING</div>
</div>
</div>
scripts.js
function openNav() {
document.getElementById("navbar").style.width = "100%";
}
function closeNav() {
document.getElementById("navbar").style.width = "0%";
}
document.addEventListener('DOMContentLoaded',function(){
if(document.readyState === 'complete'){
alert("loaded");
}
}
)
document.addEventListener('readystatechange',function(){
if (document.readystate === 'loading'){
window.location = "Welcome.html";
}
}
)
This is my html and JavaScript code I want help in this task, After I go back and forth into the submenus several times, the padding gets messed up for the elements and the icons get cut off.
Some times it work properly but when I click back arrow very quickly Its messed the paddings.
I am sharing screenshot also.
$(document).ready(function() {
// Variable declaration...
var left, width, newLeft;
// Add the "top-menu" class to the top level ul...
$('.mobile-menu').children('ul').addClass('top-menu');
// Add buttons to items that have submenus...
$('.has_child_menu').append('<button class="arrow"><i class="fa fa-chevron-right"></i></button>');
// Mobile menu toggle functionality
$('.menu-toggle').on('click', function() {
// Detect whether the mobile menu is being displayed...
display = $('.mobile-menu').css("display");
if (display === 'none') {
// Display the menu...
$('.mobile-menu').css("display", "block");
} else {
// Hide the mobile menu...
$('.mobile-menu').css("display", "none");
// and reset the mobile menu...
$('.current-menu').removeClass('current-menu');
$('.top-menu').css("left", "0");
$('.back-button').css("display", "none");
}
});
// Functionality to reveal the submenus...
$('.arrow').on('click', function() {
// The .current-menu will no longer be current, so remove that class...
$('.current-menu').removeClass('current-menu');
// Turn on the display property of the child menu
$(this).siblings('ul').css("display", "block").addClass('current-menu');
left = parseFloat($('.top-menu').css("left"));
width = Math.round($('.mobile').width());
newLeft = left - width;
// Slide the new menu leftwards (into the .mobile viewport)...
$('.top-menu').css("left", newLeft);
// Also display the "back button" (if it is hidden)...
if ($('.back-button').css("display") === "none") {
$('.back-button').css("display", "flex");
}
});
// Functionality to return to parent menus...
$('.back-button').on('click', function() {
// Hide the back button (if the current menu is the top menu)...
if ($('.current-menu').parent().parent().hasClass('top-menu')) {
$('.back-button').css("display", "none");
}
left = parseFloat($('.top-menu').css("left"));
width = Math.round($('.mobile').width());
newLeft = left + width;
// Slide the new menu leftwards (into the .mobile viewport)...
$('.top-menu').css("left", newLeft);
// Allow 0.25 seconds for the css transition to finish...
window.setTimeout(function() {
// Hide the out-going .current-menu...
$('.current-menu').css("display", "none");
// Add the .current-menu to the new current menu...
$('.current-menu').parent().parent().addClass('current-menu');
// Remove the .current-menu class from the out-going submenu...
$('.current-menu .current-menu').removeClass('current-menu');
}, 250);
});
});
body {
margin: 0px;
padding: 0px;
font-family: 'Segoe UI';
}
.smart-list-container {
max-width: 95%;
margin: 10px auto;
}
.smart-list-header {
background: #265a88;
padding: 10px 0px;
}
.current-page-title {
text-align: center;
}
.current-page-title h3 {
color: #fff;
margin: 0px;
}
.smart-row {}
.smart-list-icon {
float: left;
width: 60px;
}
.smart-list-icon .fa {
font-size: 35px;
padding-right: 20px;
}
.smart-descrption {
float: right;
width: calc(100% - 60px);
}
.smart-text {
float: left;
}
.smart-text h3 {
margin: 0;
}
.smart-right-btn {
float: right;
}
.smart-right-btn .fa {
font-size: 28px;
}
.sub-list {
display: none;
}
.slide-smart-page {
left: -100%;
position: absolute;
transition: 0.5s all ease;
}
body .slide-smart-sub-page {
display: block;
}
.sub-list {
background: #2196F3;
height: 300px;
}
/*******switch-btn*******/
.smart-right-btn .switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
margin-bottom: 0px;
}
.smart-right-btn .switch input {
display: none;
}
.smart-right-btn .slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.smart-right-btn .slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
.smart-right-btn input:checked+.slider {
background-color: #2196F3;
}
.smart-right-btn input:focus+.slider {
box-shadow: 0 0 1px #2196F3;
}
.smart-right-btn input:checked+.slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.smart-right-btn .slider.round {
border-radius: 34px;
}
.smart-right-btn .slider.round:before {
border-radius: 50%;
}
/*******switch-btn-end*******/
.smart-list-container .mobile {
background: #fff;
overflow: hidden;
/* NB: Remove this overflow property if you want to get a better idea of what is happening "under the hood" */
position: relative;
}
.smart-list-container .mobile-controls {
background: #337ab7;
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
padding: 10px;
}
.smart-list-container .mobile-controls button {
background: none;
border: none;
border-radius: 8px;
color: #fff;
height: 40px;
padding: 0 15px;
outline: none;
font-size: 18px;
}
.smart-list-container button:hover {
cursor: pointer;
}
.smart-list-container .mobile-controls .back-button {
display: none;
}
.smart-list-container .mobile-menu {
background: #fff;
display: none;
height: 100%;
left: 0;
position: absolute;
width: 100%;
z-index: 10;
}
.smart-list-container ul {
margin: 0;
padding: 0;
width: 100%;
position: absolute;
transition: 0.25s;
}
.smart-list-container li {
border-bottom: 1px solid #ccc;
display: flex;
justify-content: space-between;
list-style: none;
}
.smart-list-container li a {
color: #000;
flex: 3;
padding: 10px 10px;
text-decoration: none;
}
.smart-list-container li button {
background: none;
border: 0;
flex: 1;
text-align: right;
padding: 10px;
}
.smart-list-container div>ul {
top: 0;
left: 0;
}
.smart-list-container div>ul ul {
display: none;
top: 0;
left: 100%;
}
/* Content styles below here */
.smart-list-container section {
line-height: 1.5;
padding: 20px;
}
.smart-list-container h1 {
font-size: 1.5rem;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="css/style.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="smart-list-container">
<div class="mobile">
<div class="mobile-controls">
<button class="menu-toggle">Page Name</button>
<button class="back-button"><i class="fa fa-chevron-left"></i></button>
</div>
<div class="mobile-menu">
<ul>
<li>
<a href="">
<div class="smart-row">
<div class="smart-list-item">
<div class="smart-list-icon">
<span class="fa fa-cog"></span>
</div>
<div class="smart-descrption">
<div class="smart-text">
<h3>Face ID</h3>
</div>
<div class="smart-right-btn">
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
</div>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</div>
</div>
</a>
</li>
<li class="has_child_menu">
<a href="">
<div class="smart-row">
<div class="smart-list-item">
<div class="smart-list-icon">
<span class="fa fa-cog"></span>
</div>
<div class="smart-descrption">
<div class="smart-text">
<h3>Face ID</h3>
</div>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</div>
</div>
</a>
<ul>
<li>Sub-list</li>
<li class="has_child_menu">
Sub-list-inner
<ul>
<li>Sub-list-inner</li>
<li>Sub-list-inner</li>
<li class="has_child_menu">
Sub-list-inner
<ul>
<li>Sub-list-inner</li>
</ul>
</li>
<li>Sub-list-inner</li>
<li>Sub-list-inner</li>
</ul>
</li>
<li>Sub-list</li>
<li class="has_child_menu">
Sub-list-inner
<ul>
<li>Sub-list-inner</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<section>
<article>
<h1>Mobile menu demo</h1>
<p>Click the button above to see the mobile menu in action!</p>
<p>The menu functionality was inspired by the Settings app in iOS.</p>
<p>This implementation uses some jQuery and flexbox. The orginal code was written for a WordPress theme, so absolute positioning was used (rather than fixed positioning - which is easier) to avoid conflicts with the admin bar (when the user is logged-in).</p>
</article>
</section>
</div>
</div>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Do transition: 0.15s; instead of transition: 0.25s; in css file.
I'm doing a custom drop-down navigation but when it toggles the logo, in this codepen represented by the blue div, goes to the bottom of the navigation. I've been trying to work around this for a while now and would appreciate any help.
Here is my code:
HTML
<div class='container-fluid nav'>
<div class='container'>
<div class = 'nav__btn--toggle u-inlineBlock u-center' onclick="animateNavbarToggle(this); toggleDropdown();">
<div class = 'nav__btn bar1'></div>
<div class = 'nav__btn bar2'></div>
<div class = 'nav__btn bar3'></div>
</div>
<ul class = "nav__dropdown">
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Blog</li>
<li>Contact</li>
</ul>
<div class='nav__brand u-inlineBlock'>
logo
</div>
</div>
</div>
CSS
.nav__dropdown {
padding-left: 0;
margin-top: 75px;
list-style: none;
text-align: center;
box-sizing: border-box;
display: none;
}
.nav__dropdown li {
font-size: 20px;
padding: 25px;
width: 40%;
background: white;
border-bottom: 1px solid black;
}
.nav__dropdown li:last-child{
border-bottom: none;
}
.nav__dropdown li:hover{
background: black;
color: seashell
}
.u-inlineBlock {
display: inline-block;
}
JS
function toggleDropdown(x) {
$('.nav__dropdown').slideToggle(500);
}
After this, I'll try to add a sub menu on the right side, so if you could point me in the right path for that as well that would be great
(Notice that this is just a bonus for me, I don't care if you don't help me with that so don't downvote for being too broad or something like that. I also saw some similar questions but they did not help)
Thanks in advance!
Just move the logo before the ul, and remove the margin-top from the ul. And if you want the toggle button and submenu to be flush with the white header, remove .nav { height: 75px; }
function animateNavbarToggle(x) {
x.classList.toggle("toggled");
}
function toggleDropdown(x) {
$('.nav__dropdown').slideToggle(500);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<style>
body {
background-color: pink;
height: 2000px;
}
/*------------------------------------*\
#NAVIGATION
\*------------------------------------*/
.nav {
background-color: white;
height: 75px;
}
.nav__brand {
height: 68px;
width: 227px;
background-color: lightblue;
text-align: center;
}
/**
* Navigation dropdown button
*/
.nav__btn {
width: 22PX;
height: 3px;
background-color: black;
margin: 4px 0;
}
.nav__btn--toggle {
cursor: pointer;
}
.bar1, .bar2, .bar3 {
width: 22PX;
height: 3px;
background-color: coral;
margin: 4px 0;
transition: 0.4s;
}
/* Rotate first bar */
.toggled .bar1 {
-webkit-transform: rotate(-45deg) translate(-5px, 5px);
transform: rotate(-45deg) translate(-5px, 5px);
}
/* Fade out the second bar */
.toggled .bar2 {
opacity: 0;
}
/* Rotate last bar */
.toggled .bar3 {
-webkit-transform: rotate(45deg) translate(-4px, -4px);
transform: rotate(45deg) translate(-4px, -6px);
}
/**
* Navigation Dropdown
*/
.nav__dropdown {
padding-left: 0;
list-style: none;
text-align: center;
box-sizing: border-box;
display: none;
}
.nav__dropdown li {
font-size: 20px;
padding: 25px;
width: 40%;
background: white;
border-bottom: 1px solid black;
}
.nav__dropdown li:last-child {
border-bottom: none;
}
.nav__dropdown li:hover {
background: black;
color: seashell;
}
/*------------------------------------*\
#UTILITIES
\*------------------------------------*/
.u-inlineBlock {
display: inline-block;
}
.u-center {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
</style>
<div class='container-fluid nav'>
<div class='container'>
<div class='nav__btn--toggle u-inlineBlock u-center' onclick="animateNavbarToggle(this); toggleDropdown();">
<div class='nav__btn bar1'></div>
<div class='nav__btn bar2'></div>
<div class='nav__btn bar3'></div>
</div>
<div class='nav__brand u-inlineBlock'>
logo
</div>
<ul class="nav__dropdown">
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
</div>
try adding position: fixed to your nav__dropdown CSS
.nav__dropdown {
padding-left: 0;
margin-top: 75px;
list-style: none;
text-align: center;
box-sizing: border-box;
display: none;
position: fixed;
}
Position fixed essentially removes the content from the flow of the document window, which makes it not cause any interactions with your logo.
More on position fixed here