js not running for one of two identical html files - javascript

I have a website that by way of media query shows hamburger button when under so many px. When you click hamburger it shows vertically stacked menu options (pretty straight forward). I have an event listener that is supposed to show/hide the mobile menu when one the items is clicked, (so when user clicks something the dropdown menu doesn't just stay there).
These items have id="nav-mobile" and app.js targets them accordingly.
My issue is that when one link is clicked it successfully hides the dropdownworks and the other one does not. I have literally copied and pasted the html files to be identical to one another, save the page title and an h1 contents.
Also I'm using Swup js for page transitions, which seems to have its own set of problems but as far as I can tell isn't the issue. I'm new to JS so I'm hoping this is some glaring novice mistake.
Here is music.html (this one does what its supposed to for some reason)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script defer src="app.js"></script>
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
<title>Misenheimer | Music</title>
</head>
<body>
<header>
<div class="nav-container">
<nav>
<div class="icon-container">
<div class= nav-icon><img class="computer-icon" src="./images/computer-4.png" alt="computer icon"></img></div>
</div>
<button class="hamburger" id="hamburger"><i class="fas fa-bars"></i></button>
<ul class="nav-menu" id="nav-menu">
<li class="nav-item"><a href='/music.html' class=nav-link>music.</a></li>
<li class="nav-item"><a href='/about.html' class=nav-link>about.</a></li>
<li id="nav-mobile" class="nav-item-mobile" ><a href='/music.html' class=nav-link>music</a></li>
<li id="nav-mobile" class="nav-item-mobile" ><a href='/about.html' class=nav-link>about</a></li>
</ul>
</nav>
</div>
</header>
<main id="swup" class="transition-fade">
<h1>Music</h1>
</main>
</body>
</html>
Here is about.html (this does not hide the menu after it is selected)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script defer src="app.js"></script>
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
<title>Misenheimer | About</title>
</head>
<body>
<header>
<div class="nav-container">
<nav>
<div class="icon-container">
<div class= nav-icon><img class="computer-icon" src="./images/computer-4.png" alt="computer icon"></img></div>
</div>
<button class="hamburger" id="hamburger"><i class="fas fa-bars"></i></button>
<ul class="nav-menu" id="nav-menu">
<li class="nav-item"><a href='/music.html' class=nav-link>music.</a></li>
<li class="nav-item"><a href='/about.html' class=nav-link>about.</a></li>
<li id="nav-mobile" class="nav-item-mobile" ><a href='/music.html' class=nav-link>music</a></li>
<li id="nav-mobile" class="nav-item-mobile" ><a href='/about.html' class=nav-link>about</a></li>
</ul>
</nav>
</div>
</header>
<main id="swup" class="transition-fade">
<h1>About</h1>
</main>
</body>
</html>
Here is my JS file:
const swup = new Swup();
const hamburger = document.getElementById('hamburger');
const navMenu = document.getElementById('nav-menu');
const navItem = document.getElementById('nav-mobile');
hamburger.addEventListener('click', () => {
navMenu.classList.toggle('show');
});
// This toggles mobile menu when a menu item is clicked.
navItem.addEventListener('click', () => {
navMenu.classList.toggle('show');
});
Here is CSS (including this in case there is issue with Swup that someone may know of):
:root {
--bghome: black;
--bgmusic: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);
--bgabout: linear-gradient(to top, #d299c2 0%, #fef9d7 100%);
}
html, body {
margin: 0;
padding: 0;
height: 100%;
}
/*-----------------------------Navigation---------------------------*/
.nav-container {
width: 100%;
padding: 0;
margin: 0;
border: 0;
}
nav {
display: flex;
flex-wrap: wrap;
align-items: center;
padding: 0;
margin: 0;
background-color: #eee;
}
/* Home page icon styles */
.icon-container {
display: flex;
align-items: center;
justify-items: center;
height: 60px;
padding: 0;
margin: 0;
}
.nav-icon {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 120px;
padding: 0;
transition: 0.6s ease;
}
.nav-icon:hover {
transition: 0.6s ease;
background-color: #048383;
}
.computer-link {
padding: 0px 40px;
}
.computer-icon {
padding: 0;
transition: 0.5s ease;
}
.computer-icon:hover {
transform: rotate(5deg);
transition: 0.5s ease;
}
/* Navigation Menu (excluding home page icon) */
.nav-item-mobile {
display: none;
}
.nav-menu {
display: flex;
align-items: center;
justify-items: center;
height: 60px;
padding: 0;
margin: 0;
list-style-type: none;
}
.hamburger {
display: none;
margin-left: auto;
margin-right: 20px;
padding: 10px;
background-color: transparent;
border: none;
color: #000;
font-size: 30px;
cursor: pointer;
}
.hamburger:focus {
outline: none;
}
.nav-item {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 120px;
padding: 0;
transition: 0.6s ease;
}
.nav-item:hover {
transition: 0.6s ease;
background-color: #048383;
}
.nav-link {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: inherit;
font-family: Arial, Helvetica, sans-serif;
font-size: 23px;
color: #444;
text-decoration: none;
}
/*----- Page Transition ------ */
.transition-fade {
transition: 0.6s;
opacity: 1;
}
html.is-animating .transition-fade {
opacity: 0;
}
#media screen and (max-width: 750px){
.nav-menu {
display: none;
flex-direction: column;
}
.nav-item {
display: none;
}
.nav-item-mobile {
display: flex;
width: 100%;
}
.nav-menu.show {
display: flex;
width: 100%;
}
.hamburger {
display: block;
}
}

