Make nav fill out full width without breaking the website

Make nav fill out full width without breaking the website - javascript

I wanted to know how I can make a nav menu I made fill out the whole page. A simple solution I thought of was to put it on absolute position and set top, left, bottom, right to 0. However, this caused it to go over the content and made the whole page a different color. Here's my HTML/CSS:
//JS
function myFunction() {
var x = document.getElementById("nav-links");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
/* CSS */
body {
font-family: 'Roboto', Arial, sans-serif;
background: white;
}
.topnav {
overflow: hidden;
background-color: #333;
position: relative;
width: 100%;
}
.topnav #nav-links {
display: none;
}
.topnav a {
color: white;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
display: block;
}
.topnav a.icon {
background: black;
display: block;
position: absolute;
right: 0;
top: 0;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.active {
background-color: #b47b5a;
color: white;
}
.body {
display: flex;
margin: auto;
min-height: 300vh;
}
<!--HTML-->
<!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 rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="script/server.js"></script>
<title>Hello</title>
</head>
<body>
<header>
<div class="topnav">
Hello World!
<div id="nav-links">
Home
Contact
About
</div>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
</header>
<div class="body">
<h1>Hello World!</h1>
</div>
<script src="script/script.js"></script>
</body>
</html>
I have tried every method I could think of and search of, but can't really pull it off.

If you try to make the topnav position to absolute, it is the correct way. You just must to adjust the padding or margin of the content below the topnav or set the padding top to the body so the topnav is not to go over the content.
//JS
function myFunction() {
var x = document.getElementById("nav-links");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
/* CSS */
body {
font-family: 'Roboto', Arial, sans-serif;
background: white;
padding-top: 50px;
}
.topnav {
overflow: hidden;
background-color: #333;
position: absolute;
z-index: 999;
top: 0;
left: 0;
right: 0;
width: 100%;
}
.topnav #nav-links {
display: none;
}
.topnav a {
color: white;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
display: block;
}
.topnav a.icon {
background: black;
display: block;
position: absolute;
right: 0;
top: 0;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.active {
background-color: #b47b5a;
color: white;
}
.body {
display: flex;
margin: auto;
min-height: 300vh;
}
<!--HTML-->
<!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 rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="script/server.js"></script>
<title>Hello</title>
</head>
<body>
<header>
<div class="topnav">
Hello World!
<div id="nav-links">
Home
Contact
About
</div>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
</header>
<div class="body">
<h1>Hello World!</h1>
</div>
<script src="script/script.js"></script>
</body>
</html>
Or you can make the topnav width to 100vw so the topnav will fully contain the width of your device, and set the body margin and padding to 0. But i not recomend to use this because sometimes it can make your website have horizontal scrolling, so the best way is still to use the first answer.
//JS
function myFunction() {
var x = document.getElementById("nav-links");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
/* CSS */
body {
font-family: 'Roboto', Arial, sans-serif;
background: white;
padding: 0;
margin: 0;
}
.topnav {
overflow: hidden;
background-color: #333;
position: relative;
width: 100vw;
}
.topnav #nav-links {
display: none;
}
.topnav a {
color: white;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
display: block;
}
.topnav a.icon {
background: black;
display: block;
position: absolute;
right: 0;
top: 0;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.active {
background-color: #b47b5a;
color: white;
}
.body {
display: flex;
margin: auto;
min-height: 300vh;
}
<!--HTML-->
<!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 rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="script/server.js"></script>
<title>Hello</title>
</head>
<body>
<header>
<div class="topnav">
Hello World!
<div id="nav-links">
Home
Contact
About
</div>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
</header>
<div class="body">
<h1>Hello World!</h1>
</div>
<script src="script/script.js"></script>
</body>
</html>

Related

plain CSS to Keep the nav on top of the page [duplicate]

This question already has answers here:
How to fix a header on scroll
(16 answers)
Closed 2 months ago.
<!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" />
<!-- To place the footer at the bottom of the page -->
<style>
html,
body {
height: 100%;
}
#root {
min-height: 100%;
display: flex;
flex-direction: column;
}
header {
position: absolute; /* To pull the header out of the document flow */
}
main {
flex: 1;
}
</style>
<title>Document</title>
</head>
<body>
<div id="root">
<header>
<h1></h1>
<nav></nav>
</header>
<main></main>
<footer></footer>
</div>
</body>
</html>
Let's say h1 and nav is placed within header tag and this would look like below:
What I want to achieve is keeping the nav tag on top of the page while the h1 tag is being scrolled as usual:
I've tried adding position: sticky; and top: 0;, but it doesn't seem to be working as the nav tag is placed within the header tag.
Should I be using JavaScript to achieve this? or is it possible to solve with plain CSS only?
html,
body {
height: 100%;
}
body {
margin: 0;
}
#root {
min-height: 100%;
display: flex;
flex-direction: column;
}
header {
position: absolute; /* To pull the header out of the document flow */
left: 0;
right: 0;
}
header h1 {
text-align: center;
}
nav {
margin: 0 auto;
position: sticky;
top: 0;
}
nav > ul {
margin: 0;
padding: 0;
list-style-type: none;
display: flex;
}
nav > ul li {
margin: 0 10px;
}
nav > ul li a {
color: #000000;
text-decoration: none;
font-size: 1.1rem;
font-weight: 600;
letter-spacing: 1px;
}
nav > ul li a:hover {
color: #bd8b4f;
}
main {
flex: 1;
min-height: 1500px;
}
footer {
padding: 40px 0;
color: #ffffff;
background-color: #683d29;
text-align: center;
}
footer > div a {
color: #ffffff;
text-decoration: none;
}
footer > div a:hover {
color: #683d29;
}
<!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" />
<title>Document</title>
</head>
<body>
<div id="root">
<header>
<h1>Test Page</h1>
<nav>
<ul>
<li>
Nav
</li>
<li>
Nav
</li>
<li>
Nav
</li>
<li>
Nav
</li>
<li>
Nav
</li>
</ul>
</nav>
</header>
<main></main>
<footer>
<div>Copyright 2022. Test All rights reserved.</div>
</footer>
</div>
</body>
</html>

Use
position: fixed;
This makes the position stay the same, no matter how far you scroll

<!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" />
<!-- To place the footer at the bottom of the page -->
<style>
html,
body {
height: 1000vh;
}
header {
min-height: 300px;
}
nav {
height: 20px;
background-color: blue;
position: sticky;
top: 0;
}
main {
height: 1000vh;
background-color: red;
}
footer {
height: 200px;
background-color: yellow;
}
</style>
<title>Document</title>
</head>
<body>
<div id="root">
<header>
<h1></h1>
<nav></nav>
</header>
<main></main>
<footer></footer>
</div>
</body>
</html>
nav elements sticks only until header is in view, but if you want it to stick for the whole page add nav styles to header.
header {
height: 20px;
background-color: blue;
position: sticky;
top: 0;
}

like this?
html,
body {
height: 100%;
}
body {
margin: 0;
}
#root {
min-height: 100%;
display: flex;
flex-direction: column;
}
header {
/* 👈 i made changes. */
}
header h1 {
text-align: center;
}
nav {
margin: 0 auto;
position: sticky;
top: 0;
}
nav>ul {
margin: 0;
padding: 0;
list-style-type: none;
display: flex;
}
nav>ul li {
margin: 0 10px;
}
nav>ul li a {
color: #000000;
text-decoration: none;
font-size: 1.1rem;
font-weight: 600;
letter-spacing: 1px;
}
nav>ul li a:hover {
color: #bd8b4f;
}
main {
flex: 1;
min-height: 1500px;
}
footer {
padding: 40px 0;
color: #ffffff;
background-color: #683d29;
text-align: center;
}
footer>div a {
color: #ffffff;
text-decoration: none;
}
footer>div a:hover {
color: #683d29;
}
<!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" />
<title>Document</title>
</head>
<body>
<div id="root">
<!-- 👇 i made changes -->
<header>
<h1>Test Page</h1>
</header>
<nav>
<ul>
<li>
Nav
</li>
<li>
Nav
</li>
<li>
Nav
</li>
<li>
Nav
</li>
<li>
Nav
</li>
</ul>
</nav>
<!-- 👆 i made changes -->
<main></main>
<footer>
<div>Copyright 2022. Test All rights reserved.</div>
</footer>
</div>
</body>
</html>

