You want to implement the Top Menu and Left Side Menu.
The top menu is fixed to the top.
I want to implement the Left Side Menu so that it can be seen right below the Top Menu, but it is not going well.
If we open the Left Side Menu, we would like to solve the problem of covering the top menu, so please give us some advice.
index.html code
<!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">
<!-- CSS Link -->
<link rel="stylesheet" href="assets/css/left_sidemenu.css">
<link rel="stylesheet" href="assets/css/top_menu.css">
<!---Fontawsome CDN Link---->
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css">
<!----Jquery CDN Link---->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Favicon-->
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
<!-- Font Awesome icons (free version)-->
<script src="https://use.fontawesome.com/releases/v6.1.0/js/all.js" crossorigin="anonymous"></script>
<title>SideBar sub menus</title>
</head>
<body id="body-pd">
<!-- top_menu -->
<nav class="navbar ">
<!-- logo_link -->
<div class="navbar__logo">
<i class="fa-solid fa-laptop-code"></i>
Project
</div>
<!-- menu_link -->
<ul class="navbar__menu">
<li>Login</li>
<li>Sign</li>
</ul>
</nav>
<!-- top_menu -->
<!-- left_sidemenu -->
<div class="l-navbar" id="navbar">
<nav class="nav">
<div>
<div class="nav__brand">
<ion-icon name="menu-outline" class="nav__toggle" id="nav-toggle"></ion-icon>
Bedimcode
</div>
<div class="nav__list">
<a href="#" class="nav__link active">
<ion-icon name="home-outline" class="nav__icon"></ion-icon>
<span class="nav_name">Dashboard</span>
</a>
<a href="#" class="nav__link">
<ion-icon name="chatbubbles-outline" class="nav__icon"></ion-icon>
<span class="nav_name">Messenger</span>
</a>
<div href="#" class="nav__link collapse">
<ion-icon name="folder-outline" class="nav__icon"></ion-icon>
<span class="nav_name">Projects</span>
<ion-icon name="chevron-down-outline" class="collapse__link"></ion-icon>
<ul class="collapse__menu">
Data
Group
Members
</ul>
</div>
<a href="#" class="nav__link">
<ion-icon name="pie-chart-outline" class="nav__icon"></ion-icon>
<span class="nav_name">Analytics</span>
</a>
<div href="#" class="nav__link collapse">
<ion-icon name="people-outline" class="nav__icon"></ion-icon>
<span class="nav_name">Team</span>
<ion-icon name="chevron-down-outline" class="collapse__link"></ion-icon>
<ul class="collapse__menu">
Data
Group
Members
</ul>
</div>
<a href="#" class="nav__link">
<ion-icon name="settings-outline" class="nav__icon"></ion-icon>
<span class="nav_name">Settings</span>
</a>
</div>
<a href="#" class="nav__link">
<ion-icon name="log-out-outline" class="nav__icon"></ion-icon>
<span class="nav_name">Log out</span>
</a>
</div>
</nav>
</div>
<!-- left_sidemenu -->
<h1>Componentes</h1>
<!-- IONICONS -->
<script src="https://unpkg.com/ionicons#5.2.3/dist/ionicons.js"></script>
<!-- JS -->
<script src="assets/js/main.js"></script>
</body>
</html>
left_sidemenu.css code
/* left_sidemenu.css */
/* GOOGLE FONTS */
#import url("https://fonts.googleapis.com/css2?family=Poppins:wght#400;600&display=swap");
/* VARIABLES CSS */
:root {
--nav--width: 92px;
/* Colores */
--first-color: #0c5df4;
--bg-color: #12192c;
--sub-color: #b6cefc;
--white-color: #fff;
/* Fuente y tipografia */
--body-font: 'Poppins', sans-serif;
--normal-font-size: 1rem;
--small-font-size: .875rem;
/* z index */
--z-fixed: 100;
}
/* BASE */
*, ::before, ::after {
box-sizing: border-box;
}
body {
position: relative;
margin: 0;
padding: 2rem 0 0 6.75rem;
font-family: var(--body-font);
font-size: var(--normal-font-size);
transition: .5s;
}
h1 {
margin: 0;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
a {
text-decoration: none;
}
/* l NAV */
.l-navbar {
position: fixed;
/* top: 0; */
left: 0;
width: var(--nav--width);
height: 100vh;
background-color: var(--bg-color);
color: var(--white-color);
padding: 1.5rem 1.5rem 2rem;
transition: .5s;
z-index: var(--z-fixed);
}
/* NAV */
.nav {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
}
.nav__brand {
display: grid;
grid-template-columns: max-content max-content;
justify-content: space-between;
align-items: center;
margin-bottom: 2rem;
}
.nav__toggle {
font-size: 1.25rem;
padding: .75rem;
cursor: pointer;
}
.nav__logo {
color: var(--white-color);
font-weight: 600;
}
.nav__link {
display: grid;
grid-template-columns: max-content max-content;
align-items: center;
column-gap: .75rem;
padding: .75rem;
color: var(--white-color);
border-radius: .5rem;
margin-bottom: 1rem;
transition: .3s;
cursor: pointer;
}
.nav__link:hover {
background-color: var(--first-color);
}
.nav__icon {
font-size: 1.25rem;
}
.nav_name {
font-size: var(--small-font-size);
}
/* Expander menu */
/* width: calc(var(--nav--width) + 9.25rem); */
.expander {
width: calc(var(--nav--width) + 12rem);
}
/* Add padding body*/
.body-pd {
padding: 2rem 0 0 16rem;
}
/* Active links menu */
.active {
background-color: var(--first-color);
}
/* COLLAPSE */
.collapse {
grid-template-columns: 20px max-content 1fr;
}
.collapse__link {
justify-self: flex-end;
transition: .5;
}
.collapse__menu {
display: none;
padding: .75rem 2.25rem;
/*
padding: 0px;
margin: 0px;
overflow: auto;
position: fixed;
*/
}
.collapse__sublink {
color: var(--sub-color);
font-size: var(--small-font-size);
}
.collapse__sublink:hover {
color: var(--white-color);
}
/* Show collapse */
.showCollapse {
display: block;
}
/* Rotate icon */
.rotate {
transform: rotate(180deg);
transition: .5s;
}
left_sidemenu.js code
/* left_sidemenu.js */
/* EXPANDER MENU */
const showMenu = (toggleId, navbarId, bodyId) => {
const toggle = document.getElementById(toggleId),
navbar = document.getElementById(navbarId),
bodypadding = document.getElementById(bodyId)
if( toggle && navbar ) {
toggle.addEventListener('click', ()=>{
navbar.classList.toggle('expander');
bodypadding.classList.toggle('body-pd')
})
}
}
showMenu('nav-toggle', 'navbar', 'body-pd')
/* LINK ACTIVE */
const linkColor = document.querySelectorAll('.nav__link')
function colorLink() {
linkColor.forEach(l=> l.classList.remove('active'))
this.classList.add('active')
}
linkColor.forEach(l=> l.addEventListener('click', colorLink))
/* COLLAPSE MENU */
const linkCollapse = document.getElementsByClassName('collapse__link')
var i
for(i=0;i<linkCollapse.length;i++) {
linkCollapse[i].addEventListener('click', function(){
const collapseMenu = this.nextElementSibling
collapseMenu.classList.toggle('showCollapse')
const rotate = collapseMenu.previousElementSibling
rotate.classList.toggle('rotate')
});
}
top_menu.css code
/* top_menu.css */
:root {
--text-color: #f0f4f5;
--background-color: #12192c;
--accent-color: orange;
--icons-color: rgb(152, 187, 201);
--bodybackground-color: rgb(255, 255, 255);
}
body {
margin: 0;
background-color: var(--bodybackground-color);
font-family: 'STIX Two Math';
padding-top: 75px;
}
a {
font-size: 20px;
text-decoration: none;
color: var(--text-color);
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
background-color: var(--background-color);
padding: 8px 12px;
font-family: 'STIX Two Math';
position: fixed;
/* width: 100% */
top: 0;
left: 0;
right: 0;
}
.navbar__logo i {
color: var(--accent-color);
padding-left: 0;
}
.navbar__menu {
list-style: none;
display: flex;
margin: 0;
padding-left: 0;
}
.navbar__menu li {
padding: 8px 30px;
}
.navbar__menu li:hover {
background-color: var(--accent-color);
border-radius: 3px;
}
#media screen and (max-width: 700px) {
}
#font-face {
font-family: 'Cafe24Oneprettynight';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve#1.1/Cafe24Oneprettynight.woff') format('woff');
font-weight: normal;
font-style: normal;
}
* {
margin: 0;
padding: 0;
}
.wrapper {
width: 100vw;
height: 100vh;
font: normal 1rem/1.5rem 'Cafe24Oneprettynight', serif;
background: url('https://images.unsplash.com/photo-1505312926838-645f295a20e1?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1234&q=80')no-repeat center center;
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
}
.box {
padding: 50px;
background: rgba(0, 0, 0, .4);
}
p {
color: #aaa;
margin-bottom: 10px;
}
p:hover {
color: #fff
}
p:hover {
width: 100%;
transition: width .3s;
}
Screenshot 1
Screenshot 2
This is happening bcs you've added padding to the top_menu item. It can be fixed by reducing the padding you've given in the top_menu.css file like so:
body {
margin: 0;
background-color: var(--bodybackground-color);
font-family: 'STIX Two Math';
padding-top: 45px;
}
As for the nav bar covering the header once expanded. The reason it is happening is because you're adding padding to the existing element. I would change the left_sidemenu.css file like so:
/* Add padding body*/
.body-pd {
/* padding: rem 0 0 16rem; */
}
Either that or you can simply not add top padding so that the nav bar only expands to the side. One other option I could suggest instead, is to change the z-index so that the nav bar comes behind the header.
Related
I was wondering if there is a way to loop through the height on my menu dropdown and make it slide down, instead of just appearing like it does now?
I was trying to do something like this:
var list = document.getElementById("list");
var listElements = list.childElementCount;
var height = 1.5 * listElements;
var x = document.getElementById("burgerMenu");
if (x.style.height === "0rem") {
x.style.height = height + "rem";
} else {
x.style.height = "0rem";
}
But can't seem to get it right...
I know I need to add a transition and then change the height of the div, but I'm a bit stuck on how exactly.
The JS event listener just listen if there is a click on the three lines or if it's something else, it removes the class (outside of three lines) or toggle (clicking on three lines).
I think the animation should be on topnav-menu or am I wrong, since this is the div with the content in it.
window.addEventListener('click', function(e) {
var menu = document.querySelector('.right-nav');
if (!document.querySelector('.outsideOfBurger').contains(e.target)) {
// Outside of burger menu / item clicked inside the burger menu
menu.classList.remove('open-hamburguer');
} else {
// Three burger menu lines clicked, so we toggle hide/show
menu.classList.toggle('open-hamburguer');
}
});
:root {
/* Static Colors*/
--clr-heading-footer: #4C5BA0;
--clr-button: #4C5BA0;
--clr-nav-color: #8D90A1;
/* (Default) Page Settings */
height: 100%;
font-family: 'Montserrat';
padding: 2% 12%;
--clr-box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
body {
background: var(--background);
color: var(--foreground);
}
.logo-style {
/* Logo Style */
font-style: normal;
font-weight: bold;
font-size: 2rem;
line-height: 2.438rem;
letter-spacing: 0.05em;
color: #4C5BA0;
margin: 0;
}
/*
Navigation
*/
.topnav {
background: none !important;
align-items: center;
display: flex;
justify-content: space-between;
}
.topnav a {
color: blue;
text-align: center;
padding: 0.09rem 0.30rem;
text-decoration: none;
font-size: 1.063rem;
}
.right-nav {
display: flex;
flex-direction: row;
gap: 0.625rem;
align-items: center;
position: relative;
}
.topnav-menu {
/* Burger Menu Content*/
width: 300px;
transition: all .5s ease;
background-color: none;
padding: 0;
max-height: 0;
position: absolute;
top: 100%;
/* distance itself 100% of the height of parent element */
right: 0;
/* aligned on the right of container */
opacity: 0;
display: none;
/* just to hide it (overwritten when toggle('open-hamburguer') is clicked) */
}
.open-hamburguer .topnav-menu {
opacity: 1;
display: block;
max-height: 300px;
/* here is the only thing you could add find out through js because you can't animate the height */
}
.topnav-menu ul {
/* Burger Menu Content*/
margin: 0;
padding: 0;
list-style: none;
box-shadow: var(--clr-box-shadow);
border-radius: 15px;
/* border-radius is also set here else the shadow looks wired */
}
.topnav-menu ul li:last-child {
border-top: 1px solid gray;
/* last item border -> above Login/Logout */
}
.topnav-menu ul li:first-child a {
border-radius: 15px 15px 0 0;
/* round borders on start */
}
.topnav-menu ul li:last-child a {
border-radius: 0 0 15px 15px;
/* round borders on end */
}
.topnav-menu a {
color: var(--clr-nav-color);
background-color: var(--menu-card-color);
display: block;
text-align: left;
padding: 0.313rem 0.313rem;
text-decoration: none;
font-size: 1.063rem;
transition: all .5s ease;
}
.topnav-menu a:hover {
color: black;
}
.topnav-menu a.active {
color: black;
}
/*
Navigation Burger Menu
*/
.line-one {
width: 1.875rem;
}
.line-two {
width: 1.875rem;
}
.line-three {
width: 1.875rem;
}
.burger-menu div {
width: 1.875rem;
height: 0.25rem;
background-color: var(--clr-nav-color);
margin: 0.313rem 0;
border-radius: 1.563rem;
}
.burger-menu {
width: 1.875rem;
}
.burger-menu:hover div {
width: 1.875rem;
background-color: black;
}
<!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>Metrics</title>
<link href="https://fonts.googleapis.com/css?family=Montserrat:600" rel="stylesheet">
</head>
<body>
<header>
<div class="topnav">
<div class="left-nav">
<p class="logo-style">Metrics</p>
</div>
<div class="right-nav">
<a href="#burger-menu" class="burger-menu outsideOfBurger">
<div class="line-one"></div>
<div class="line-two"></div>
<div class="line-three"></div>
</a>
<div class="topnav-menu outsideOfBurger" id="burgerMenu">
<div>
<ul id="list">
<li>Overall sprint progress </li>
<li>This is a bit longer text to show it splits into new line</li>
<li>Somthing</li>
<li>Somthing</li>
<li>Somthing</li>
<li>Somthing</li>
<li>Somthing</li>
<li>Somthing</li>
<li>Info</li>
<li>Logout</li>
</ul>
</div>
</div>
</div>
</div>
</header>
</body>
</html>
You can give height:0 instead of display:none to achieve slide transition. Also add overflow:hidden so it won't show content when the height is 0 and once the menu toggles you can give height:auto
window.addEventListener('click', function(e) {
var menu = document.querySelector('.right-nav');
if (!document.querySelector('.outsideOfBurger').contains(e.target)) {
// Outside of burger menu / item clicked inside the burger menu
menu.classList.remove('open-hamburguer');
} else {
// Three burger menu lines clicked, so we toggle hide/show
menu.classList.toggle('open-hamburguer');
}
});
:root {
/* Static Colors*/
--clr-heading-footer: #4C5BA0;
--clr-button: #4C5BA0;
--clr-nav-color: #8D90A1;
/* (Default) Page Settings */
height: 100%;
font-family: 'Montserrat';
padding: 2% 12%;
--clr-box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
body {
background: var(--background);
color: var(--foreground);
}
.logo-style {
/* Logo Style */
font-style: normal;
font-weight: bold;
font-size: 2rem;
line-height: 2.438rem;
letter-spacing: 0.05em;
color: #4C5BA0;
margin: 0;
}
/*
Navigation
*/
.topnav {
background: none !important;
align-items: center;
display: flex;
justify-content: space-between;
}
.topnav a {
color: blue;
text-align: center;
padding: 0.09rem 0.30rem;
text-decoration: none;
font-size: 1.063rem;
}
.right-nav {
display: flex;
flex-direction: row;
gap: 0.625rem;
align-items: center;
position: relative;
}
.topnav-menu {
/* Burger Menu Content*/
width: 300px;
transition: all .5s ease;
background-color: none;
padding: 0;
max-height: 0;
position: absolute;
top: 100%;
/* distance itself 100% of the height of parent element */
right: 0;
/* aligned on the right of container */
opacity: 0;
height:0;
overflow:hidden;
/* just to hide it (overwritten when toggle('open-hamburguer') is clicked) */
}
.open-hamburguer .topnav-menu {
opacity: 1;
display: block;
max-height: 300px;
height:auto;
/* here is the only thing you could add find out through js because you can't animate the height */
}
.topnav-menu ul {
/* Burger Menu Content*/
margin: 0;
padding: 0;
list-style: none;
box-shadow: var(--clr-box-shadow);
border-radius: 15px;
/* border-radius is also set here else the shadow looks wired */
}
.topnav-menu ul li:last-child {
border-top: 1px solid gray;
/* last item border -> above Login/Logout */
}
.topnav-menu ul li:first-child a {
border-radius: 15px 15px 0 0;
/* round borders on start */
}
.topnav-menu ul li:last-child a {
border-radius: 0 0 15px 15px;
/* round borders on end */
}
.topnav-menu a {
color: var(--clr-nav-color);
background-color: var(--menu-card-color);
display: block;
text-align: left;
padding: 0.313rem 0.313rem;
text-decoration: none;
font-size: 1.063rem;
transition: all .5s ease;
}
.topnav-menu a:hover {
color: black;
}
.topnav-menu a.active {
color: black;
}
/*
Navigation Burger Menu
*/
.line-one {
width: 1.875rem;
}
.line-two {
width: 1.875rem;
}
.line-three {
width: 1.875rem;
}
.burger-menu div {
width: 1.875rem;
height: 0.25rem;
background-color: var(--clr-nav-color);
margin: 0.313rem 0;
border-radius: 1.563rem;
}
.burger-menu {
width: 1.875rem;
}
.burger-menu:hover div {
width: 1.875rem;
background-color: black;
}
<!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>Metrics</title>
<link href="https://fonts.googleapis.com/css?family=Montserrat:600" rel="stylesheet">
</head>
<body>
<header>
<div class="topnav">
<div class="left-nav">
<p class="logo-style">Metrics</p>
</div>
<div class="right-nav">
<a href="#burger-menu" class="burger-menu outsideOfBurger">
<div class="line-one"></div>
<div class="line-two"></div>
<div class="line-three"></div>
</a>
<div class="topnav-menu outsideOfBurger" id="burgerMenu">
<div>
<ul id="list">
<li>Overall sprint progress </li>
<li>This is a bit longer text to show it splits into new line</li>
<li>Somthing</li>
<li>Somthing</li>
<li>Somthing</li>
<li>Somthing</li>
<li>Somthing</li>
<li>Somthing</li>
<li>Info</li>
<li>Logout</li>
</ul>
</div>
</div>
</div>
</div>
</header>
</body>
</html>
this is my html, css and js code below for side bar menu in bootstrap. the problem is is the header toggle and any other icon is not showing on the menu so i can't expand the menu also all the icons i used from box icons are not showing (also i imported https://cdn.jsdelivr.net/npm/boxicons#latest/css/boxicons.min.css) , is there a way to fix this?
thanks in advance
document.addEventListener("DOMContentLoaded", function(event) {
const showNavbar = (toggleId, navId, bodyId, headerId) =>{
const toggle = document.getElementById(toggleId),
nav = document.getElementById(navId),
bodypd = document.getElementById(bodyId),
headerpd = document.getElementById(headerId)
// Validate that all variables exist
if(toggle && nav && bodypd && headerpd){
toggle.addEventListener('click', ()=>{
// show navbar
nav.classList.toggle('show')
// change icon
toggle.classList.toggle('bx-x')
// add padding to body
bodypd.classList.toggle('body-pd')
// add padding to header
headerpd.classList.toggle('body-pd')
})
}
}
showNavbar('header-toggle','nav-bar','body-pd','header')
/*===== LINK ACTIVE =====*/
const linkColor = document.querySelectorAll('.nav_link')
function colorLink(){
if(linkColor){
linkColor.forEach(l=> l.classList.remove('active'))
this.classList.add('active')
}
}
linkColor.forEach(l=> l.addEventListener('click', colorLink))
// Your code to run since DOM is loaded and ready
});
#import url("https://fonts.googleapis.com/css2?family=Nunito:wght#400;600;700&display=swap");
:root {
--header-height: 3rem;
--nav-width: 68px;
--first-color: #4723D9;
--first-color-light: #AFA5D9;
--white-color: #F7F6FB;
--body-font: 'Nunito', sans-serif;
--normal-font-size: 1rem;
--z-fixed: 100
}
*,
::before,
::after {
box-sizing: border-box
}
body {
position: relative;
margin: var(--header-height) 0 0 0;
padding: 0 1rem;
font-family: var(--body-font);
font-size: var(--normal-font-size);
transition: .5s
}
a {
text-decoration: none
}
.header {
width: 100%;
height: var(--header-height);
position: fixed;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 1rem;
background-color: var(--white-color);
z-index: var(--z-fixed);
transition: .5s
}
.header_toggle {
color: var(--first-color);
font-size: 1.5rem;
cursor: pointer
}
.header_img {
width: 35px;
height: 35px;
display: flex;
justify-content: center;
border-radius: 50%;
overflow: hidden
}
.header_img img {
width: 40px
}
.l-navbar {
position: fixed;
top: 0;
left: -30%;
width: var(--nav-width);
height: 100vh;
background-color: var(--first-color);
padding: .5rem 1rem 0 0;
transition: .5s;
z-index: var(--z-fixed)
}
.nav {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden
}
.nav_logo,
.nav_link {
display: grid;
grid-template-columns: max-content max-content;
align-items: center;
column-gap: 1rem;
padding: .5rem 0 .5rem 1.5rem
}
.nav_logo {
margin-bottom: 2rem
}
.nav_logo-icon {
font-size: 1.25rem;
color: var(--white-color)
}
.nav_logo-name {
color: var(--white-color);
font-weight: 700
}
.nav_link {
position: relative;
color: var(--first-color-light);
margin-bottom: 1.5rem;
transition: .3s
}
.nav_link:hover {
color: var(--white-color)
}
.nav_icon {
font-size: 1.25rem
}
.show {
left: 0
}
.body-pd {
padding-left: calc(var(--nav-width) + 1rem)
}
.active {
color: var(--white-color)
}
.active::before {
content: '';
position: absolute;
left: 0;
width: 2px;
height: 32px;
background-color: var(--white-color)
}
.height-100 {
height: 100vh
}
#media screen and (min-width: 768px) {
body {
margin: calc(var(--header-height) + 1rem) 0 0 0;
padding-left: calc(var(--nav-width) + 2rem)
}
.header {
height: calc(var(--header-height) + 1rem);
padding: 0 2rem 0 calc(var(--nav-width) + 2rem)
}
.header_img {
width: 40px;
height: 40px
}
.header_img img {
width: 45px
}
.l-navbar {
left: 0;
padding: 1rem 1rem 0 0
}
.show {
width: calc(var(--nav-width) + 156px)
}
.body-pd {
padding-left: calc(var(--nav-width) + 188px)
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <link href="/assets/images/logo.png" rel="icon" type="icon"> -->
<link rel="stylesheet" href="assets/css/style.css">
<script src="js/scripts.js"> </script>
<link href='https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css'>
<script src='https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js'></script>
<link href='https://cdn.jsdelivr.net/npm/boxicons#latest/css/boxicons.min.css'>
</head>
<body id="body-pd">
<header class="header" id="header">
<div class="header_toggle"> <i class='bx bx-menu' id="header-toggle"></i> </div>
</header>
<div class="l-navbar" id="nav-bar">
<nav class="nav">
<div> <i class='bx bx-layer nav_logo-icon'></i> <span class="nav_logo-name">BBBootstrap</span>
<div class="nav_list"> <i class='bx bx-grid-alt nav_icon'></i> <span class="nav_name">Dashboard</span> <i class='bx bx-user nav_icon'></i> <span class="nav_name">Users</span> <i class='bx bx-message-square-detail nav_icon'></i> <span class="nav_name">Messages</span> <i class='bx bx-bookmark nav_icon'></i> <span class="nav_name">Bookmark</span> <i class='bx bx-folder nav_icon'></i> <span class="nav_name">Files</span> <i class='bx bx-bar-chart-alt-2 nav_icon'></i> <span class="nav_name">Stats</span> </div>
</div> <i class='bx bx-log-out nav_icon'></i> <span class="nav_name">SignOut</span>
</nav>
</div>
<!--Container Main start-->
<div class="height-100 bg-light">
<h4>Main Components</h4>
</div>
<!--Container Main end-->
You can keep the following code in your head tag. Found this cdn link from there official web page.
<link href='https://unpkg.com/boxicons#2.0.7/css/boxicons.min.css' rel='stylesheet'>
This worked for me
Change your bootstrap cdn with this
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css">
And add some css code
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
margin-bottom: 0px;
}
MUST work
Hey Guys I have a Side menu Bar which opens and closes on pressing a toggle icon, but the menu bar collapses when the page refreshes ( or when another menu is pressed )and the colour of the selected menu also disappears. I know local storage is a good way to keep the state. I tried many times, but couldn't figure out a method. Any help is very much appreciated. Posted below is my working code so far without the local storage. Thank you for your time.
/*===== EXPANDER MENU =====*/
const showMenu = (toggleId, navbarId, bodyId) => {
const toggle = document.getElementById(toggleId),
navbar = document.getElementById(navbarId),
bodypadding = document.getElementById(bodyId)
if (toggle && navbar) {
toggle.addEventListener('click', () => {
navbar.classList.toggle('expander')
bodypadding.classList.toggle('body-pd')
})
}
}
showMenu('nav-toggle', 'navbar', 'body-pd')
/*===== LINK ACTIVE =====*/
const linkColor = document.querySelectorAll('.nav__link')
function colorLink() {
linkColor.forEach(l => l.classList.remove('active'))
this.classList.add('active')
}
linkColor.forEach(l => l.addEventListener('click', colorLink))
/*===== COLLAPSE MENU =====*/
const linkCollapse = document.getElementsByClassName('collapse__link')
var i
for (i = 0; i < linkCollapse.length; i++) {
linkCollapse[i].addEventListener('click', function() {
const collapseMenu = this.nextElementSibling
collapseMenu.classList.toggle('showCollapse')
const rotate = collapseMenu.previousElementSibling
rotate.classList.toggle('rotate')
})
}
#import url("https://fonts.googleapis.com/css2?family=Poppins:wght#400;600&display=swap");
/*===== VARIABLES CSS =====*/
:root {
--nav-width: 92px;
/*===== Colores =====*/
--first-color: #016FFE;
--bg-color: #1C1F2B;
--sub-color: #B6CEFC;
--white-color: #FFF;
/*===== Fuente y tipografia =====*/
--body-font: 'Poppins', sans-serif;
--normal-font-size: 1rem;
--small-font-size: .875rem;
/*===== z index =====*/
--z-fixed: 100;
}
/*===== BASE =====*/
*,
::before,
::after {
box-sizing: border-box;
}
body {
position: relative;
margin: 0;
padding: 2rem 0 0 6.75rem;
font-family: var(--body-font);
font-size: var(--normal-font-size);
transition: .5s;
}
h1 {
margin: 0;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
a {
text-decoration: none;
}
/*===== l NAV =====*/
.l-navbar {
position: fixed;
top: 0;
left: 0;
width: var(--nav-width);
height: 100vh;
background-color: var(--bg-color);
color: var(--white-color);
padding: 1.5rem 1.5rem 2rem;
transition: .5s;
z-index: var(--z-fixed);
}
/*===== NAV =====*/
.nav {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
}
.nav__brand {
display: grid;
grid-template-columns: max-content max-content;
justify-content: space-between;
align-items: center;
margin-bottom: 2rem;
}
.nav__toggle {
font-size: 1.25rem;
padding: .75rem;
cursor: pointer;
}
.nav__logo {
color: var(--white-color);
font-weight: 600;
}
.nav__link {
display: grid;
grid-template-columns: max-content max-content;
align-items: center;
column-gap: .75rem;
padding: .75rem;
color: var(--white-color);
border-radius: .5rem;
margin-bottom: 1rem;
transition: .3s;
cursor: pointer;
transition: 0.5s;
}
.nav__link:hover {
background-color: var(--first-color);
}
.nav__icon {
font-size: 1.25rem;
}
.nav__name {
font-size: var(--small-font-size);
}
/*Expander menu*/
.expander {
width: calc(var(--nav-width) + 9.25rem);
}
/*Add padding body*/
.body-pd {
padding: 2rem 0 0 16rem;
}
/*Active links menu*/
.active {
background-color: var(--first-color);
}
/*===== COLLAPSE =====*/
.collapse {
grid-template-columns: 20px max-content 1fr;
}
.collapse__link {
justify-self: flex-end;
transition: .5s;
}
.collapse__menu {
display: none;
padding: .75rem 2.25rem;
}
.collapse__sublink {
color: var(--sub-color);
font-size: var(--small-font-size);
}
.collapse__sublink:hover {
color: var(--white-color);
}
/*Show collapse*/
.showCollapse {
display: block;
}
/*Rotate icon*/
.rotate {
transform: rotate(180deg);
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ===== CSS ===== -->
<link rel="stylesheet" href="assets/css/styles.css">
<link href="https://fonts.googleapis.com/css?family=Comfortaa&display=swap" rel="stylesheet">
<title>Sidebar sub menus</title>
</head>
<body id="body-pd">
<div class="l-navbar" id="navbar">
<nav class="nav">
<div>
<div class="nav__brand">
<ion-icon name="menu-outline" class="nav__toggle" id="nav-toggle"></ion-icon>
</div>
<div class="nav__list">
<a href="template.html" class="nav__link active">
<ion-icon name="home-outline" class="nav__icon"></ion-icon>
<span class="nav__name">Dashboard</span>
</a>
<a href="trial5.html" class="nav__link">
<ion-icon name="bulb-outline" class="nav__icon"></ion-icon>
<span class="nav__name">Trailer Lights</span>
</a>
<div class="nav__link collapse">
<ion-icon name="videocam" class="nav__icon"></ion-icon>
<span class="nav__name">Video Feed</span>
<ion-icon name="chevron-down-outline" class="collapse__link"></ion-icon>
<ul class="collapse__menu">
Data
Group
Members
</ul>
</div>
<a href="#" class="nav__link">
<ion-icon name="pie-chart-outline" class="nav__icon"></ion-icon>
<span class="nav__name">Analytics</span>
</a>
<div class="nav__link collapse">
<ion-icon name="people-outline" class="nav__icon"></ion-icon>
<span class="nav__name">Team</span>
<ion-icon name="chevron-down-outline" class="collapse__link"></ion-icon>
<ul class="collapse__menu">
Data
Group
Members
</ul>
</div>
</div>
</div>
<a href="#" class="nav__link">
<ion-icon name="log-out-outline" class="nav__icon"></ion-icon>
<span class="nav__name">Log Out</span>
</a>
</nav>
</div>
<!-- ===== IONICONS ===== -->
<script src="https://unpkg.com/ionicons#5.1.2/dist/ionicons.js"></script>
<!-- ===== MAIN JS ===== -->
<script src="assets/js/main.js"></script>
</body>
</html>
In the forEach loop where you add the event listeners, I added a data attribute to store an "index" for each .nav__link. That is what is to be stored in localStorage on click.
In the same loop, if there is an "index' stored, add the active class and remove everywhere else.
I also fixed a Deprecated script warning that you had about ionicon.
;)
/*===== EXPANDER MENU =====*/
const showMenu = (toggleId, navbarId, bodyId) => {
const toggle = document.getElementById(toggleId),
navbar = document.getElementById(navbarId),
bodypadding = document.getElementById(bodyId)
if (toggle && navbar) {
toggle.addEventListener('click', () => {
navbar.classList.toggle('expander')
bodypadding.classList.toggle('body-pd')
})
}
}
showMenu('nav-toggle', 'navbar', 'body-pd')
/*===== LINK ACTIVE =====*/
const linkColor = document.querySelectorAll('.nav__link')
function colorLink() {
linkColor.forEach(l => l.classList.remove('active'))
this.classList.add('active')
// Added this to read data attribute
let this_index = this.getAttribute("data-nav_link_index")
//localStorage.setItem("active_nav_link", this_index) // Commeneted here because SO disallow it and throws errors
}
linkColor.forEach((l,i) => {
l.addEventListener('click', colorLink);
// Added this to set data attribute
l.setAttribute("data-nav_link_index", i);
// Added this to add the active class
// Commeneted here because SO disallow it and throws errors
/*
if(localStorage.getItem("active_nav_link")==i){
l.classList.add("active");
}else if(localStorage.getItem("active_nav_link")!==null){
l.classList.remove("active");
}
*/
})
/*===== COLLAPSE MENU =====*/
const linkCollapse = document.getElementsByClassName('collapse__link')
var i
for (i = 0; i < linkCollapse.length; i++) {
linkCollapse[i].addEventListener('click', function() {
const collapseMenu = this.nextElementSibling
collapseMenu.classList.toggle('showCollapse')
const rotate = collapseMenu.previousElementSibling
rotate.classList.toggle('rotate')
})
}
#import url("https://fonts.googleapis.com/css2?family=Poppins:wght#400;600&display=swap");
/*===== VARIABLES CSS =====*/
:root {
--nav-width: 92px;
/*===== Colores =====*/
--first-color: #016FFE;
--bg-color: #1C1F2B;
--sub-color: #B6CEFC;
--white-color: #FFF;
/*===== Fuente y tipografia =====*/
--body-font: 'Poppins', sans-serif;
--normal-font-size: 1rem;
--small-font-size: .875rem;
/*===== z index =====*/
--z-fixed: 100;
}
/*===== BASE =====*/
*,
::before,
::after {
box-sizing: border-box;
}
body {
position: relative;
margin: 0;
padding: 2rem 0 0 6.75rem;
font-family: var(--body-font);
font-size: var(--normal-font-size);
transition: .5s;
}
h1 {
margin: 0;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
a {
text-decoration: none;
}
/*===== l NAV =====*/
.l-navbar {
position: fixed;
top: 0;
left: 0;
width: var(--nav-width);
height: 100vh;
background-color: var(--bg-color);
color: var(--white-color);
padding: 1.5rem 1.5rem 2rem;
transition: .5s;
z-index: var(--z-fixed);
}
/*===== NAV =====*/
.nav {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
}
.nav__brand {
display: grid;
grid-template-columns: max-content max-content;
justify-content: space-between;
align-items: center;
margin-bottom: 2rem;
}
.nav__toggle {
font-size: 1.25rem;
padding: .75rem;
cursor: pointer;
}
.nav__logo {
color: var(--white-color);
font-weight: 600;
}
.nav__link {
display: grid;
grid-template-columns: max-content max-content;
align-items: center;
column-gap: .75rem;
padding: .75rem;
color: var(--white-color);
border-radius: .5rem;
margin-bottom: 1rem;
transition: .3s;
cursor: pointer;
transition: 0.5s;
}
.nav__link:hover {
background-color: var(--first-color);
}
.nav__icon {
font-size: 1.25rem;
}
.nav__name {
font-size: var(--small-font-size);
}
/*Expander menu*/
.expander {
width: calc(var(--nav-width) + 9.25rem);
}
/*Add padding body*/
.body-pd {
padding: 2rem 0 0 16rem;
}
/*Active links menu*/
.active {
background-color: var(--first-color);
}
/*===== COLLAPSE =====*/
.collapse {
grid-template-columns: 20px max-content 1fr;
}
.collapse__link {
justify-self: flex-end;
transition: .5s;
}
.collapse__menu {
display: none;
padding: .75rem 2.25rem;
}
.collapse__sublink {
color: var(--sub-color);
font-size: var(--small-font-size);
}
.collapse__sublink:hover {
color: var(--white-color);
}
/*Show collapse*/
.showCollapse {
display: block;
}
/*Rotate icon*/
.rotate {
transform: rotate(180deg);
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ===== CSS ===== -->
<link rel="stylesheet" href="assets/css/styles.css">
<link href="https://fonts.googleapis.com/css?family=Comfortaa&display=swap" rel="stylesheet">
<title>Sidebar sub menus</title>
</head>
<body id="body-pd">
<div class="l-navbar" id="navbar">
<nav class="nav">
<div>
<div class="nav__brand">
<ion-icon name="menu-outline" class="nav__toggle" id="nav-toggle"></ion-icon>
</div>
<div class="nav__list">
<a href="template.html" class="nav__link active">
<ion-icon name="home-outline" class="nav__icon"></ion-icon>
<span class="nav__name">Dashboard</span>
</a>
<a href="trial5.html" class="nav__link">
<ion-icon name="bulb-outline" class="nav__icon"></ion-icon>
<span class="nav__name">Trailer Lights</span>
</a>
<div class="nav__link collapse">
<ion-icon name="videocam" class="nav__icon"></ion-icon>
<span class="nav__name">Video Feed</span>
<ion-icon name="chevron-down-outline" class="collapse__link"></ion-icon>
<ul class="collapse__menu">
Data
Group
Members
</ul>
</div>
<a href="#" class="nav__link">
<ion-icon name="pie-chart-outline" class="nav__icon"></ion-icon>
<span class="nav__name">Analytics</span>
</a>
<div class="nav__link collapse">
<ion-icon name="people-outline" class="nav__icon"></ion-icon>
<span class="nav__name">Team</span>
<ion-icon name="chevron-down-outline" class="collapse__link"></ion-icon>
<ul class="collapse__menu">
Data
Group
Members
</ul>
</div>
</div>
</div>
<a href="#" class="nav__link">
<ion-icon name="log-out-outline" class="nav__icon"></ion-icon>
<span class="nav__name">Log Out</span>
</a>
</nav>
</div>
<!-- ===== IONICONS ===== -->
<script type="module" src="https://unpkg.com/ionicons#5.1.2/dist/ionicons/ionicons.esm.js"></script>
<!-- ===== MAIN JS ===== -->
<script src="assets/js/main.js"></script>
</body>
</html>
localStorage is not allowed in SO snippets... So have a look at my CodePen
EDIT
About the expanded/collapsed state of the menu, you just have to store another item...
/*===== EXPANDER MENU =====*/
// Have the menu state in a variable
let menu_expanded = Boolean(localStorage.getItem("expanded"));
const showMenu = (toggleId, navbarId, bodyId) => {
const toggle = document.getElementById(toggleId),
navbar = document.getElementById(navbarId),
bodypadding = document.getElementById(bodyId)
if (toggle && navbar) {
toggle.addEventListener('click', () => {
// Toggle the variable
menu_expanded = !menu_expanded
// Use the variable in both toggle method
navbar.classList.toggle('expander', menu_expanded)
bodypadding.classList.toggle('body-pd', menu_expanded)
// Save to localStorage
localStorage.setItem("expanded", (menu_expanded)?"true":"false")
})
}
}
showMenu('nav-toggle', 'navbar', 'body-pd')
Hello my menu links wont Connect to the other web pages. Im pretty sure one of my javascript functions is causing these menu links to not work but im not sure how to figure out how to fix this.
I added a function that creates a menu underline under each menu. So if i had to guess this is probably what is causing the issue. You can see the website live if you click on the link below.
http://lonestarwebandgraphics.com/
// ============= MENU HOVER UNDERLINE EFFECT - START =================
// Menu Underline Function - START
(function() {
const target = document.querySelector(".target");
const links = document.querySelectorAll(".mynav a");
const colors = ["#f7c51e"];
// const colors = ["deepskyblue", "orange", "firebrick", "gold", "magenta", "black", "darkblue"];
function mouseenterFunc() {
if (!this.parentNode.classList.contains("active")) {
for (let i = 0; i < links.length; i++) {
if (links[i].parentNode.classList.contains("active")) {
links[i].parentNode.classList.remove("active");
}
// links[i].style.opacity = "0.25";
}
this.parentNode.classList.add("active");
this.style.opacity = "1";
const width = this.getBoundingClientRect().width;
const height = this.getBoundingClientRect().height;
const left = this.getBoundingClientRect().left + window.pageXOffset;
const top = this.getBoundingClientRect().top + window.pageYOffset;
const color = colors[Math.floor(Math.random() * colors.length)];
target.style.width = `${width}px`;
target.style.height = `${height}px`;
target.style.left = `${left}px`;
target.style.top = `${top}px`;
target.style.borderColor = color;
target.style.transform = "none";
}
}
for (let i = 0; i < links.length; i++) {
links[i].addEventListener("click", (e) => e.preventDefault());
links[i].addEventListener("mouseenter", mouseenterFunc);
}
function resizeFunc() {
const active = document.querySelector(" .mynav li.active");
if (active) {
const left = active.getBoundingClientRect().left + window.pageXOffset;
const top = active.getBoundingClientRect().top + window.pageYOffset;
target.style.left = `${left}px`;
target.style.top = `${top}px`;
}
}
window.addEventListener("resize", resizeFunc);
// Event Listener To Remove Line From Floating in Air When Leaving Dropdown Box - START
document.querySelector(".mynav").addEventListener("mouseleave", function() {
target.removeAttribute("style");
})
// Event Listener To Remove Line From Floating in Air When Leaving Dropdown Box - END
})();
// ============= MENU HOVER UNDERLINE EFFECT - END =================
// ============= Add "Responsive" Class When Click On "Menu Click Here" Hamburger - Menu Dropdown =================
function myFunction() {
var x = document.getElementById("mybottomnav");
if(x.classList.contains("responsive")) {
x.classList.remove("responsive");
} else {
x.classList.add("responsive");
}
}
// // This code has an error - It removes the sticky in mobile view
// function myFunction() {
// var x = document.getElementById("mybottomnav");
// if (x.className === "bottomnav") {
// x.className += " responsive";
// } else {
// x.className = "bottomnav";
// }
// }
// ============= WHITE NAVBAR STICKY =================
// When the user scrolls the page, execute myFunction
window.onscroll = function() {stickyFunction()};
// Get the navbar
var navbar = document.getElementById("mybottomnav");
// Get the offset position of the navbar
var sticky = mybottomnav.offsetTop;
// Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position
function stickyFunction() {
if (window.pageYOffset >= sticky) {
mybottomnav.classList.add("sticky")
} else {
mybottomnav.classList.remove("sticky");
}
}
// Fixed White Navbar Sticky Dropdown To Work on Mobile.
// function fixed_top_menu() {
// var windows = $(window);
// windows.on("scroll", function () {
// var header_height = $(".bottomnav").height();
// var scrollTop = windows.scrollTop();
// if (scrollTop > header_height) {
// $(".bottomnav").addClass("sticky");
// } else {
// $(".bottomnav").removeClass("sticky");
// }
// });
// }
// fixed_top_menu();
#import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700,900&display=swap');
/*
YELLOW - #f7c51e
GREY - #363636
background white - #f6f6f6
*/
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.color-overlay-container {
justify-content: center;
align-items: center;
position: relative;
}
.color-overlay {
width: 100%;
height: 100%;
background: #000;
opacity: .5;
z-index: 2;
position: absolute;
}
.btn-black{
padding: 1.5rem 2rem;
color: white;
background: black;
text-transform: uppercase;
font-weight: 900;
}
.btn-yellow{
padding: 1.5rem 2rem;
color: white;
background: #f7c51e;
text-transform: uppercase;
font-weight: 900;
}
body {
font-family: 'Roboto', sans-serif;
line-height: 1.4;
}
a {
text-decoration: none;
}
p {
margin: .5rem 0;
}
/* Utility Classes */
/* Grid Container */
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 1rem;
margin: auto;
grid-auto-rows: minmax(200px, auto);
}
.grid-container-2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 1rem;
margin: auto;
}
.card {
background: #fff;
padding: 1rem;
}
/* Grid Container - END */
.container {
max-width: 1404px;
margin: auto;
padding: 0 2rem;
overflow: hidden;
}
.text-center {
text-align: center;
}
.text-yellow {
color: #f7c51e;
}
.bg-yellow {
background: #f7c51e;
color: black;
}
.bg-grey {
background: #f9f9f9;
color: black;
}
.bg-black {
background:black;
color: white;
}
.l-heading {
font-weight: bold;
font-size: 4rem;
margin-bottom: 0.75rem;
line-height: 1.1;
}
.m-heading {
font-size: 2rem;
margin-bottom: 0.75rem;
line-height: 1.1;
}
.lead {
font-size: 1.3rem;
margin: 0.75rem 0;
}
/* Padding */
.py-1 {
padding: 1.5rem 0;
}
.py-2 {
padding: 2rem 0;
}
.py-3 {
padding: 3rem 0;
}
/* All Around Padding */
.p-1 {
padding: 1.5rem;
}
.p-2 {
padding: 2rem;
}
.p-3 {
padding: 3rem;
}
/* Utility Classes - END */
/* ================ HOME PAGE ==================== */
/* HEADER */
.site-header {
background-color: transparent;
}
.site-header .header-container {
background: black;
color: white;
}
/* BLACK BAR */
.site-header .header-container .header-container_wrap {
padding: 30px 5px;
/* background: red; */
}
#masthead .header-container .header-container_wrap .items {
display: flex;
justify-content: center;
}
#masthead .header-container .header-container_wrap .items .contact-info {
display: flex;
}
#masthead .header-container .header-container_wrap .items .quality-logo {
margin-right: 3rem;
line-height: 5px;
}
#masthead .header-container .header-container_wrap .items .quality-logo p {
font-size: 14px;
line-height: 1.5;
}
#masthead .header-container .header-container_wrap .items .item {
display: flex;
align-items: center;
margin-right: 1rem;
}
#masthead .header-container .header-container_wrap .items .item {
display: flex;
align-items: center;
margin-right: 1rem;
}
/*
#masthead .header-container .header-container_wrap .items .item .facebook-like {
text-align: center;
color: white;
background-color: black;
} */
#masthead .header-container .header-container_wrap .items .item .facebook-like {
text-align: center;
background-color: black; /* Blue background */
border: none; /* Remove borders */
color: white; /* White text */
padding: none; /* Some padding */
font-size: 16px; /* Set a font size */
cursor: pointer; /* Mouse pointer on hover */
}
#masthead .header-container .header-container_wrap .items .item .facebook-like:hover {
/* Darker background on mouse-over */
color: #f7c51e;
}
#masthead .header-container .header-container_wrap .items .item .fas {
font-size: 18px;
color: #f7c51e;
margin-right: 1.5rem;
}
#masthead .header-container .header-container_wrap .items .contact-info .item .fas {
font-size: 18px;
color: #f7c51e;
margin-right: 1.5rem;
background: black;
border-radius: 50%;
padding: 10px;
border: 1px solid #363636;
}
/* ========================== Bottom White Header Menu - START ================ */
/* Menu Underline */
.mynav a {
display: block;
font-size: 20px;
color: black;
text-decoration: none;
padding: 7px 15px;
}
.target {
position: absolute;
border-bottom: 4px solid transparent;
z-index: 100;
transform: translateX(-60px);
pointer-events: none;
}
.mynav a,
.target {
transition: all .35s ease-in-out;
}
/* ================================ STICKY ========================*/
/* The sticky class is added to the navbar with JS when it reaches its scroll position */
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.bottomnav.sticky {
padding: 0rem;
}
.bottomnav.sticky .items .item {
margin: auto;
}
.bottomnav.sticky .items .item:nth-child(2) {
display: none;
}
/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
/* .sticky + .swiper-container {
padding-top: 60px;
}
*/
.bottomnav {
background-color: white;
overflow: hidden;
padding: 1rem;
z-index: 1200;
}
#mybottomnav .items {
display: flex;
justify-content: space-between;
align-items: center;
}
#mybottomnav .items .item .mynav ul{
display: flex;
align-items: center;
}
#mybottomnav .items .item .mynav ul li{
display: flex;
align-items: center;
}
#mybottomnav .items .item .mynav ul li:nth-child(4){
margin-left: .5rem;
/* background-color: red; */
}
/* Style the links inside the navigation bar */
.bottomnav a {
/* float: left;
display: block; */
color: rgb(94,94,94);
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
text-transform: uppercase;
font-weight: 600;
}
/* Add an active class to highlight the current page */
/*
.active {
color: black;
font-weight: 600;
color: #363636;
} */
/* Hide the link that should open and close the bottomnav on small screens */
.bottomnav .icon {
display: none;
}
/* ============================ DROP DOWN MENU =============================== */
/* Dropdown container - needed to position the dropdown content */
.dropdown {
/* float: left; */
overflow: hidden;
}
/* Style the dropdown button to fit inside the bottomnav */
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
/* color: rgb(94,94,94); */
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
text-transform: uppercase;
font-weight: 600;
display: flex;
align-items: center;
}
/* Style the dropdown content (hidden by default) */
.dropdown-content {
display: none;
position: fixed;
background-color: #f7c51e;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
color: rgb(94,94,94);
}
/* Style the links inside the dropdown */
.mynav .dropdown-content a {
font-size: 14px;
font-weight: 500;
float: none;
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
text-transform: uppercase;
}
/* Add a dark background on bottomnav links and the dropdown button on hover */
.bottomnav a:hover, .dropdown:hover .dropbtn {
/* background-color: red; */
color: black;
}
/* Add a grey background to dropdown links on hover */
.dropdown-content a:hover {
/* background-color: red; */
color: black;
}
/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
display: block;
z-index: 101;
}
/* SEARCH ICONS */
#mybottomnav .items .item .fa-search{
font-size: 1.25rem;
color: #363636;
}
/* ========================== Bottom White Header Menu - END ================ */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- Keywords -->
<meta name="description" content="Mulching Company for any type of commercial, government or private client!">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="icon" href="img/Quality_Improvements_favicon_Logo.png" type="image/gif" sizes="16x16">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css"
integrity="sha384-REHJTs1r2ErKBuJB0fCK99gCYsVjwxHrSU0N7I1zl9vZbggVJXRMsv/sLlOAGb4M" crossorigin="anonymous">
<!-- CSS STYLES -->
<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" media="screen and (max-width: 1024px)" href="css/mobile.css">
<!-- text animation css -->
<!-- <link rel="stylesheet" href="https://unpkg.com/tachyons/css/tachyons.min.css"> -->
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"> -->
<!-- <link rel="stylesheet" href="css/tachyons-animate.css"> -->
<!-- Swiper Header Slider -->
<!-- <link rel="stylesheet" href="/css/swiper.min.css"> -->
<!-- <link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css"> -->
<title>Quality Mulching</title>
</head>
<body id="home">
<!-- Header Container -->
<!-- Navbar-Black -->
<div id="masthead" class="site-header">
<nav class="header-container">
<!-- Top Black Header Bar -->
<div class="header-container_wrap">
<div class="container">
<div class="items">
<div class="quality-logo">
<a href="https://www.lonestarwebandgraphics.com">
<img border="0" alt="quality-logo" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="quality-logo" >
</a>
<!-- <img src="img/Quality_Improvements_250PX_Logo.png" alt="quality-logo"> -->
<p>Offering Quality work at a fair price to the Central Texas area.</p>
</div>
<div class="contact-info">
<div class="item">
<i class="fas fa-phone"></i>
<div class="contact-block__value-wrap">
<p> Call Today</p>
<p><strong>(555-2042</strong></p>
</div>
</div>
<div class="item">
<i class="fas fa-clock"></i>
<div class="contact-block__value-wrap">
<p>Mon-Fri:<strong> 7am to 7pm</strong></p>
<p>Sat & Sun: 9am-4pm</p>
</div>
</div>
<div class="item">
<i class="fas fa-map-marker-alt"></i>
<p>Serving Central Texas</p>
</div>
<div class="item">
<button class="facebook-like">
<i class="fab fa-facebook-f"></i>
<p>LIKE US</p>
</button>
<!-- <div class="facebook-like">
<i class="fab fa-facebook-f"></i>
<p>LIKE US</p>
</div> -->
</div>
</div>
</div>
</div>
</div>
<!-- ======================== Bottom White header START ======================-->
<div class="bottomnav" id="mybottomnav">
<div class="container">
<div class="items">
<div class="item">
<nav class="mynav">
<!-- Menu Click Here -->
<!-- Hamburger -->
<ul>
<div class="hamburger">
<!-- <p class="active">Menu Click Here</p> -->
<p>Menu Click Here </p> ☰
</div>
<li>About</li>
<!-- DROPDOWN MENU -->
<li>
<div class="dropdown">
<button class="dropbtn">
Services <i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Brush Mulching & Land Clearing
Mapping & Measurement
Erosion Mitigation / Driveways / Roads
Landscaping & Drainage Management
Foundation & Pads
General Dirt Work & Tank Pond Trenching
Demolition & Clean Up
Septic Installation
</div>
</div>
</li>
<!-- DROPDOWN MENU END -->
<li>Photo Gallery</li>
<li>Video Example</li>
<li>Contacts</li>
<!-- ☰ -->
</ul>
</nav>
</div>
<div class="item">
<i class="fas fa-search"></i>
</div>
</div>
</div>
</div>
<span class="target"></span>
<!-- ======================== Bottom White header END ======================-->
</nav>
</div>
<!-- HEADER CONTAINER END -->
The issue was fixed by
Removing - links[i].addEventListener("click", (e) => e.preventDefault());
in javascript.
Hello I created a menu underline in javascript. How do I stop the underline from going on the dropdown menu links? The problem is when I move the mouse out the menu and you still see the line.
Please let me know what is the best way to fix this. Thank you so much.
https://codepen.io/rubenjr005/pen/ExjQdjw?fbclid=IwAR1iXxZro17fFRKXmWKmi4N6sj0d_mRL6g4-MeVNaHip4IvUYM4YtCGJDPc
(function() {
const target = document.querySelector(".target");
const links = document.querySelectorAll(".mynav a");
const colors = ["deepskyblue", "orange", "firebrick", "gold", "magenta", "black", "darkblue"];
function mouseenterFunc() {
if (!this.parentNode.classList.contains("active")) {
for (let i = 0; i < links.length; i++) {
if (links[i].parentNode.classList.contains("active")) {
links[i].parentNode.classList.remove("active");
}
links[i].style.opacity = "0.25";
}
this.parentNode.classList.add("active");
this.style.opacity = "1";
const width = this.getBoundingClientRect().width;
const height = this.getBoundingClientRect().height;
const left = this.getBoundingClientRect().left + window.pageXOffset;
const top = this.getBoundingClientRect().top + window.pageYOffset;
const color = colors[Math.floor(Math.random() * colors.length)];
target.style.width = `${width}px`;
target.style.height = `${height}px`;
target.style.left = `${left}px`;
target.style.top = `${top}px`;
target.style.borderColor = color;
target.style.transform = "none";
}
}
for (let i = 0; i < links.length; i++) {
links[i].addEventListener("click", (e) => e.preventDefault());
links[i].addEventListener("mouseenter", mouseenterFunc);
}
function resizeFunc() {
const active = document.querySelector(" .mynav li.active");
if (active) {
const left = active.getBoundingClientRect().left + window.pageXOffset;
const top = active.getBoundingClientRect().top + window.pageYOffset;
target.style.left = `${left}px`;
target.style.top = `${top}px`;
}
}
window.addEventListener("resize", resizeFunc);
})();
/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
#import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700,900&display=swap');
/*
YELLOW - #f7c51e
GREY - #363636
background white - #f6f6f6
*/
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.color-overlay-container {
justify-content: center;
align-items: center;
position: relative;
}
.color-overlay {
width: 100%;
height: 100%;
background: #000;
opacity: .5;
z-index: 2;
position: absolute;
}
.btn-black{
padding: 1.5rem 2rem;
color: white;
background: black;
text-transform: uppercase;
font-weight: 900;
}
.btn-yellow{
padding: 1.5rem 2rem;
color: white;
background: #f7c51e;
text-transform: uppercase;
font-weight: 900;
}
body {
font-family: 'Roboto', sans-serif;
line-height: 1.4;
}
a {
text-decoration: none;
}
p {
margin: .5rem 0;
}
/* Utility Classes */
/* Grid Container */
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 1rem;
margin: auto;
grid-auto-rows: minmax(200px, auto);
}
.grid-container-2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 1rem;
margin: auto;
}
.card {
background: #fff;
padding: 1rem;
}
/* Grid Container - END */
.container {
max-width: 1404px;
margin: auto;
padding: 0 2rem;
overflow: hidden;
}
.text-center {
text-align: center;
}
.text-yellow {
color: #f7c51e;
}
.bg-yellow {
background: #f7c51e;
color: black;
}
.bg-grey {
background: #f9f9f9;
color: black;
}
.l-heading {
font-weight: bold;
font-size: 4rem;
margin-bottom: 0.75rem;
line-height: 1.1;
}
.m-heading {
font-size: 2rem;
margin-bottom: 0.75rem;
line-height: 1.1;
}
.lead {
font-size: 1.3rem;
margin: 0.75rem 0;
}
/* Padding */
.py-1 {
padding: 1.5rem 0;
}
.py-2 {
padding: 2rem 0;
}
.py-3 {
padding: 3rem 0;
}
/* All Around Padding */
.p-1 {
padding: 1.5rem;
}
.p-2 {
padding: 2rem;
}
.p-3 {
padding: 3rem;
}
/* Utility Classes - END */
/* ================ HOME PAGE ==================== */
/* HEADER */
.site-header {
background-color: transparent;
}
.site-header .header-container {
background: black;
color: white;
}
/* BLACK BAR */
.site-header .header-container .header-container_wrap {
padding: 30px 5px;
/* background: red; */
}
#masthead .header-container .header-container_wrap .items {
display: flex;
}
#masthead .header-container .header-container_wrap .items .contact-info {
display: flex;
}
#masthead .header-container .header-container_wrap .items .quality-logo {
margin-right: 3rem;
line-height: 5px;
}
#masthead .header-container .header-container_wrap .items .quality-logo p {
font-size: 14px;
}
#masthead .header-container .header-container_wrap .items .item {
display: flex;
align-items: center;
margin-right: 1rem;
}
#masthead .header-container .header-container_wrap .items .item {
display: flex;
align-items: center;
margin-right: 1rem;
}
#masthead .header-container .header-container_wrap .items .item .facebook-like {
text-align: center;
}
#masthead .header-container .header-container_wrap .items .item .fas {
font-size: 18px;
color: #f7c51e;
margin-right: 1.5rem;
}
#masthead .header-container .header-container_wrap .items .contact-info .item .fas {
font-size: 18px;
color: #f7c51e;
margin-right: 1.5rem;
background: black;
border-radius: 50%;
padding: 10px;
border: 1px solid #363636;
}
/* ========================== Bottom White Header Menu - START ================ */
/* Menu Underline */
.mynav a {
display: block;
font-size: 20px;
color: black;
text-decoration: none;
padding: 7px 15px;
}
.target {
position: absolute;
border-bottom: 4px solid transparent;
z-index: 100;
transform: translateX(-60px);
pointer-events: none;
}
.mynav a,
.target {
transition: all .35s ease-in-out;
}
/* Add a black background color to the top navigation */
.topnav {
background-color: white;
overflow: hidden;
padding: 1rem;
}
#myTopnav .items {
display: flex;
justify-content: space-between;
align-items: center;
}
#myTopnav .items .item .mynav ul{
display: flex;
align-items: center;
}
#myTopnav .items .item .mynav ul li{
display: flex;
align-items: center;
}
#myTopnav .items .item .mynav ul li:nth-child(4){
margin-left: .5rem;
/* background-color: red; */
}
/* Style the links inside the navigation bar */
.topnav a {
/* float: left;
display: block; */
color: rgb(94,94,94);
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
text-transform: uppercase;
font-weight: 600;
}
/* Add an active class to highlight the current page */
/*
.active {
color: black;
font-weight: 600;
color: #363636;
} */
/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
display: none;
}
/* ============================ DROP DOWN MENU =============================== */
/* Dropdown container - needed to position the dropdown content */
.dropdown {
/* float: left; */
overflow: hidden;
}
/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: rgb(94,94,94);
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
text-transform: uppercase;
font-weight: 600;
display: flex;
align-items: center;
}
/* Style the dropdown content (hidden by default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f7c51e;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
color: rgb(94,94,94);
}
/* Style the links inside the dropdown */
.mynav .dropdown-content a {
font-size: 14px;
font-weight: 500;
float: none;
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
text-transform: uppercase;
}
/* Add a dark background on topnav links and the dropdown button on hover */
.topnav a:hover, .dropdown:hover .dropbtn {
/* background-color: red; */
color: black;
}
/* Add a grey background to dropdown links on hover */
.dropdown-content a:hover {
/* background-color: red; */
color: black;
}
/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
display: block;
z-index: 101;
}
/* SEARCH ICONS */
#myTopnav .items .item .fa-search{
font-size: 1.25rem;
color: #363636;
}
/* ========================== Bottom White Header Menu - END ================ */
<!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">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css"
integrity="sha384-REHJTs1r2ErKBuJB0fCK99gCYsVjwxHrSU0N7I1zl9vZbggVJXRMsv/sLlOAGb4M" crossorigin="anonymous">
<!-- CSS STYLES -->
<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" media="screen and (max-width: 1024px)" href="css/mobile.css">
<!-- Swiper Header Slider -->
<!-- <link rel="stylesheet" href="/css/swiper.min.css"> -->
<!-- <link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css"> -->
<title>Document</title>
</head>
<body id="home">
<!-- Header Container -->
<!-- Navbar-Black -->
<div id="masthead" class="site-header">
<nav class="header-container">
<!-- Top Black Header Bar -->
<div class="header-container_wrap">
<div class="container">
<div class="items">
<div class="quality-logo">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="quality-logo">
<p>Offering Quality work at a fair price to the Central Texas area.</p>
</div>
<div class="contact-info">
<div class="item">
<i class="fas fa-phone"></i>
<div class="contact-block__value-wrap">
<p> Call Today</p>
<p><strong>(972)-555-5555</strong></p>
</div>
</div>
<div class="item">
<i class="fas fa-clock"></i>
<div class="contact-block__value-wrap">
<p>Mon-Fri:<strong> 7am to 7pm</strong></p>
<p>Sat & Sun: 9am-4pm</p>
</div>
</div>
<div class="item">
<i class="fas fa-map-marker-alt"></i>
<p>Serving Central Texas</p>
</div>
<div class="item">
<div class="facebook-like">
<i class="fab fa-facebook-f"></i>
<p>LIKE US</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ======================== Bottom White header START ======================-->
<div class="topnav" id="myTopnav">
<div class="container">
<div class="items">
<div class="item">
<nav class="mynav">
<!-- Menu Click Here -->
<!-- Hamburger -->
<ul>
<div class="hamburger">
<!-- <p class="active">Menu Click Here</p> -->
<p>Menu Click Here </p> ☰
</div>
<li>About
<!-- DROPDOWN MENU -->
<li>
<div class="dropdown">
<button class="dropbtn">
Services <i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Brush Mulching & Land Clearing
Mapping & Measurement
Erosion Mitigation / Driveways / Roads
Landscaping & Drainage Management
Foundation & Pads
General Dirt Work & Tank Pond Trenching
Demolition & Clean Up
Septic Installation
</div>
</div>
</li>
<!-- DROPDOWN MENU END -->
<li>Photo Gallery</li>
<li>Video Example</li>
<li>Contacts</li>
<!-- ☰ -->
</ul>
</nav>
</div>
<div class="item">
<i class="fas fa-search"></i>
</div>
</div>
</div>
</div>
<span class="target"></span>
<!-- ======================== Bottom White header END ======================-->
</nav>
</div>
<!-- HEADER CONTAINER END -->
You can add another event listener that will check if the mouse leaves the whole navigation.
Then you can remove the inline style, thus reseting the target element.
document.querySelector(".mynav").addEventListener("mouseleave", function() {
target.removeAttribute("style");
})