I figured out a way to make it work. Again, I'm new to JS. So, maybe this is just a band-aid. What I did was make separate eventhandlers for each link (each having a different id to target). This solved my problem. What seemed to be happening was only the first item with targeted id was running the script. Maybe that's a JS thing. You can't have multiple objects with the same id, unlike a class.
const swup = new Swup();
const hamburger = document.getElementById('hamburger');
const navMenu = document.getElementById('nav-menu');
const navMusic = document.getElementById('nav-music');
const navAbout = document.getElementById('nav-about');
hamburger.addEventListener('click', () => {
navMenu.classList.toggle('show');
});
// This toggles mobile menu when a menu item is clicked.
navMusic.addEventListener('click', () => {
navMenu.classList.toggle('show');
});
navAbout.addEventListener('click', () => {
navMenu.classList.toggle('show');
});

Related

Opening and Closing dropdown menu when clicking outside

For my website I want to make my features button open a list of content and closing it when clicking outside of the button. However if I try to apply my code (which I thought to be correct) my dropdown list disappears for any reason. Does anyone know how to stop my dropdown list from disappearing? My code is the following:
// Rotation arrow icon on click
const acc = document.getElementsByClassName("switch");
let i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
this.classList.toggle("iconUp");
});
}
// Opening dropdown menu on click
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(Event) {
if (!Event.target.matches('.dropbtn')) {
const dropdowns = document.getElementsByClassName("dropdown-content");
let i;
for (i = 0; i < dropdowns.length; i++) {
let openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
/* General styling attributes */
* {
margin:0;
padding:0;
border:0;
outline:0;
text-decoration:none;
list-style:none;
box-sizing: border-box;
}
:root {
--color-primary: #4EC843;
--color-secondary: #387CFF;
--color-dashboard: purple;
--color-hover: #20d62c;
--color-variant: linear-gradient(30deg, #1565FF, #9FC0ff);
--container-width-lg: 80%;
--container-width-md: 90%;
--container-width-sm: 94%;
--dashboard-width: clamp(210px, 22vw, 325px);
--transition: all 400ms ease;
--tranition-button: all 800ms ease;
}
body * {
font-family: "Open Sans", sans-serif;
line-height: 1.5;
}
.container {
width: var(--container-width-lg);
margin: 0 auto;
}
h1, h2, h3, h4 h5{
line-height:inherit;
}
h1 {
font-size:3rem;
}
h2 {
font-size: 2.5rem;
}
h3 {
font-size:2.063rem;
}
h4 {
font-size:1.125rem;
}
h5 {
font-size:0.938rem;
}
hr {
display: flex;
opacity: 15%;
width: 3.125rem;
text-align: center;
}
img {
width:100%;
height:auto;
}
/* Large screen size website design */
/* Navigation Menu styling Index.html */
nav {
width:100%;
height:4.5rem;
position:fixed;
top:0;
z-index:11;
background: white;
opacity: 98.2%;
}
.nav__container {
height:4.5rem;
display:flex;
justify-content: space-between;
align-items: center;
}
.nav__container li, a {
font-size:0.95rem;
font-weight:600;
color:black;
}
.nav__menu button {
background:none;
}
.Hamburger {
display:none;
}
.nav__menu {
display:flex;
align-items: center;
gap:3.5rem;
}
.nav__menu a:hover {
transition: var(--transition);
color:grey;
}
.Login_nav {
display: block;
}
.Login:hover {
transition: var(--transition);
color:grey;
}
.switchIconRotate {
transform-origin: center;
transition: 0.2s;
}
.fa-angle-down {
color:#6161F2
}
.iconUp .fa-solid {
transform-origin: center;
transform: rotate(180deg);
}
#Demobutton {
cursor:pointer;
background-color: var(--color-primary);
border-radius:2.125rem;
border:none;
color: white;
width:8.125rem;
height:2.188rem;
font-weight:600;
font-size:0.938rem;
}
#Demobutton:hover {
background-color: #20D62C;
transition:var(--tranition-button);
}
#startingbackground {
content:'';
position:absolute;
height:100%;
width:100%;
background: var(--color-variant);
}
.dropbtn {
cursor: pointer;
}
.show {
display: flex;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
visibility: hidden;
position: absolute;
background-color: white;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 11;
border-radius: 0.4rem;
padding: 2rem;
gap:1.5rem;
flex-direction: column;
opacity: 100%;
}
/* Header styling Index.html */
header {
position: relative;
margin-top:4.5rem;
margin-left:3.125rem;
overflow:hidden;
height:49.313rem;
margin-bottom: 5rem;
}
header h1 {
color:white;
}
header p {
color:#CECECE;
font-size: 1rem;
}
.header__container {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap:5rem;
height: 25rem;
margin-top:2rem;
}
.header__left {
text-align: center;
}
.header__left p {
margin: 1rem 0rem 2.375rem;
}
#Trialbutton {
background-color: var(--color-primary);
border-radius:0.625rem;
border-style:solid;
border:none;
cursor:pointer;
font-size: 1rem;
color:white;
height:3.175rem;
width:17.563rem;
}
#Requestbutton {
background-color:white;
border-radius:0.625rem;
border-style:solid;
border:none;
cursor:pointer;
font-size: 1rem;
color:#454545;
height:3.175rem;
width:10.563rem;
}
#Trialbutton:hover {
transition:var(--tranition-button);
background-color:#20D62C;
}
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>DraftFlex</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- Font-families -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght#400;500;600&display=swap" rel="stylesheet">
<!-- Fontawesome Icon -->
<script src="https://kit.fontawesome.com/98d94e81b6.js" crossorigin="anonymous"></script>
<!-- Iconscout CDN -->
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">
</head>
<body>
<div id="startingbackground">
<!-- Start of Navigation Menu -->
<nav>
<div class="container nav__container">
<img src="/icons/logo.svg" alt="logo">
<div class="nav__menu">
<div class="dropdown">
<button class="dropbtn switch" onclick="myFunction()">Features <i class="fa-solid fa-angle-down switchIconRotate"></i></button>
<div class="dropdown-content" id="myDropdown">
Link1
Link2
Link3
</div>
</div>
Pricing
Contact Us
</div>
<div class="Login_nav">
Login
<form><button id="Demobutton">Get demo</button></form>
</div>
<div class="Hamburger">
<button id="open-menu-btn"><i class="uil uil-bars"></i></button>
<button id="open-menu-btn"><i class="uil uil-multiply"></i></button>
</div>
</div>
</nav>
<!-- End of Navigation Menu -->
<!-- Start of Header -->
<header>
<div class="container header__container">
<div class="header__left">
<h1>The all-in-one draft to <br> deal platform</h1>
<p>Our product enables your team to create, approve, sign and <br> manage your contracts in one workspace</p>
<div class="Trialgroup">
<form><button id="Trialbutton">Start Free 14-day Trial</button></form>
<form><button id="Requestbutton">Request a Demo</button></form>
</div>
</div>
<div class="header_right">
</div>
</div>
</header>
</div>
first of all your dropdown doesn't get the class show after fixing this then your styles in class show will be overwritten by the dropdown styles itself you have to use !important
.show {
display: flex !important;
visibility: visible !important;
}