you can try one thing, make position: sticky and then top:0

By moving the nav element outside the header element, the position: sticky code works.
html,
body {
height: 100%;
}
body {
margin: 0;
}
#root {
min-height: 100%;
display: flex;
flex-direction: column;
}
header {
position: absolute;
/* To pull the header out of the document flow */
left: 0;
right: 0;
}
header h1 {
text-align: center;
}
nav {
margin: 0 auto;
position: sticky;
top: 0;
}
nav>ul {
margin: 0;
padding: 0;
list-style-type: none;
display: flex;
}
nav>ul li {
margin: 0 10px;
}
nav>ul li a {
color: #000000;
text-decoration: none;
font-size: 1.1rem;
font-weight: 600;
letter-spacing: 1px;
}
nav>ul li a:hover {
color: #bd8b4f;
}
main {
flex: 1;
min-height: 1500px;
}
footer {
padding: 40px 0;
color: #ffffff;
background-color: #683d29;
text-align: center;
}
footer>div a {
color: #ffffff;
text-decoration: none;
}
footer>div a:hover {
color: #683d29;
}
<!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" />
<title>Document</title>
</head>
<body>
<div id="root">
<header>
<h1>Test Page</h1>
<!--Move nav element outside the header element but inside the #root element for position: sticky to work.-->
</header>
<nav>
<ul>
<li>
Nav
</li>
<li>
Nav
</li>
<li>
Nav
</li>
<li>
Nav
</li>
<li>
Nav
</li>
</ul>
</nav>
<main></main>
<footer>
<div>Copyright 2022. Test All rights reserved.</div>
</footer>
</div>
</body>
</html>