Icons not Appearing and Animation not Working

I'm trying to use icons from fontawesome to create a menu that will pop up on the mobile version of my site. However, the icons do not appear and are not clickable, thus the animation that makes the menu pop up does not work. In addition, some of the items do not have their own row, as seen in the gallery and cv section, and the text on my homepage is not centered. Could someone please explain how to fix these issues? Thank you![enter image description here][1]
*{
margin: 0;
padding: 0;
font-family: 'Noto Sans', sans-serif;
}
.header{
min-height: 100vh;
width: 100%;
background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url(images/banner.png);
background-position: center;
background-size: cover;
position: relative;
}
nav{
display: flex;
padding: 2% 6%;
justify-content: space-between;
align-items: center;
}
nav a{
color: #fff;
text-decoration: none;
font-size: 18px;
}
nav a:hover{
color:#f44336;
transition: .4s;
}
.nav-links{
flex:1;
text-align: right;
}
.nav-links ul li{
list-style: none;
display: inline-block;
padding: 8px 12px;
position: relative;
}
.nav-links ul li a{
color: #fff;
text-decoration: none;
font-size: 13px;
}
nav ul li a:hover{
color:#f44336;
transition: .4s;
}
.text-box{
width: 90%;
color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
}
.text-box h1{
font-size: 54px;
}
.text-box p{
margin: 10px 0 40px;
font-size: 14px;
color: #fff;
}
nav .fa{
display: none;
}
#media(max-width: 700px){
.text-box h1{
font-size: 20px;
}
.navi-links ul li{
display: block;
}
.nav-links{
position: absolute;
background: #f44336;
height: 100vh;
width: 200px;
top: 0;
right: -200px;
text-align: left;
z-index: 2;
transition: 1s;
}
nav .fa{
display: block;
color: #fff;
margin: 10px;
font-size: 22px;
cursor: pointer;
}
.nav-links ul{
padding: 30px;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="with=device-width, initial-scale=">
<title>Personal Homepage</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght#400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#fortawesome/fontawesome-free#5.15.4/css/fontawesome.min.css">
<style>
.text-box{
background-color: transparent;
color: #FFF;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>
<section class="header">
<nav>
AMANDA YEE
<div class="nav-links" id="navLinks">
<i class="fa fa-times-circle" onclick="hideMenu()"></i>
<ul>
<li>ABOUT</li>
<li>GALLERY</li>
<li>CV</li>
<li>CONTACT</li>
</ul>
</div>
<i class="fa fa-bars" onclick="showMenu()"></i>
</nav>
<div class="text-box">
<h1>NICE TO MEET YOU</h1>
<p>Hi! My name is Amanda Yee and I'm a User Experience Designer studying at Pratt.
</p>
</div>
</section>
<!--Javascript for Toggle Menu-->
<script>
var navLinks = document.getElementbyId("navLinks");
function showMenu(){
navLinks.style.right = "0";
}
function hideMenu(){
navLinks.style.right = "-200px";
}
</script>
</body>
</html>
To use font awesome 5 icons, go to their official website and create a kit using your email address. They will provide you a script tag add that script tag in your HTML file's head and now you are good to use fa icons. One thing to note is that now fa fa-bars will be fas fa-bars.
The thing why Gallery and CV are showing in a row is you have set wrong class name in your media query:
.navi-links ul li {
display: block;
}
In addition to this, I will propose few changes to your file-
In the 4th line replace the viewport meta tag with the below code:
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
In your script document.getElementbyId is not properly written replace that line with the below code:
var navLinks = document.getElementById("navLinks");
I hope it worked as you expected.

hamburger toggler animation doesn't work immediately after refresh of page

hamburger toggler animation doesn't work immediately after i refresh the page, it starts working after i hit it one time. the mainMenu appears without animation the first time i hit the openMenu. i dont understand how its possible working after the second time i hit it. there is something i am missing probably. why is this happening?
const mainMenu = document.querySelector(".mainMenu");
const closeMenu = document.querySelector(".closeMenu");
const openMenu = document.querySelector(".openMenu");
openMenu.addEventListener("click", () => {
mainMenu.style.display = "flex";
mainMenu.style.top = "0";
});
closeMenu.addEventListener("click", () => {
mainMenu.style.top = "-100%";
});
.row .left {
height: 98vh;
background-color: #5a2a19;
}
.row .right {
height: 98vh;
background-color: #ff640b;
}
.row .right nav .openMenu {
font-size: 3em;
margin: 10px;
position: absolute;
top: 0;
right: 0;
cursor: pointer;
}
.row .right nav .mainMenu {
background-color: #ff640b;
height: 100vh;
display: none;
position: fixed;
top: 0;
right: 0;
left: 50%;
z-index: 10;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-transition: top 1s ease;
transition: top 1s ease;
list-style: none;
}
.row .right nav .mainMenu li a {
display: inline-block;
padding: 15px;
text-decoration: none;
color: #5a2a19;
font-size: 1.5em;
font-weight: bold;
}
.row .right nav .mainMenu li a:hover {
color: #e6e8de;
}
.row .right nav .mainMenu .closeMenu {
font-size: 2em;
margin: 20px;
position: absolute;
top: 0;
right: 0;
cursor: pointer;
}
.row .right nav .mainMenu .icons i {
display: inline-block;
padding: 12px;
font-size: 2.2em;
color: #5a2a19;
cursor: pointer;
}
.row .right nav .mainMenu .bi-facebook:hover {
color: #4267b2;
}
.row .right nav .mainMenu .bi-instagram:hover {
color: #e1306c;
}
/*# sourceMappingURL=style.css.map */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.5.0/font/bootstrap-icons.css">
<link rel="stylesheet" type="text/css" href="css/style.css" />
<title>Bees cafe</title>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ"
crossorigin="anonymous"
></script>
<script src="js/index.js" defer></script>
</head>
<body>
<header>
<div class="row">
<div class="col-12 col-md-6 left"></div>
<div class="col-12 col-md-6 right">
<nav>
<div class="openMenu"><i class="bi bi-list"></i></div>
<ul class="mainMenu">
<li>lala</li>
<li>lala</li>
<li>lala</li>
<div class="closeMenu"><i class="bi bi-x-lg"></i></div>
<span class="icons">
<i class="bi bi-facebook"></i>
<i class="bi bi-instagram"></i>
</span>
</ul>
</nav>
</div>
</div>
</header>
</body>
</html>
If we are setting display to flex when opening for .mainMenu, but never when closing, we might as well set it to flex by default. This fixes the initial problem, but causes the menu to be open by default, so we can fix this by adding the same styling we add when closing, to the initial css (setting top: -100%; in .mainMenu).
const mainMenu = document.querySelector(".mainMenu");
const closeMenu = document.querySelector(".closeMenu");
const openMenu = document.querySelector(".openMenu");
openMenu.addEventListener("click", () => {
mainMenu.style.top = "0";
});
closeMenu.addEventListener("click", () => {
mainMenu.style.top = "-100%";
});
.row .left {
height: 98vh;
background-color: #5a2a19;
}
.row .right {
height: 98vh;
background-color: #ff640b;
}
.row .right nav .openMenu {
font-size: 3em;
margin: 10px;
position: absolute;
top: 0;
right: 0;
cursor: pointer;
}
.row .right nav .mainMenu {
background-color: #ff640b;
height: 100vh;
display: flex;
position: fixed;
top: -100%;
right: 0;
left: 50%;
z-index: 10;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-transition: top 1s ease;
transition: top 1s ease;
list-style: none;
}
.row .right nav .mainMenu li a {
display: inline-block;
padding: 15px;
text-decoration: none;
color: #5a2a19;
font-size: 1.5em;
font-weight: bold;
}
.row .right nav .mainMenu li a:hover {
color: #e6e8de;
}
.row .right nav .mainMenu .closeMenu {
font-size: 2em;
margin: 20px;
position: absolute;
top: 0;
right: 0;
cursor: pointer;
}
.row .right nav .mainMenu .icons i {
display: inline-block;
padding: 12px;
font-size: 2.2em;
color: #5a2a19;
cursor: pointer;
}
.row .right nav .mainMenu .bi-facebook:hover {
color: #4267b2;
}
.row .right nav .mainMenu .bi-instagram:hover {
color: #e1306c;
}
/*# sourceMappingURL=style.css.map */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.5.0/font/bootstrap-icons.css">
<link rel="stylesheet" type="text/css" href="css/style.css" />
<title>Bees cafe</title>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ"
crossorigin="anonymous"
></script>
<script src="js/index.js" defer></script>
</head>
<body>
<header>
<div class="row">
<div class="col-12 col-md-6 left"></div>
<div class="col-12 col-md-6 right">
<nav>
<div class="openMenu"><i class="bi bi-list"></i></div>
<ul class="mainMenu">
<li>lala</li>
<li>lala</li>
<li>lala</li>
<div class="closeMenu"><i class="bi bi-x-lg"></i></div>
<span class="icons">
<i class="bi bi-facebook"></i>
<i class="bi bi-instagram"></i>
</span>
</ul>
</nav>
</div>
</div>
</header>
</body>
</html>

How to make menu slide from Viewport to the Header

I am learning (just began) jQuery and now I want to make a menu like on this site
I mean, I want the menu to slide down out of the viewport to the header, just like in template in the link.
I tried to look at jQuery API documentation, some videos on YT about menus etc, but I did not find anything relevant.
Can anyone please learn me, how to do this?
Thank you very much
PS: I just have this:
#import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700');
* {
margin: 0;
padding: 0;
}
body {
font-family: 'Source Sans Pro', sans-serif;
box-sizing: border-box;
background-color: #4E4F53;
font-weight: 400;
}
.container {
max-width: 980px;
margin: auto;
}
header {
position: absolute;
top: 0;
left: 0;
width: 100%;
background-color: #2d2d2d;
padding: 20px 0;
}
.logo {
float: left;
}
ul {
position: relative;
float: right;
margin: 5px;
display: flex;
flex-direction: row;
}
ul.active {}
ul li {
list-style: none;
}
ul li a {
color: #FFF;
text-transform: uppercase;
text-decoration: none;
padding: 0 1.25em;
display: block;
font-size: 1em;
}
.menu-toggle {
margin: 0 1em;
color: #fff;
font-size: 1.5em;
float: right;
cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RISE</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
</head>
<body>
<header>
<div class="container">
<div class="logo">
<img src="img/logo.png" alt="logo">
</div>
<div class="menu-toggle">
<i class="fas fa-bars"></i>
</div>
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</div>
</header>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".menu-toggle").click(function() {
$(".menu").toggle();
});
});
</script>
</body>
</html>
Use translateY(); css class and jQuery to toggle classes.
This code snippet should get you where you need to be! It will need a bit of editing to fit your needs.
I've added a div called .offsite-canvas that houses your "offscreen" container. When you press the menu toggle button, jQuery toggles a class that puts the offscreen container in view for the user.
$( ".menu-toggle" ).click(function() {
$(".offsite-canvas").toggleClass("open");
});
#import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700');
* {
margin: 0;
padding: 0;
}
.offsite-canvas {
position: relative;
transform: translateY(-400px);
transition: all .5s;
z-index: 100;
}
.offsite-canvas.open {
position: relative;
transform: translateY(0);
}
body {
font-family: 'Source Sans Pro', sans-serif;
box-sizing: border-box;
background-color: #4E4F53;
font-weight: 400;
}
.container {
max-width: 980px;
margin: auto;
}
header {
position: absolute;
top: 0;
left: 0;
width: 100%;
background-color: #2d2d2d;
padding: 20px 0;
}
.logo {
float: left;
}
ul {
position: relative;
float: right;
margin: 5px;
display: flex;
flex-direction: row;
}
ul.offcanvas {
display: flex;
float: none;
z-index: 100;
}
ul.active {}
ul li {
list-style: none;
}
ul li a {
color: #FFF;
text-transform: uppercase;
text-decoration: none;
padding: 0 1.25em;
display: block;
font-size: 1em;
}
.menu-toggle {
margin: 0 1em;
color: #fff;
font-size: 1.5em;
float: right;
cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RISE</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
</head>
<body>
<div class="offsite-canvas">
<ul class="offcanvas">
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</div>
<header>
<div class="container">
<div class="logo">
<img src="img/logo.png" alt="logo">
</div>
<div class="menu-toggle">
<i class="fas fa-bars"></i>
</div>
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</div>
</header>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".menu-toggle").click(function() {
$(".menu").toggle();
});
});
</script>
</body>
</html>
I would suggest if you want to make a nav menu that comes onto the screen when a button is clicked, create the menus as normal, and then place it off the screen on either the left or the right by using translateX() in css.
From that point on, when the button is clicked, Toggle a class that would translate the menu one the x axis so that it is visible.