How do I get my nav menu to open beneath the navigation bar and not inside of it?

I'm attempting to implement a simple hamburger icon nav menu for a website I'm developing, but I'm having issues where the contents of the navigation menu are opening/appearing within the navigation menu and not below the nav bar.
HTML:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<title>Buck's Farmstand</title>
<link rel="icon" type="image/x-icon" href="G:\webDev\bucks_farmstand\images\tomatoFaviconRounded.ico">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="G:\webDev\bucks_farmstand\css\bucksMobileIndexStyles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body id="mainPageBody">
<header class="navHeader">
<div class=buttonContainer>
<a class="cta" href="G:\webDev\bucks_farmstand\html\bucksContact.html"><button>Contact</button></a>
</div>
<div class=logoContainer>
<img class="logo" src="G:\webDev\bucks_farmstand\logos\newBucksLogo.jpg" alt="logo">
</div>
<div id="myLinks">
Produce
Online-Order
About
Contact
</div>
<!-- "Hamburger menu" / "Bar icon" to toggle the navigation links -->
<a href="javascript:void(0);" class="hamIcon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
<script>
function myFunction() {
var x = document.getElementById("myLinks");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
</script>
</header>
<br>
</body>
</html>
CSS:
/*overrides everything for specifc page*/
* {
box-sizing: border-box;
margin: 0;
padding: 0;
/*background-color: #FFDAB9;*/
overflow: auto;
}
/*referring to all of these categories not specifc to a class/ID*/
li, a, button {
font-family: "cursive", cursive;
font-weight: 500;
font-size: 16px;
color: #000000;
text-decoration: none;
}
/*Bucks Nav CSS*/
/*Can add an href tag/ref here for logo to direct to*/
.logo{
object-fit: cover;
position: relative;
height: 60px;
width: 100%;
cursor: pointer;
}
.logoContainer{
margin: auto;
position: relative;
right: 35px;
}
.navHeader{
position: fixed;
width: 100%;
background: #deb887;
display: flex;
justify-content: space-between;
align-items: center;
padding: 2px 2%;
height: 65px;
overflow: hidden;
z-index: 950;
}
.navHeader #myLinks{
display: none;
position: relative;
top: 5px;
}
/* Style the hamburger menu */
.hamIcon {
overflow: auto;
background: none;
display: block;
position: fixed;
right: 20px;
top: 23px;
}
.cta{
background: #deb887;
overflow: hidden;
width: 15%;
}
.buttonContainer{
overflow: hidden;
}
button{
padding: 9px 5px;
background-color: rgba(35,255,0,0.5);
border: 2px solid;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
}
button:hover{
background-color: yellow;
}