overlay when i open slide-out menu

I have an expanding navbar, I have been having difficulties implementing an overlay whenever the expanding navigation is open just like the way youtube's overlay appears when the slide out nav is open. please help.
the code has been well commented.
This is the javascript code for the expanding navigation below, i used jquery
'use strict';
// Open offsite navigation.
$('#nav-expander').on('click', function(e) {
e.preventDefault();
$('nav').toggleClass('nav-expanded');
});
// Close offsite navigation.
$('.menu .close').on('click', function(e) {
e.preventDefault();
$('nav').toggleClass('nav-expanded');
});
// Close offsite navigation after user click on an link in navigation.
$('.menu a').on('click', function(e) {
//se.preventDefault();
$('nav').removeClass('nav-expanded');
});
$('.body').on('click', function(e) {
//e.preventDefault();
$('nav').removeClass('nav-expanded');
});
$('.body2').on('click', function(e) {
//e.preventDefault();
$('nav').removeClass('nav-expanded');
});
$('.btn').on('click', function(e) {
//e.preventDefault();
$('nav').removeClass('nav-expanded');
});
//ending of offsite navigation
/************************************
*************************************
*************************************
GENERAL STYLING
*************************************
*************************************
************************************/
body{
background-color: #F2F3F4;
}
/************************************
GENERAL STYLING ENDING
************************************/
/************************************
*************************************
*************************************
HEADER STYLING
*************************************
*************************************
************************************/
header{
height: 57px;
border-bottom: 1px #DDDDDD solid;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.main__header{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
flex-grow: 1;
}
.header__content__left{
display: flex;
flex-direction: row;
flex-grow: 1;
align-items: center;
}
.header__content__right{
display: inline-flex;
flex-direction: row;
flex-grow: 1;
justify-content: flex-end;
align-items: center;
}
.header__content__right a{
font-weight: 600;
}
.header__margin__right{
margin-right: .5rem;
}
.header__margin__left{
margin-left: 1rem;
}
/************************************
*************************************
*************************************
SLIDE-OUT NAVIGATION STYLING
*************************************
*************************************
************************************/
.menu{
position: relative;
width: 280px;
display: block;
height: 100%;
top: 0;
left:-300px; /*was originally t right when the nav bar was on the right side*/
position: fixed;
z-index: 100;
text-align: center;
transition: left 0.1s; /** default on the right **/
overflow-y: auto; /* makes the expanding nav scrollable */
}
.menu.nav-expanded{
left: 0; /* was at right before, for nav bar to expand from left */
}
.menu .close{
font-size: 30px;
margin-right: 10px;
margin-top:10px;
}
.navbar__header{
height: 50px;
padding: 15px 30px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
.nav__items__extra{
padding: 7px 30px 7px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
.menu .nav__items{
padding-left: 0;
margin-top: 20px;
margin-bottom: 20px;
}
.menu ul{
list-style: none;
}
.nav__items li{
height: 44px;
}
.menu h4 a{
text-decoration: none;
}
.nav__items a{
text-decoration: none;
font-weight: 500;
}
/************************************
COLORING IN THE NAVBAR
************************************/
.navbar__default {
background: #f4f4f4;
}
.navbar__white {
background: #fff;
}
.navbar__black {
background: #000;
color: #fff;
}
.navbar__header__green{
color: #28B463;
}
.navbar__header__green:hover{
color: #28B463;
}
this is the html code for the expanding navbar.
<!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">
<title>bootstrap homepage</title>
<link href="https://fonts.googleapis.com/css?family=Droid+Sans|Droid+Serif|Noto+Sans" rel="stylesheet">
<script src="https://use.fontawesome.com/ebcec35828.js"></script>
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/style.css">
</head>
<body class="">
<!--- This is for the header content -
------------------------------------->
<header class="container-fluid main__header color__white">
<div class="header__content__left">
<i class="fa fa-bars header__margin__right" style="font-size:20px;"></i>
<div class="color__logo__default">
<h4>spaces</h4>
</div>
</div>
<div class="header__content__right">
Log In<i class="pl-1"></i>
Post
</div>
</header>
<!--- Ending of the header content -
----------------------------------->
<!--- Slide-out navigation - - - - -
----------------------------------->
<nav class="menu navbar__white">
<i class="fa fa-close pt-1 pl-2 pr-2 pb-2"></i>
<h4>spaces</h4><hr style="margin-top:0px;">
<ul class="nav__items">
<li class="nav__li__style"> Explore</li>
<hr>
<li class="nav__li__style">About</li>
<li class="nav__li__style">Guidelines</li>
<li class="nav__li__style">Help and Support</li>
<li class="nav__li__style">Contact Us</li>
</ul>
</nav>
<!--- Ending of navigation - - - - -
----------------------------------->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
Something like this?
You have to add an overlay div, with a fixed position that will cover the whole screen, next you have to set its z-index to be lower than your navigation panel but higher than all the other elements in your css, in your case setting z-index: 99 works well.
Finally, and since you are using jquery, you can show() and hide() it along with your navbar.
'use strict';
// Open offsite navigation.
$('#nav-expander').on('click', function(e) {
e.preventDefault();
$('nav').toggleClass('nav-expanded');
$('.overlay').show();
});
// Close offsite navigation.
$('.menu .close').on('click', function(e) {
e.preventDefault();
$('nav').toggleClass('nav-expanded');
$('.overlay').hide();
});
// Close offsite navigation after user click on an link in navigation.
$('.menu a').on('click', function(e) {
//se.preventDefault();
$('nav').removeClass('nav-expanded');
$('.overlay').hide();
});
$('.body').on('click', function(e) {
//e.preventDefault();
$('nav').removeClass('nav-expanded');
$('.overlay').hide();
});
$('.body2').on('click', function(e) {
//e.preventDefault();
$('nav').removeClass('nav-expanded');
$('.overlay').hide();
});
$('.btn').on('click', function(e) {
//e.preventDefault();
$('nav').removeClass('nav-expanded');
$('.overlay').hide();
});
//ending of offsite navigation
/************************************
*************************************
*************************************
GENERAL STYLING
*************************************
*************************************
************************************/
body{
background-color: #F2F3F4;
}
.overlay{
position: fixed;
display: none;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background-color: rgba(0,0,0,0.8);
z-index: 99;
}
/************************************
GENERAL STYLING ENDING
************************************/
/************************************
*************************************
*************************************
HEADER STYLING
*************************************
*************************************
************************************/
header{
height: 57px;
border-bottom: 1px #DDDDDD solid;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.main__header{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
flex-grow: 1;
}
.header__content__left{
display: flex;
flex-direction: row;
flex-grow: 1;
align-items: center;
}
.header__content__right{
display: inline-flex;
flex-direction: row;
flex-grow: 1;
justify-content: flex-end;
align-items: center;
}
.header__content__right a{
font-weight: 600;
}
.header__margin__right{
margin-right: .5rem;
}
.header__margin__left{
margin-left: 1rem;
}
/************************************
*************************************
*************************************
SLIDE-OUT NAVIGATION STYLING
*************************************
*************************************
************************************/
.menu{
position: relative;
width: 280px;
display: block;
height: 100%;
top: 0;
left:-300px; /*was originally t right when the nav bar was on the right side*/
position: fixed;
z-index: 100;
text-align: center;
transition: left 0.1s; /** default on the right **/
overflow-y: auto; /* makes the expanding nav scrollable */
}
.menu.nav-expanded{
left: 0; /* was at right before, for nav bar to expand from left */
}
.menu .close{
font-size: 30px;
margin-right: 10px;
margin-top:10px;
}
.navbar__header{
height: 50px;
padding: 15px 30px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
.nav__items__extra{
padding: 7px 30px 7px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
.menu .nav__items{
padding-left: 0;
margin-top: 20px;
margin-bottom: 20px;
}
.menu ul{
list-style: none;
}
.nav__items li{
height: 44px;
}
.menu h4 a{
text-decoration: none;
}
.nav__items a{
text-decoration: none;
font-weight: 500;
}
/************************************
COLORING IN THE NAVBAR
************************************/
.navbar__default {
background: #f4f4f4;
}
.navbar__white {
background: #fff;
}
.navbar__black {
background: #000;
color: #fff;
}
.navbar__header__green{
color: #28B463;
}
.navbar__header__green:hover{
color: #28B463;
}
this is the html code for the expanding navbar.
<!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">
<title>bootstrap homepage</title>
<link href="https://fonts.googleapis.com/css?family=Droid+Sans|Droid+Serif|Noto+Sans" rel="stylesheet">
<script src="https://use.fontawesome.com/ebcec35828.js"></script>
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/style.css">
</head>
<body class="">
<div class="overlay">
</div>
<!--- This is for the header content -
------------------------------------->
<header class="container-fluid main__header color__white">
<div class="header__content__left">
<i class="fa fa-bars header__margin__right" style="font-size:20px;"></i>
<div class="color__logo__default">
<h4>spaces</h4>
</div>
</div>
<div class="header__content__right">
Log In<i class="pl-1"></i>
Post
</div>
</header>
<!--- Ending of the header content -
----------------------------------->
<!--- Slide-out navigation - - - - -
----------------------------------->
<nav class="menu navbar__white">
<i class="fa fa-close pt-1 pl-2 pr-2 pb-2"></i>
<h4>spaces</h4><hr style="margin-top:0px;">
<ul class="nav__items">
<li class="nav__li__style"> Explore</li>
<hr>
<li class="nav__li__style">About</li>
<li class="nav__li__style">Guidelines</li>
<li class="nav__li__style">Help and Support</li>
<li class="nav__li__style">Contact Us</li>
</ul>
</nav>
<!--- Ending of navigation - - - - -
----------------------------------->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>

Categories