The issue here is that your <header> class .navHeader is using display: flex; therefore items within that element will act as flex elements. You can read more about those Here
There are a few ways you could go about this.
I think your best solution is to move the <div id="myLinks"></div> block below the header.
Then in your CSS: remove the overflow: auto from *.
Remove the class .navHeader before #myLinks, and add a few more properties to make sure the block is below your header #myLinks{top: 65px; padding: 10px; text-align: center;}
here is the full code:
HTML
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<title>Buck's Farmstand</title>
<link rel="icon" type="image/x-icon" href="G:\webDev\bucks_farmstand\images\tomatoFaviconRounded.ico">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="G:\webDev\bucks_farmstand\css\bucksMobileIndexStyles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body id="mainPageBody">
<header class="navHeader">
<div class=buttonContainer>
<a class="cta" href="G:\webDev\bucks_farmstand\html\bucksContact.html"><button>Contact</button></a>
</div>
<div class=logoContainer>
<img class="logo" src="G:\webDev\bucks_farmstand\logos\newBucksLogo.jpg" alt="logo">
</div>
<!-- "Hamburger menu" / "Bar icon" to toggle the navigation links -->
<a href="javascript:void(0);" class="hamIcon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</header>
<div id="myLinks">
Produce
Online-Order
About
Contact
</div>
<br>
<script>
function myFunction() {
var x = document.getElementById("myLinks");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
</script>
</body>
</html>
CSS
/*overrides everything for specifc page*/
* {
box-sizing: border-box;
margin: 0;
padding: 0;
/*background-color: #FFDAB9;*/
/* overflow: auto; */
}
/*referring to all of these categories not specifc to a class/ID*/
li,
a,
button {
font-family: "cursive", cursive;
font-weight: 500;
font-size: 16px;
color: #000000;
text-decoration: none;
}
/*Bucks Nav CSS*/
/*Can add an href tag/ref here for logo to direct to*/
.logo {
object-fit: cover;
position: relative;
height: 60px;
width: 100%;
cursor: pointer;
}
.logoContainer {
margin: auto;
position: relative;
right: 35px;
}
.navHeader {
position: fixed;
width: 100%;
background: #deb887;
display: flex;
justify-content: space-between;
align-items: center;
padding: 2px 2%;
height: 65px;
overflow: hidden;
z-index: 950;
}
#myLinks {
display: none;
position: relative;
top: 65px;
text-align: center;
padding: 10px;
width: 100%;
background: #deb887;
}
/* Style the hamburger menu */
.hamIcon {
overflow: auto;
background: none;
display: block;
position: fixed;
right: 20px;
top: 23px;
}
.cta {
background: #deb887;
overflow: hidden;
width: 15%;
}
.buttonContainer {
overflow: hidden;
}
button {
padding: 9px 5px;
background-color: rgba(35, 255, 0, 0.5);
border: 2px solid;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
}
button:hover {
background-color: yellow;
}

How can I get this scroll Event working? JavaScript with no framework

I`m trying to add an scroll event listener in JavaScript based on this: https://github.com/Godsont/Animated-Sticky-Header.
But for some reason it isn´t working, when I scroll nothing happens. Can anyone help me pls? I´m new to JavaScript so I want to keep things as simple as possible.
I´m using Google Chrome btw.
I want to add an event on the id = "mainHeader" from Header. When the user scrolls down I want the background to change color, the logo img and the itens from the ul to get a little bit smaller. I also want the height from the header to get a little smaller. (the changes that I want are in the css and have ".is-crolling").
Thanks!
window.addEventListener("scroll", scrollHeader() );
function scrollHeader() {
var mainHeader = document.getElementByID("mainHeader");
if (window.pageYOffset > 0) {
mainHeader.classList.add("is-scrolling");
} else {
mainHeader.classList.remove("is-scrolling");
}
};
#mainHeader {
background-color: white;
position: fixed;
width: 100%;
height: 80px;
z-index: 3;
transition: background 0.4s;
}
#mainHeader.is-scrolling {
background: #333;
}
#mainHeader.is-scrolling a {
color: #eee;
font-size: 13px;
}
#mainHeader.is-scrolling .header-logo img {
width: 60px;
height: 40px;
border-radius: 5px;
}
.page-logo-nav {
margin: 15px 115px 15px 115px;
}
.header-logo img {
float: left;
width: 70px;
height: 50px;
transition: height 0.4s;
}
.header-nav {
float: right;
height: 50px;
display: flex;
align-items: center;
}
.header-nav li {
display: inline;
}
.header-nav .list-1:after {
content: "★";
}
.header-nav a {
color: black;
padding: 20px;
text-decoration: none;
font-weight: 900;
font-size: 15px;
transition: font-size 0.4s;
}
.header-nav a:hover {
color: #6ebbd3;
border-top: 1px solid #266a7e;
border-bottom: 1px solid #266a7e;
transition: 0.3s;
}
<!DOCTYPE html>
<html>
<head>
<title>Stuff</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Anton%7CMontserrat%7COpen+Sans%3A300%2C300i%2C400%2C400i%2C600%2C600i%2C700%2C700i%2C800%2C800i%7CPT+Sans%3A400%2C700&ver=4.0.31" type="text/css" media="all">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<script src="JS/main.js"></script>
</head>
<body>
<header id="mainHeader">
<div class="page-logo-nav">
<div class="header-logo">
<a href="index.html">
<img src="img/logo.jpg">
</a>
</div>
<div class="header-nav">
<nav>
<ul>
<li class="list-1">SOBRE</li>
<li class="list-2">CONTACTOS</li>
</ul>
</nav>
</div>
</div>
</header>
</body>
</html>

add class to an element by clicking and remove it to the other elements By JavaScript

I am working on a menu, and I am trying to add a class to the li when I clik on it, but I need to remove the class to the other li elements when I click on one of them, I have tried this clicked.classList.remove("active"); but doesnt work, every element I click on get the class and is not possible to remove it, How coud I do this correctly.
Thanks for your help
var menu_link = document.querySelectorAll(".menu_option");
for(i=0; i<menu_link.length; i++){
var clicked = menu_link[i]
clicked.addEventListener("click", function(){
clicked.classList.remove("active");
this.classList.add("active");
});
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 100%;
}
body {
font-family: Arial, Helvetica, sans-serif;
color: #000000;
}
ul {
list-style: none;
}
a {
text-decoration: none;
color: #000000;
}
.container {
max-width: 900px;
margin: auto;
}
/*============================================================================
HEADER
===============================================================================*/
header {
background-color: #ffda00;
padding-top: 10px;
padding-bottom: 10px;
}
header nav {
display: flex;
align-items: center;
justify-content: space-between;
}
header nav ul li {
display: inline-block;
padding: 10px 20px;
border-radius: 5px;
}
header .logo {
font-size: 2rem;
}
header nav ul li a {
font-size: 1.1rem;
}
/* active menu */
.active {
background-color: #007bff;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lykmapipo/themify-icons#0.1.2/css/themify-icons.css">
<title>My Store</title>
</head>
<body>
<header>
<div class="container">
<nav>
<span class="logo"><i class="ti-home"></i></span>
<ul>
<li class="menu_option">Users</li>
<li class="menu_option">Orders</li>
<li class="menu_option">Products</li>
<li class="menu_option">Exit</li>
</ul>
</nav>
</div>
</header>
<script src="js/script.js"></script>
</body>
</html>

I modified your js code a bit. Let's do another loop in your click event listener, to uncheck the "active" class to every menu option.
var menu_link = document.querySelectorAll(".menu_option");
for(i=0; i<menu_link.length; i++){
var clicked = menu_link[i]
clicked.addEventListener("click", function(){
// modified in here
// clicked.classList.remove("active");
menu_link = document.querySelectorAll(".menu_option");
for (i = 0; i < menu_link.length; i++) {
menu_link[i].classList.remove("active");
}
this.classList.add("active");
});
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 100%;
}
body {
font-family: Arial, Helvetica, sans-serif;
color: #000000;
}
ul {
list-style: none;
}
a {
text-decoration: none;
color: #000000;
}
.container {
max-width: 900px;
margin: auto;
}
/*============================================================================
HEADER
===============================================================================*/
header {
background-color: #ffda00;
padding-top: 10px;
padding-bottom: 10px;
}
header nav {
display: flex;
align-items: center;
justify-content: space-between;
}
header nav ul li {
display: inline-block;
padding: 10px 20px;
border-radius: 5px;
}
header .logo {
font-size: 2rem;
}
header nav ul li a {
font-size: 1.1rem;
}
/* active menu */
.active {
background-color: #007bff;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lykmapipo/themify-icons#0.1.2/css/themify-icons.css">
<title>My Store</title>
</head>
<body>
<header>
<div class="container">
<nav>
<span class="logo"><i class="ti-home"></i></span>
<ul>
<li class="menu_option">Users</li>
<li class="menu_option">Orders</li>
<li class="menu_option">Products</li>
<li class="menu_option">Exit</li>
</ul>
</nav>
</div>
</header>
<script src="js/script.js"></script>
</body>
</html>

I hope this is what you're looking for? if so you can tweak existing code based on this.
you can replace button with li that won't be an issue.
var btnContainer = document.getElementById("myDIV");
// Get all buttons with class="btn" inside the container
var btns = btnContainer.getElementsByClassName("btn");
// Loop through the buttons and add the active class to the current/clicked button
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}
/* Style the buttons */
.btn {
border: none;
outline: none;
padding: 10px 16px;
background-color: #f1f1f1;
cursor: pointer;
}
/* Style the active class (and buttons on mouse-over) */
.active, .btn:hover {
background-color: #666;
color: white;
}
<div id="myDIV">
<button class="btn">1</button>
<button class="btn active">2</button>
<button class="btn">3</button>
<button class="btn">4</button>
<button class="btn">5</button>
</div>

I think this is what you want:
var menu_link = document.querySelectorAll(".menu_option");
for(i=0; i<menu_link.length; i++){
var clicked = menu_link[i]
clicked.addEventListener("click", function(){
var active = document.querySelector('.menu_option.active');
if(active) {
active.classList.remove("active");
}
this.classList.add("active");
});
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 100%;
}
body {
font-family: Arial, Helvetica, sans-serif;
color: #000000;
}
ul {
list-style: none;
}
a {
text-decoration: none;
color: #000000;
}
.container {
max-width: 900px;
margin: auto;
}
/*============================================================================
HEADER
===============================================================================*/
header {
background-color: #ffda00;
padding-top: 10px;
padding-bottom: 10px;
}
header nav {
display: flex;
align-items: center;
justify-content: space-between;
}
header nav ul li {
display: inline-block;
padding: 10px 20px;
border-radius: 5px;
}
header .logo {
font-size: 2rem;
}
header nav ul li a {
font-size: 1.1rem;
}
/* active menu */
.active {
background-color: #007bff;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lykmapipo/themify-icons#0.1.2/css/themify-icons.css">
<title>My Store</title>
</head>
<body>
<header>
<div class="container">
<nav>
<span class="logo"><i class="ti-home"></i></span>
<ul>
<li class="menu_option">Users</li>
<li class="menu_option">Orders</li>
<li class="menu_option">Products</li>
<li class="menu_option">Exit</li>
</ul>
</nav>
</div>
</header>
<script src="js/script.js"></script>
</body>
</html>

Close toggle menu after clicking outside of it and on a link

I'm currently using this simple toggle menu from w3school.
I was wondering how can this be edited in order to close when clicked outside of it or on a link (Logo, News, Contact, About)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
.mobile-container {
max-width: 480px;
margin: auto;
background-color: #555;
height: 500px;
color: white;
border-radius: 10px;
}
.topnav {
overflow: hidden;
background-color: #333;
position: relative;
}
.topnav #myLinks {
display: none;
}
.topnav a {
color: white;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
display: block;
}
.topnav a.icon {
background: black;
display: block;
position: absolute;
right: 0;
top: 0;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.active {
background-color: #4CAF50;
color: white;
}
</style>
</head>
<body>
<!-- Simulate a smartphone / tablet -->
<div class="mobile-container">
<!-- Top Navigation Menu -->
<div class="topnav">
Logo
<div id="myLinks">
News
Contact
About
</div>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<div style="padding-left:16px">
<h3>Vertical Mobile Navbar</h3>
<p>This example demonstrates how a navigation menu on a mobile/smart phone could look like.</p>
<p>Click on the hamburger menu (three bars) in the top right corner, to toggle the menu.</p>
</div>
<!-- End smartphone / tablet look -->
</div>
<script>
function myFunction() {
var x = document.getElementById("myLinks");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
</script>
</body>
</html>
JSFiddle Demo

The simplest way is to add an Event Listener in the whole document and use the conditional to see where you are clicking. Here's a Codepen with this logic: https://codepen.io/alac1984/pen/RwNVKOe
HTML:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<!-- Simulate a smartphone / tablet -->
<div class="mobile-container">
<!-- Top Navigation Menu -->
<div class="topnav">
Logo
<div id="myLinks">
News
Contact
About
</div>
<a href="#" class="icon" id="myButton">
<i id="itag" class="fa fa-bars"></i>
</a>
</div>
<div style="padding-left:16px">
<h3>Vertical Mobile Navbar</h3>
<p>This example demonstrates how a navigation menu on a mobile/smart phone could look like.</p>
<p>Click on the hamburger menu (three bars) in the top right corner, to toggle the menu.</p>
</div>
<!-- End smartphone / tablet look -->
</div>
CSS:
body {
font-family: Arial, Helvetica, sans-serif;
}
.mobile-container {
max-width: 480px;
margin: auto;
background-color: #555;
height: 500px;
color: white;
border-radius: 10px;
}
.topnav {
overflow: hidden;
background-color: #333;
position: relative;
}
.topnav #myLinks {
display: none;
}
.topnav a {
color: white;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
display: block;
}
.topnav a.icon {
background: black;
display: block;
position: absolute;
right: 0;
top: 0;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.active {
background-color: #4CAF50;
color: white;
}
JS:
const button = document.getElementById('myButton');
const div = document.getElementById('myLinks');
const icon = document.querySelector('.icon');
console.log(icon);
document.addEventListener('click', myFunction)
function myFunction(e) {
e.preventDefault();
console.log(e.target);
if((div.style.display === '' || div.style.display === 'none') && (e.target === button || e.target === itag)) {
div.style.display = 'block';
} else if((div.style.display === '' || div.style.display === 'none') && (e.target !== button || e.target !== itag)) {
div.style.display = 'none';
} else {
div.style.display = 'none';
}
}

Develop Reference

JavaScript is the programming language of the Web.

Make nav fill out full width without breaking the website - javascript

Related

plain CSS to Keep the nav on top of the page [duplicate]

How do I get my nav menu to open beneath the navigation bar and not inside of it?

How can I get this scroll Event working? JavaScript with no framework

add class to an element by clicking and remove it to the other elements By JavaScript

Close toggle menu after clicking outside of it and on a link

Categories

Resources