I'm building site navigation. If I tab into a category and hit enter nothing happens. If I press the spacebar I get a flash of the subnav but then it disappears.
I am using a button element to trigger the subnav instead of an anchor tag. If I switch to an anchor tag then it works.
What is causing this to happen in my Javascript and is there a way to make this better?
I've put the entire nav on codepen here: https://codepen.io/sibarad/pen/gORqevp?editors=1010
Here is a basic example of the html:
<ul class="site-menu header-container--nav-mobile">
<li class="site-menu__item site-menu__item--has-submenu">
<button tabindex="0" aria-expanded="false">Nav Link 1
<span class="site-menu__submenu-icon">
<svg aria-hidden="true" width="16" height="16">
<use xlink:href="#mobile-nav-arrow" />
</svg>
</span>
</button>
<!-- Main Nav Item 1 Sub-item -->
<ul class="site-menu__submenu" id="dt_nav-accountbilling">
<li class="site-menu__subitem">Subnav</li>
<li class="site-menu__subitem">Subnav</li>
</ul><!-- /Main Nav Item 1 Sub-item -->
</li><!-- /Main Nav Item 1 -->
Here is my JS:
// Submenu Hide/Show Mobile and Desktop
const items = document.querySelectorAll(".site-menu__item--has-submenu");
const subButton = document.querySelectorAll(".site-menu__item--has-submenu button");
// Activate Submenu
function toggleItem() {
if (this.classList.contains("submenu-active")) {
this.classList.remove("submenu-active");
} else if (site_menu.querySelector(".submenu-active")) {
site_menu.querySelector(".submenu-active").classList.remove("submenu-active");
this.classList.add("submenu-active");
this.setAttribute('aria-expanded', 'true');
} else {
this.classList.add("submenu-active");
this.setAttribute('aria-expanded', 'false');
}
}
// Event Listeners
for (let item of items) {
if (item.querySelector(".site-menu__submenu")) {
item.addEventListener("click", toggleItem, false);
item.addEventListener("keypress", toggleItem, false);
}
}
// Close Submenu From Anywhere
function closeSubmenu(e) {
let isClickInside = site_menu.contains(e.target);
if (!isClickInside && site_menu.querySelector(".submenu-active")) {
site_menu.querySelector(".submenu-active").classList.remove("submenu-active");
}
}
// Event listener for Close Submenu
document.addEventListener("click", closeSubmenu, false);
document.addEventListener('keydown', (event) => {
if (event.key === 'Escape') {
//if esc key was not pressed in combination with ctrl or alt or shift
const isNotCombinedKey = !(event.ctrlKey || event.altKey || event.shiftKey);
if (isNotCombinedKey) {
closeSubmenu(false);
}
}
});
The offending code is here:
for (let item of items) {
if (item.querySelector(".site-menu__submenu")) {
item.addEventListener("click", toggleItem, false);
<!-- this will be triggered as well, reversing your toggle -->
item.addEventListener("keypress", toggleItem, false);
}
}
You are adding 2 listeners that will both trigger on pressing space etc.
You do not need the second listener as you used a <button> which will treat Space etc. as a click event!
Removing the second listener will make the drop down work as expected.
for (let item of items) {
if (item.querySelector(".site-menu__submenu")) {
item.addEventListener("click", toggleItem, false);
}
}
Fixed code and fiddle
/////////////
// Site header/navigation
////////////
(function() {
'use strict';
// Hamburger Animation toggle
const hamburger = document.querySelector('.js-primary-nav__toggle');
const hamburger_text = document.querySelector('.js-primary-nav__toggle-text');
// Mobile Container for Nav Content
const site_menu = document.querySelector('.main-site-menu');
hamburger.addEventListener('click', () => {
hamburger.classList.toggle('toggle-active');
if (hamburger_text.textContent === "Menu") {
hamburger_text.textContent = "Close";
site_menu.classList.add('is-active');
hamburger.setAttribute('aria-expanded', 'true');
document.body.classList.toggle('lock-scroll');
} else {
hamburger_text.textContent = "Menu";
site_menu.classList.remove('is-active');
hamburger.setAttribute('aria-expanded', 'false');
document.body.classList.toggle('lock-scroll');
}
});
// Submenu Hide/Show Mobile and Desktop
const items = document.querySelectorAll(".site-menu__item--has-submenu");
const subButton = document.querySelectorAll(".site-menu__item--has-submenu button");
// Activate Submenu
function toggleItem() {
if (this.classList.contains("submenu-active")) {
this.classList.remove("submenu-active");
} else if (site_menu.querySelector(".submenu-active")) {
site_menu.querySelector(".submenu-active").classList.remove("submenu-active");
this.classList.add("submenu-active");
this.setAttribute('aria-expanded', 'true');
} else {
this.classList.add("submenu-active");
this.setAttribute('aria-expanded', 'false');
}
}
// Event Listeners
for (let item of items) {
if (item.querySelector(".site-menu__submenu")) {
item.addEventListener("click", toggleItem, false);
//item.addEventListener("keypress", toggleItem, false);
}
}
// Close Submenu From Anywhere
function closeSubmenu(e) {
let isClickInside = site_menu.contains(e.target);
if (!isClickInside && site_menu.querySelector(".submenu-active")) {
site_menu.querySelector(".submenu-active").classList.remove("submenu-active");
}
}
// Event listener for Close Submenu
document.addEventListener("click", closeSubmenu, false);
document.addEventListener('keydown', (event) => {
if (event.key === 'Escape') {
//if esc key was not pressed in combination with ctrl or alt or shift
const isNotCombinedKey = !(event.ctrlKey || event.altKey || event.shiftKey);
if (isNotCombinedKey) {
closeSubmenu(false);
}
}
});
}());
body {
font-size: 16px;
line-height: 1.5;
font-family: "Open Sans", "Segoe UI", Tahoma, sans-serif;
}
.os-container--max-width, .header-container--nav-mobile, .header-container {
max-width: 1272px;
margin-right: auto;
margin-left: auto;
padding-left: 12px;
padding-right: 12px;
}
.os-container--fluid {
max-width: 100%;
margin-right: auto;
margin-left: auto;
}
.os-flex-grid {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-left: -8px;
margin-right: -8px;
}
#media (min-width: 672px) {
.os-flex-grid {
margin-left: -12px;
margin-right: -12px;
}
}
.os-flex--stack-mobile {
flex-direction: column;
}
#media (min-width: 672px) {
.os-flex--stack-mobile {
flex-direction: row;
}
}
.os-flex-grid__col {
padding-left: 8px;
padding-right: 8px;
-ms-flex: 1 1 0px;
flex-basis: auto;
flex-grow: 1;
min-width: 0;
max-width: 100%;
position: relative;
width: 100%;
}
#media (min-width: 672px) {
.os-flex-grid__col {
flex-basis: 0;
padding-left: 12px;
padding-right: 12px;
}
}
.os-flex-grid__col--12, .cms-flex-grid__col--12 {
flex-basis: 100%;
}
.os-flex-grid__col--9, .cms-flex-grid__col--9 {
flex-basis: 75%;
}
.os-flex-grid__col--6 {
flex-basis: 50%;
}
.os-flex-grid__col--4 {
flex-basis: 33.3333333333%;
}
.os-flex-grid__col--3 {
flex-basis: 25%;
}
.os-flex-grid__col--2 {
flex-basis: 16.6666666667%;
}
.site-header {
background-color: #fff;
list-style: none;
}
.site-header a {
color: #0e75c4;
}
#media (min-width: 1056px) {
.site-header {
margin-bottom: 42px;
}
}
.site-nav {
display: flex;
flex-direction: column;
align-items: normal;
justify-content: flex-start;
width: 100%;
position: relative;
z-index: 3;
}
#media (min-width: 1056px) {
.site-nav {
display: block;
}
}
#media (min-width: 1056px) {
.header-container {
position: relative;
z-index: 5;
}
}
.header-container--nav-mobile {
padding-left: 1.25rem;
padding-right: 1.25rem;
}
#media (min-width: 1056px) {
.header-container--nav-mobile {
padding-left: inital;
padding-right: inital;
}
}
.header-main {
box-shadow: 0 4px 8px -2px rgba(18, 32, 42, 0.12);
padding-top: 16px;
padding-bottom: 16px;
}
#media (min-width: 1056px) {
.header-main {
box-shadow: none;
padding-top: 32px;
padding-bottom: 32px;
}
}
.header-main__items {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.header-logo img {
width: 100%;
max-width: 131px;
}
#media (min-width: 672px) {
.header-logo img {
max-width: 260px;
}
}
.header-component-wrap {
display: flex;
flex-direction: row;
align-items: flex-end;
}
.header-component-wrap a {
text-decoration: none;
}
.header-component-wrap a:hover {
text-decoration: underline;
}
.header-component-wrap svg {
fill: #213848;
margin-bottom: 8px;
width: 20px;
height: 20px;
}
#media (min-width: 1056px) {
.header-component-wrap svg {
margin-bottom: 0;
margin-right: 8px;
width: 20px;
height: 20px;
}
}
#media (min-width: 1056px) {
.header-component-wrap {
align-items: center;
}
}
.header-main__text {
text-decoration: none;
color: #0e75c4;
font-size: 10px;
font-weight: 600;
letter-spacing: 1.25px;
}
.header-main__text:hover {
text-decoration: underline;
color: #0e75c4;
}
#media (min-width: 1056px) {
.header-main__text {
font-size: 16px;
font-weight: 600;
letter-spacing: normal;
}
}
.site-menu,
.site-menu__submenu {
list-style-type: none;
}
.site-menu {
margin: 0 auto;
background-color: #213848;
display: flex;
flex-direction: column;
align-items: flex-start;
padding-top: 24px;
padding-bottom: 24px;
overflow-y: auto;
}
#media (min-width: 1056px) {
.site-menu {
flex-wrap: nowrap;
flex-direction: row;
align-items: stretch;
justify-content: flex-start;
padding: 0;
padding-right: 8px;
padding-left: 8px;
position: relative;
top: 0;
height: auto;
overflow-y: visible;
border-radius: 6px;
}
}
.main-site-menu {
transition: 0.3s;
position: absolute;
top: 80px;
width: 100%;
left: 0;
left: 0;
opacity: 0;
overflow-x: hidden;
visibility: hidden;
height: 100vh;
background-color: #213848;
padding-bottom: 9.75rem;
}
#media (min-width: 1056px) {
.main-site-menu {
position: relative;
top: 0;
left: 0;
transition: none;
opacity: 1;
visibility: visible;
overflow-x: initial;
height: auto;
padding-bottom: 0;
background-color: transparent;
}
}
.main-site-menu.is-active {
opacity: 1;
visibility: visible;
}
.site-menu__item {
position: relative;
display: inline-block;
margin-bottom: 16px;
width: 100%;
}
#media (min-width: 1056px) {
.site-menu__item {
margin-bottom: 0;
width: auto;
}
}
.site-menu__item a {
display: block;
color: #fff !important;
}
.site-menu__item > a {
font-weight: 600;
font-size: 18px;
}
#media (min-width: 1056px) {
.site-menu__item > a {
padding: 24px 16px;
}
}
#media (min-width: 1272px) {
.site-menu__item > a {
padding: 24px;
}
}
.site-menu__item > a:hover {
cursor: pointer;
}
#media (min-width: 1056px) {
.site-menu__item > a:hover {
background-color: #0e75c4;
}
}
.site-menu__item--has-submenu {
border-bottom: 1px solid #2f4656;
}
#media (min-width: 1056px) {
.site-menu__item--has-submenu {
border-bottom: none;
}
}
#media (min-width: 1056px) {
.site-menu__item.site-menu__button {
margin-left: auto;
}
}
.site-menu__item--has-submenu button {
background-color: transparent;
outline: none;
border: none;
color: #fff;
padding-top: 24px;
padding-bottom: 24px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
width: 100%;
font-size: 16px;
font-weight: 600;
transition: 0.333333333s ease-in-out;
}
.site-menu__item--has-submenu button:hover {
cursor: pointer;
}
#media (min-width: 1056px) {
.site-menu__item--has-submenu button:hover {
background-color: #2f4656;
color: #61bef0;
}
}
.site-menu__item--has-submenu button:focus {
outline: 1px solid #128ddd;
}
#media (min-width: 1056px) {
.site-menu__item--has-submenu button {
padding-top: 16px;
padding-bottom: 16px;
padding-left: 24px;
padding-right: 24px;
font-size: 14px;
}
}
#media (min-width: 1240px) {
.site-menu__item--has-submenu button {
padding-top: 20px;
padding-bottom: 20px;
padding-left: 24px;
padding-right: 24px;
font-size: 16px;
}
}
.site-menu__submenu-icon svg {
width: 16px;
height: 9.33px;
}
#media (min-width: 1056px) {
.site-menu__submenu-icon {
display: none;
}
}
.mobile-nav-arrow {
width: 16px;
height: 9.33px;
transition: 0.3s;
fill: #128ddd;
}
.site-menu__submenu {
font-size: 16px;
background-color: #2f4656;
padding-top: 8px;
padding-right: 24px;
padding-bottom: 8px;
padding-left: 24px;
min-width: 100%;
border-radius: 6px;
transition: max-height 0.4s 0s ease-in-out;
display: none;
max-height: 0;
left: -999rem;
flex-direction: column;
}
#media (min-width: 1056px) {
.site-menu__submenu {
font-size: 14px;
position: absolute;
top: 100%;
left: 0;
margin-left: 0;
min-width: 302px;
display: flex;
flex-direction: column;
border-radius: 0;
border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px;
visibility: hidden;
padding-top: 16px;
padding-bottom: 8px;
}
}
#media (min-width: 1240px) {
.site-menu__submenu {
font-size: 16px;
}
}
#media (min-width: 1056px) {
.site-menu__item--has-submenu:nth-child(7) > .site-menu__submenu {
min-width: 185px;
}
}
#media (min-width: 1240px) {
.site-menu__item--has-submenu:nth-child(7) > .site-menu__submenu {
min-width: 295px;
}
}
#media (min-width: 1272px) {
.site-menu__item--has-submenu:nth-child(7) > .site-menu__submenu {
min-width: 302px;
}
}
.submenu-active .site-menu__submenu {
display: flex;
max-height: inherit;
left: auto;
}
#media (min-width: 1056px) {
.submenu-active .site-menu__submenu {
visibility: visible;
}
}
#media (min-width: 1056px) {
.submenu-active {
background-color: #2f4656;
}
}
.submenu-active > button {
color: #61bef0;
}
.site-menu__submenu-col {
position: relative;
width: 100%;
flex-basis: 0;
flex-grow: 1;
min-width: 0;
max-width: 100%;
list-style-position: inside;
}
#media (min-width: 1056px) {
.site-menu__subitem {
display: inline-block;
}
}
.site-menu__subitem a {
padding-top: 16px;
padding-bottom: 16px;
display: inline-block;
text-decoration: none;
}
.site-menu__subitem a:hover {
text-decoration: underline;
cursor: pointer;
}
#media (min-width: 1056px) {
.site-menu__subitem a {
padding: 0;
margin-bottom: 24px;
}
}
.site-menu__item--mobile-search {
display: block;
}
#media (min-width: 1056px) {
.site-menu__item--mobile-search {
display: none;
}
}
.site-menu__item--mobile-search input {
width: 100%;
padding: 12px;
background-image: url(../images/search-icon.svg);
background-repeat: no-repeat;
background-position: 98% center;
border: 1px solid #687782;
box-shadow: inset 0px 4px 0px #ebebeb;
border-radius: 6px;
}
.primary-nav__toggle {
outline: 0;
border: 0;
background: transparent;
background-color: transparent;
display: inline-block;
cursor: pointer;
padding: 0;
margin: 0;
height: 48px;
}
#media (min-width: 1056px) {
.primary-nav__toggle {
display: none;
}
}
.primary-nav__toggle-bar {
display: block;
width: 24px;
height: 2px;
background-color: #213848;
margin: 6px auto;
transition: 0.4s;
border-radius: 1px;
}
.primary-nav__toggle-bar--bottom {
margin-bottom: 4px;
}
.toggle-active .primary-nav__toggle-bar--top {
transform: rotate(-45deg) translate(-7px, 6px);
}
.toggle-active .primary-nav__toggle-bar--middle {
opacity: 0;
}
.toggle-active .primary-nav__toggle-bar--bottom {
transform: rotate(45deg) translate(-5px, -5px);
}
.lock-scroll {
overflow: hidden;
position: fixed;
width: 100%;
}
<header class="site-header site-header--home">
<nav class="site-nav" role="navigation" aria-label="main menu">
<!-- main header -->
<div class="header-main">
<div class="header-container header-main__items">
<a class="header-logo" href="">Logo</a>
<div class="header-component-wrap">
<!-- Mobile Hamburger Toggle -->
<button class="primary-nav__toggle js-primary-nav__toggle" aria-expanded="false">
<span class="primary-nav__toggle-bar primary-nav__toggle-bar--top"></span>
<span class="primary-nav__toggle-bar primary-nav__toggle-bar--middle"></span>
<span class="primary-nav__toggle-bar primary-nav__toggle-bar--bottom"></span>
<span class="header-main__text js-primary-nav__toggle-text">Menu</span>
</button><!-- /Mobile Hamburger Toggle -->
</div>
</div>
</div>
<!-- Site Navigation Wrappers -->
<div class="header-container">
<div class="main-site-menu">
<!-- Site Nav -->
<ul class="site-menu header-container--nav-mobile">
<!-- Main Nav Item 1 -->
<li class="site-menu__item site-menu__item--has-submenu">
<button tabindex="0" aria-expanded="false">Nav Link 1
<span class="site-menu__submenu-icon">
<svg aria-hidden="true" width="16" height="16">
<use xlink:href="#mobile-nav-arrow" />
</svg>
</span>
</button>
<!-- Main Nav Item 1 Sub-item -->
<ul class="site-menu__submenu" id="dt_nav-accountbilling">
<li class="site-menu__subitem">Subnav</li>
<li class="site-menu__subitem">Subnav</li>
<li class="site-menu__subitem">Subnav</li>
<li class="site-menu__subitem">Subnav</li>
<li class="site-menu__subitem">Subnav</li>
<li class="site-menu__subitem">Subnav</li>
</ul><!-- /Main Nav Item 1 Sub-item -->
</li><!-- /Main Nav Item 1 -->
<!-- Main Nav Item 2 -->
<li class="site-menu__item site-menu__item--has-submenu">
<button tabindex="0" aria-expanded="false">Nav Link 2
<span class="site-menu__submenu-icon">
<svg aria-hidden="true" width="16" height="16">
<use xlink:href="#mobile-nav-arrow" />
</svg>
</span>
</button>
<!-- Main Nav Item 2 Sub-item -->
<ul class="site-menu__submenu" id="dt_nav-savemoney">
<li class="site-menu__subitem">Subnav</li>
<li class="site-menu__subitem">Subnav</li>
<li class="site-menu__subitem">Subnav</li>
<li class="site-menu__subitem">Subnav</li>
<li class="site-menu__subitem">Subnav</li>
<li class="site-menu__subitem">Subnav</li>
<li class="site-menu__subitem">Subnav</li>
<li class="site-menu__subitem">Subnav</li>
</ul><!-- /Main Nav Item 2 Sub-item -->
</li><!-- /Main Nav Item 2 -->
<!-- Main Nav Item 3 -->
<li class="site-menu__item site-menu__item--has-submenu">
<button tabindex="0" aria-expanded="false">Nav Link 3
<span class="site-menu__submenu-icon">
<svg aria-hidden="true" width="16" height="16">
<use xlink:href="#mobile-nav-arrow" />
</svg>
</span>
</button>
<!-- Main Nav Item 3 Sub-item -->
<ul class="site-menu__submenu" id="dt_nav-outagesstorms">
<li class="site-menu__subitem">Subnav</li>
<li class="site-menu__subitem">Subnav</li>
<li class="site-menu__subitem">Subnav</li>
<li class="site-menu__subitem">Subnav</li>
<li class="site-menu__subitem">Subnav</li>
<li class="site-menu__subitem">Subnav</li>
<li class="site-menu__subitem">Subnav</li>
</ul><!-- /Main Nav Item 3 Sub-item -->
</li><!-- /Main Nav Item 3 -->
<!-- Main Nav Item 4 -->
<li class="site-menu__item site-menu__item--has-submenu">
<button tabindex="0" aria-expanded="false">Nav Link 4
<span class="site-menu__submenu-icon">
<svg aria-hidden="true" width="16" height="16">
<use xlink:href="#mobile-nav-arrow" />
</svg>
</span>
</button>
<!-- Main Nav Item 4 Sub-item -->
<ul class="site-menu__submenu" id="dt_nav-safety">
<li class="site-menu__subitem">Subnav</li>
<li class="site-menu__subitem">Subnav</li>
<li class="site-menu__subitem">Subnav</li>
<li class="site-menu__subitem">Subnav</li>
<li class="site-menu__subitem">Subnav</li>
<li class="site-menu__subitem">Subnav</li>
<li class="site-menu__subitem">Subnav</li>
<li class="site-menu__subitem">Subnav</li>
</ul><!-- /Main Nav Item 4 Sub-item -->
</li><!-- /Main Nav Item 4 -->
</ul><!-- /Site Nav -->
</div>
</div><!-- /Site Navigation Wrappers -->
</nav>
</header><!-- /Begin ES Site Header -->
Related
I am using the onclick method for turning my navbar on/off the problem that I'm having is when I adjust my screen size to mobile view my nav auto turns on.
I'm not very good at JavaScript. I have just started learning it so just fiddled around and absolutely nothing worked for me. Someone told me to put aria-expanded on my HTML so also tried that:
function closeNav() {
document.getElementById("nav_bar").style.height = "0%";
document.getElementById("open-btn").style.display = "inline-block";
document.getElementById("close-btn").style.display = "none";
}
function openNav() {
document.getElementById("nav_bar").style.height = "100%";
document.getElementById("open-btn").style.display = "none";
document.getElementById("close-btn").style.display = "inline-block";
}
body {
background: url(images/bg-img-01.jpg) no-repeat;
background-size: cover;
}
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#nav_bar {
background: radial-gradient( ellipse at top, rgba(196, 199, 200, 0.8), rgba(250, 255, 255, 0.02) 60%, rgba(0, 0, 0, 0) 1%);
position: fixed;
top: 0;
width: 100%;
}
#nav_bar>img {
display: none;
}
.nav {
background: none;
overflow: hidden;
display: flex;
margin-inline: auto;
flex-direction: row;
justify-content: space-around;
align-items: center;
list-style: none;
width: 65%;
left: 20%;
padding: 1.4em;
}
.list-item {
text-decoration: none;
color: #CBD5DF;
font-weight: bolder;
}
.list-item {
position: relative;
}
.list-item::before {
position: absolute;
content: "";
background-color: #535792;
height: 4px;
width: 0%;
top: 25px;
transition: all .3s ease-in;
}
.list-item:hover::before {
width: 100%;
}
.list-item:hover {
color: #C4C7C8;
}
#close-btn,
#open-btn {
display: none;
}
#media only screen and (max-width:768px) {
#nav_bar>img {
display: block;
position: absolute;
width: 10em;
left: 20%;
top: 10%;
}
#nav_bar {
width: 100%;
position: fixed;
z-index: 1;
top: 0;
overflow: hidden;
transition: 0.5s;
}
.nav {
position: relative;
display: flex;
flex-direction: column;
gap: 1.2rem;
top: 20%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.list-item {
text-decoration: none;
display: block;
color: #ffdada;
font-size: 1.5rem;
transition: 0.3s;
}
#close-btn,
#open-btn {
display: block;
position: absolute;
right: 25px;
top: 20px;
font-size: 2rem;
color: #818181;
transition: all 0.3s;
}
#close-btn:hover {
color: #fff;
}
<body>
<div id="nav_bar">
<a href="#" id="close-btn">
<i aria-expanded="false" onclick="closeNav()" class="bi bi-x-lg"></i>
</a>
<img src="assests/images/moon.png" alt="" />
<div class="nav">
<a class="list-item" href="#">Home</a>
<a class="list-item" href="#">About Me</a>
<a class="list-item" href="#">Projects</a>
<a class="list-item" href="#">C.V</a>
<a class="list-item" href="#">Contact</a>
</div>
</div>
<a aria-expanded="false" href="#" id="open-btn" onclick="openNav()"><i class="bi bi-list"></i
></a>
<script src="assests/nav.js"></script>
</body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
Make use of the classList.toggle function that adds/remove a class from the Navbar. In this example, I add or remove the class d-none that has the property: display: none in CSS. With that you can hide or show the navbar by pressing the same button with a single line of code:
const BUTTON = document.querySelector('#toggle_navBar');
const NAV = document.querySelector('nav');
BUTTON.addEventListener('click', function() {
NAV.classList.toggle('d-none');
});
body {
background: url(images/bg-img-01.jpg) no-repeat;
background-size: cover;
}
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
nav {
background: radial-gradient( ellipse at top, rgba(196, 199, 200, 0.8), rgba(250, 255, 255, 0.02) 60%, rgba(0, 0, 0, 0) 1%);
position: sticky;
top: 0;
width: 100%;
}
menu {
background: none;
overflow: hidden;
display: flex;
margin-inline: auto;
flex-direction: row;
justify-content: space-around;
align-items: center;
list-style: none;
width: 65%;
left: 20%;
padding: 1.4em;
}
nav li a {
text-decoration: none;
color: #CBD5DF;
font-weight: bolder;
position: relative;
}
nav li a::before {
position: absolute;
content: "";
background-color: #535792;
height: 4px;
width: 0%;
top: 25px;
transition: all .3s ease-in;
}
nav li a:hover::before {
width: 100%;
}
nav li a:hover {
color: #C4C7C8;
}
.d-none {
display: none;
}
<nav>
<img src="assests/images/moon.png" alt="" />
<menu>
<li><a class="list-item" href="#">Home</a></li>
<li><a class="list-item" href="#">About Me</a></li>
<li><a class="list-item" href="#">Projects</a></li>
<li><a class="list-item" href="#">C.V</a></li>
<li><a class="list-item" href="#">Contact</a></li>
</menu>
</nav>
<button id="toggle_navBar">Toggle NavBar</button>
A few changes I made were for semantic reasons. You should use semantic tags if possible and have accessibility in mind. Accessibility is also part of SEO-ratings!
I think the basic idea would be to have a button toggle some variable and then update the UI according to the value of that variable.
You can do this in several ways, but here is an example of a simple way to do it:
// Get your toggle button element
const toggle = document.querySelector(".nav-toggle");
// Get your nav element
const nav = document.querySelector(".nav");
// Create a variable to hold the state of your nav
let navIsOpen = false;
// Listen for clicks on your nav toggle button
toggle.addEventListener('click', () => {
// Update the nav state variable
navIsOpen = !navIsOpen;
// run a function that will update the nav "styles"
updateNav();
})
// This function will update the UI state according to the value of the navIsOpen variable. Here you can update all things you need, like your navbar, your toggle button, ...
function updateNav() {
navIsOpen
?
nav.classList.add('nav--is-open') :
nav.classList.remove('nav--is-open');
}
.nav {
margin-top: 1rem;
padding: 1rem;
background-color: lightgrey;
}
.nav--is-open {
background-color: purple;
color: white;
}
<button class="nav-toggle">Toggle nav</button>
<nav class="nav">
Your nav here
</nav>
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.
This question already has answers here:
Understanding CSS selector priority / specificity
(4 answers)
Closed 1 year ago.
i was trying to make a toggle button for tablets/phones but it isn't working. The javascript class gets called when i click the toggle button so i don't know what is wrong...
My head where i load my js using defer function to avoid placing it at the end of the body
<script defer src="assets/js/index.js"></script>
const navToggle = document.querySelector(".nav-toggle");
const navMenu = document.querySelector(".nav-menu");
navToggle.addEventListener("click", () => {
navMenu.classList.toggle("nav-menu_visible");
});
/*my toggle button propertys on desktops*/
.header .nav .nav-toggle {
color: white;
background: none;
border: none;
font-size: 1.875em;
padding: 0 1.250em;
line-height: 60px;
cursor: pointer;
display: none;
}
/*for phones*/
#media (max-width: 1024px) {
.header .nav .nav-toggle {
display: block;
}
.header .nav .nav-menu {
flex-direction: column;
align-items: center;
background-color: #2c3e50;
position: fixed;
left: 0;
top: 60px;
width: 100%;
height: calc(100vh - 60px);
/*100%*/
overflow-y: auto;
padding: 1.250em 0;
left: 100%;
transition: left 0.3s;
}
.nav-menu_visible {
left: 0;
}
}
<header class="header">
<nav class="nav">
Portafolio
<button class="nav-toggle">
<i class="fas fa-bars"></i>
</button>
<ul class="nav-menu">
<li class="nav-menu-item">Inicio</li>
<li class="nav-menu-item">Sobre Mí</li>
<li class="nav-menu-item">Habilidades</li>
<li class="nav-menu-item">Conocimientos</li>
<li class="nav-menu-item">Proyectos</li>
<li class="nav-menu-item">Contacto</li>
</ul>
</nav>
</header>
I don't know why my menu isn't moving from left 0 to left 100% (it isn't showing :/)
It doesn't work because of CSS. Your specificity of nav-menu is much more as you have declared as.
.header .nav .nav-menu // 0 3 0
(x y x) => (id, class, tag)
Either you increase the specificity of .nav-menu_visible or decrease the specificity of .nav-menu
1) Decrease the specificity to 0 1 0 as
.nav-menu // 0 1 0
const navToggle = document.querySelector(".nav-toggle");
const navMenu = document.querySelector(".nav-menu");
navToggle.addEventListener("click", () => {
navMenu.classList.toggle("nav-menu_visible");
});
body {
background-color: black;
}
.header .nav .nav-toggle {
color: white;
background: none;
border: none;
font-size: 1.875em;
padding: 0 1.250em;
line-height: 60px;
cursor: pointer;
display: none;
}
/*for phones*/
#media (max-width: 1024px) {
.header .nav .nav-toggle {
display: block;
}
.nav-menu {
flex-direction: column;
align-items: center;
background-color: #2c3e50;
position: fixed;
left: 0;
top: 60px;
width: 100%;
height: calc(100vh - 60px);
/*100%*/
overflow-y: auto;
padding: 1.250em 0;
left: 100%;
transition: left 0.3s;
}
.nav-menu_visible {
left: 0;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet"/>
<header class="header">
<nav class="nav">
Portafolio
<button class="nav-toggle">
<i class="fas fa-bars"></i>
</button>
<ul class="nav-menu">
<li class="nav-menu-item">Inicio</li>
<li class="nav-menu-item">Sobre Mí</li>
<li class="nav-menu-item">Habilidades</li>
<li class="nav-menu-item">Conocimientos</li>
<li class="nav-menu-item">Proyectos</li>
<li class="nav-menu-item">Contacto</li>
</ul>
</nav>
</header>
2) You can also increase the specificity to match with nav-menu as
.header .nav .nav-menu_visible { // 0 3 0
const navToggle = document.querySelector(".nav-toggle");
const navMenu = document.querySelector(".nav-menu");
navToggle.addEventListener("click", () => {
navMenu.classList.toggle("nav-menu_visible");
});
body {
background-color: black;
}
.header .nav .nav-toggle {
color: white;
background: none;
border: none;
font-size: 1.875em;
padding: 0 1.250em;
line-height: 60px;
cursor: pointer;
display: none;
}
/*for phones*/
#media (max-width: 1024px) {
.header .nav .nav-toggle {
display: block;
}
.header .nav .nav-menu {
flex-direction: column;
align-items: center;
background-color: #2c3e50;
position: fixed;
left: 0;
top: 60px;
width: 100%;
height: calc(100vh - 60px);
/*100%*/
overflow-y: auto;
padding: 1.250em 0;
left: 100%;
transition: left 0.3s;
}
.header .nav .nav-menu_visible {
left: 0;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet" />
<header class="header">
<nav class="nav">
Portafolio
<button class="nav-toggle">
<i class="fas fa-bars"></i>
</button>
<ul class="nav-menu">
<li class="nav-menu-item">Inicio</li>
<li class="nav-menu-item">Sobre Mí</li>
<li class="nav-menu-item">Habilidades</li>
<li class="nav-menu-item">Conocimientos</li>
<li class="nav-menu-item">Proyectos</li>
<li class="nav-menu-item">Contacto</li>
</ul>
</nav>
</header>
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
#myDIV {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top: 20px;
}
<button onclick="myFunction()">Portafolio</button>
<nav id="myDIV">
<ul class="nav-menu">
<li class="nav-menu-item">Inicio</li>
<li class="nav-menu-item">Sobre Mí</li>
<li class="nav-menu-item">Habilidades</li>
<li class="nav-menu-item">Conocimientos</li>
<li class="nav-menu-item">Proyectos</li>
<li class="nav-menu-item">Contacto</li>
</ul>
</nav>
I have added a lottie hamburger menu for a responsive one page site for the mobile break point. I would like two things happen as follows:
When clicked on one of the links the menu disappears.
at the same time the lottie animation goes back to hamburger icon state when clicked on a link, (it staying in X state)
Here is the link
https://codepen.io/OralYildiz/pen/abwvazw
/*--Lottie Animation and Mobile Menu Appear---*/
const pageHeader = document.querySelector(".header");
const toggleMenu = document.querySelector(".toggle-menu");
const player = document.querySelector("lottie-player");
const menuWrapper = document.querySelector(".nav__menu");
const menuOpenedClass = "menu-open";
const noTransitionClass = "no-transition";
let timer;
toggleMenu.addEventListener("click", function (e) {
e.preventDefault();
pageHeader.classList.toggle(menuOpenedClass);
if (pageHeader.classList.contains(menuOpenedClass)) {
this.setAttribute("aria-label", "Close navigation");
this.setAttribute("aria-expanded", "true");
player.getLottie().playSegments([0, 45], true);
} else {
this.setAttribute("aria-label", "Open navigation");
this.setAttribute("aria-expanded", "false");
player.getLottie().playSegments([45, 0], true);
//player.getLottie().playSegments([46, 90], true);
}
});
window.addEventListener("resize", function () {
menuWrapper.classList.add(noTransitionClass);
clearTimeout(timer);
timer = setTimeout(function () {
menuWrapper.classList.remove(noTransitionClass);
}, 500);
});
/*=============== CHANGE BACKGROUND HEADER ===============*/
function scrollHeader() {
const header = document.getElementById("header");
// When the scroll is greater than 50 viewport height, add the scroll-header class to the header tag
if (this.scrollY >= 50) header.classList.add("scroll-header");
else header.classList.remove("scroll-header");
}
window.addEventListener("scroll", scrollHeader);
/*=============== SHOW SCROLL UP ===============*/
function scrollUp() {
const scrollUp = document.getElementById("scroll-up");
// When the scroll is higher than 200 viewport height, add the show-scroll class to the a tag with the scroll-top class
if (this.scrollY >= 200) scrollUp.classList.add("show-scroll");
else scrollUp.classList.remove("show-scroll");
}
window.addEventListener("scroll", scrollUp);
/*=============== SCROLL SECTIONS ACTIVE LINK ===============*/
const sections = document.querySelectorAll("section[id]");
function scrollActive() {
const scrollY = window.pageYOffset;
sections.forEach((current) => {
const sectionHeight = current.offsetHeight;
const sectionTop = current.offsetTop - 50;
sectionId = current.getAttribute("id");
if (scrollY > sectionTop && scrollY <= sectionTop + sectionHeight) {
document
.querySelector(".nav__menu a[href*=" + sectionId + "]")
.classList.add("active-link");
} else {
document
.querySelector(".nav__menu a[href*=" + sectionId + "]")
.classList.remove("active-link");
}
});
}
window.addEventListener("scroll", scrollActive);
/*=============== SCROLL REVEAL ANIMATION ===============*/
const sr = ScrollReveal({
distance: "60px",
duration: 2500,
delay: 400
// reset: true
});
sr.reveal(`.home__header, .section__title`, { delay: 600 });
sr.reveal(`.home__footer`, { delay: 700 });
sr.reveal(`.home__img`, { delay: 900, origin: "top" });
sr.reveal(
`.sponsor__img, .products__card, .footer__logo, .footer__content, .footer__copy`,
{ origin: "top", interval: 100 }
);
sr.reveal(`.specs__data, .discount__animate`, {
origin: "left",
interval: 100
});
sr.reveal(`.specs__img, .discount__img`, { origin: "right" });
sr.reveal(`.case__img`, { origin: "top" });
sr.reveal(`.case__data`);
/*=============== GOOGLE FONTS ===============*/
#import url("https://fonts.googleapis.com/css2?family=Poppins:wght#400;500;600&display=swap");
/*=============== VARIABLES CSS ===============*/
:root {
--header-height: 3rem;
/*========== Colors ==========*/
--hue-color: 206;
--black-color: hsl(var(--hue-color), 4%, 4%);
--black-color-alt: hsl(var(--hue-color), 4%, 8%);
--title-color: hsl(var(--hue-color), 4%, 95%);
--text-color: hsl(var(--hue-color), 4%, 75%);
--text-color-light: hsl(var(--hue-color), 4%, 65%);
--white-color: #FFF;
--body-color: hsl(var(--hue-color), 4%, 6%);
--container-color: hsl(var(--hue-color), 4%, 10%);
--text-gradient: linear-gradient(hsl(var(--hue-color), 4%, 24%), hsl(var(--hue-color), 4%, 8%));
--scroll-thumb-color: hsl(var(--hue-color), 4%, 16%);
--scroll-thumb-color-alt: hsl(var(--hue-color), 4%, 20%);
/*========== Font and typography ==========*/
--body-font: 'Poppins', sans-serif;
--biggest-font-size: 5rem;
--bigger-font-size: 3.5rem;
--big-font-size: 2.5rem;
--h2-font-size: 1.25rem;
--h3-font-size: 1.125rem;
--normal-font-size: .938rem;
--small-font-size: .813rem;
--smaller-font-size: .75rem;
--text-line-height: 2rem;
/*========== Font weight ==========*/
--font-medium: 500;
--font-semi-bold: 600;
/*========== Margenes Bottom ==========*/
--mb-0-5: .5rem;
--mb-0-75: .75rem;
--mb-1: 1rem;
--mb-1-5: 1.5rem;
--mb-2: 2rem;
--mb-2-5: 2.5rem;
/*========== z index ==========*/
--z-tooltip: 10;
--z-fixed: 100;
}
#media screen and (min-width: 968px) {
:root {
--biggest-font-size: 7.5rem;
--bigger-font-size: 4.5rem;
--big-font-size: 4rem;
--h2-font-size: 1.5rem;
--h3-font-size: 1.25rem;
--normal-font-size: 1rem;
--small-font-size: .875rem;
--smaller-font-size: .813rem;
}
}
/*=============== BASE ===============*/
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html {
scroll-behavior: smooth;
}
body {
margin: var(--header-height) 0 0 0;
font-family: var(--body-font);
font-size: var(--normal-font-size);
background-color: var(--body-color);
color: var(--text-color);
}
h1, h2, h3 {
color: var(--title-color);
}
ul {
list-style: none;
}
a {
text-decoration: none;
}
button,
input {
border: none;
outline: none;
}
button {
cursor: pointer;
}
img {
max-width: 100%;
height: auto;
}
/*=============== REUSABLE CSS CLASSES ===============*/
.section {
padding: 4rem 0 2rem;
}
.section__title {
font-size: var(--bigger-font-size);
text-align: center;
margin-bottom: var(--mb-2-5);
}
.section__title-gradient {
background: var(--text-gradient);
color: transparent;
-webkit-background-clip: text;
background-clip: text;
}
/*=============== LAYOUT ===============*/
.main {
overflow: hidden;
}
.container {
max-width: 968px;
margin-left: var(--mb-1-5);
margin-right: var(--mb-1-5);
}
.grid {
display: grid;
}
/*=============== HEADER ===============*/
.header {
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: var(--z-fixed);
background: transparent;
}
/*=============== NAV ===============*/
.nav {
height: var(--header-height);
display: flex;
justify-content: space-between;
align-items: center;
}
.nav__logo {
display: flex;
width: 1.5rem;
}
/*.header .nav__menu {
transform: translateY(-200px);
transition: transform 1s ease-in-out;
}*/
.header.menu-open .nav__menu{
transform: translateY(80px);
}
.header .toggle-menu {
width: 50px;
}
#media screen and (max-width: 767px) {
.nav__menu {
position: fixed;
background-color: var(--body-color);
transform: translateY(-200px);
left: 0;
width: 100%;
padding: 4rem 0 3rem;
transition: .4s;
}
}
.nav__list {
display: flex;
flex-direction: column;
align-items: center;
row-gap: 1rem;
}
.nav__link {
color: var(--white-color);
font-size: var(--h2-font-size);
text-transform: uppercase;
font-weight: var(--font-semi-bold);
background: var(--text-gradient);
color: transparent;
-webkit-background-clip: text;
background-clip: text;
transition: .4s;
}
.nav__link:hover {
background: var(--white-color);
color: transparent;
-webkit-background-clip: text;
background-clip: text;
}
/* show menu */
.nav__menu.active {
top: 0;
}
/* Change background header */
.scroll-header {
background-color: var(--body-color);
}
/* Active link */
.active-link {
background: var(--white-color);
color: transparent;
-webkit-background-clip: text;
background-clip: text;
}
/*=============== HOME ===============*/
.home__img {
width: 250px;
position: absolute;
top: -16rem;
right: 1.5rem;
}
.home__data {
padding-top: 5rem;
}
.home__header {
position: relative;
}
.home__title {
position: absolute;
top: -4rem;
left: 1rem;
line-height: 6rem;
font-size: var(--biggest-font-size);
background: var(--text-gradient);
color: transparent;
-webkit-background-clip: text;
background-clip: text;
}
.home__subtitle {
font-size: var(--big-font-size);
margin-bottom: var(--mb-2-5);
}
.home__title-description {
font-size: var(--h3-font-size);
font-weight: var(--font-medium);
margin-bottom: var(--mb-1);
}
.home__description {
margin-bottom: var(--mb-2-5);
line-height: var(--text-line-height);
}
.home__price {
font-size: var(--h3-font-size);
font-weight: var(--font-semi-bold);
margin-left: var(--mb-0-75);
}
/*=============== BUTTONS ===============*/
.button {
display: inline-block;
background-color: var(--black-color);
color: var(--white-color);
padding: 1rem 1.25rem;
border-radius: .5rem;
transition: .3s;
}
.button:hover {
background-color: var(--black-color-alt);
}
.button__icon {
font-size: 1.2rem;
}
.button--flex {
display: inline-flex;
align-items: center;
column-gap: .75rem;
}
/*=============== SPONSOR ===============*/
.sponsor__img {
width: 90px;
}
.sponsor__container {
grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
row-gap: 5rem;
justify-items: center;
align-items: center;
}
/*=============== SPECS ===============*/
.specs__container {
position: relative;
}
.specs__content {
row-gap: 1.5rem;
}
.specs__data {
display: grid;
row-gap: .25rem;
}
.specs__icon {
font-size: 1.2rem;
color: var(--white-color);
}
.specs__title {
font-size: var(--normal-font-size);
font-weight: var(--font-medium);
}
.specs__subtitle {
font-size: var(--smaller-font-size);
}
.specs__data:nth-child(1), .specs__data:nth-child(4) {
margin-left: 1.5rem;
}
.specs__img {
width: 250px;
position: absolute;
top: 2rem;
right: -4rem;
}
/*=============== CASE ===============*/
.case__container {
position: relative;
grid-template-columns: repeat(2, 1fr);
}
.case__data {
padding: 5rem 0 3rem;
}
.case__img {
width: 250px;
position: absolute;
left: -7rem;
}
.case__description {
margin-bottom: var(--mb-1-5);
line-height: var(--text-line-height);
}
/*=============== DISCOUNT ===============*/
.discount__container {
position: relative;
background-color: var(--container-color);
padding: 2rem 1.5rem;
border-radius: .75rem;
}
.discount__title {
font-size: var(--h3-font-size);
margin-bottom: var(--mb-0-75);
}
.discount__description {
margin-bottom: var(--mb-1);
}
.discount__img {
width: 300px;
position: absolute;
top: 4rem;
right: -11rem;
}
/*=============== SCROLL UP ===============*/
.scrollup {
position: fixed;
right: 1rem;
bottom: -20%;
display: flex;
background-color: var(--container-color);
border-radius: .25rem;
padding: .45rem;
opacity: 9;
z-index: var(--z-tooltip);
transition: .4s;
}
.scrollup:hover {
background-color: var(--black-color);
opacity: 1;
}
.scrollup__icon {
color: var(--white-color);
font-size: 1.35rem;
}
/* Show Scroll Up*/
.show-scroll {
bottom: 5rem;
}
/*=============== SCROLL BAR ===============*/
::-webkit-scrollbar {
width: .60rem;
border-radius: .5rem;
}
::-webkit-scrollbar-thumb {
background-color: var(--scroll-thumb-color);
border-radius: .5rem;
}
::-webkit-scrollbar-thumb:hover {
background-color: var(--scroll-thumb-color-alt);
}
/*=============== MEDIA QUERIES ===============*/
/* For small devices */
#media screen and (max-width: 340px) {
.container {
margin-left: var(--mb-1);
margin-right: var(--mb-1);
}
.section__title {
font-size: var(--big-font-size);
}
.home__img {
width: 200px;
top: -13rem;
}
.home__title {
top: -4rem;
font-size: var(--bigger-font-size);
}
.home__data {
padding-top: 1rem;
}
.home__description {
font-size: var(--small-font-size);
}
.specs__img {
width: 200px;
}
.case__container {
grid-template-columns: .6fr 1fr;
}
.case__img {
width: 220px;
top: -2rem;
left: -9rem;
}
.case__data {
padding: 0;
}
.products__container {
grid-template-columns: 142px;
justify-content: center;
}
}
/* For medium devices */
#media screen and (min-width: 576px) {
.home__container {
grid-template-columns: .8fr 1fr;
}
.home__data {
padding-top: 2rem;
}
.home__img {
top: -7rem;
left: 0;
}
.specs__img {
position: initial;
}
.specs__container {
grid-template-columns: repeat(2, 1fr);
justify-items: center;
align-items: center;
}
.case__img {
position: initial;
}
.case__data {
padding: 0;
}
.case__container {
grid-template-columns: max-content 250px;
justify-content: center;
align-items: center;
column-gap: 2rem;
}
.discount__img {
position: initial;
}
.discount__container {
grid-template-columns: repeat(2, 1fr);
justify-items: center;
align-items: center;
}
.products__container {
grid-template-columns: repeat(3, 142px);
justify-content: center;
}
}
#media screen and (min-width: 767px) {
body {
margin: 0;
}
.section {
padding: 6rem 0 2rem;
}
.nav {
height: calc(var(--header-height) + 1.5rem);
}
.nav__logo {
width: 2rem;
}
.nav__list {
flex-direction: row;
column-gap: 3.5rem;
}
.nav__link {
font-size: var(--normal-font-size);
text-transform: initial;
}
.toggle-menu {
display: none;
}
.home__container {
position: relative;
grid-template-columns: repeat(2, 1fr);
}
.home__img {
top: -9rem;
left: 4rem;
}
.home__data {
padding-top: 8rem;
}
.specs__img {
width: 300px;
}
.case__container {
column-gap: 5rem;
}
.case__img {
width: 300px;
}
.case__description {
margin-bottom: var(--mb-2);
}
.discount__container {
grid-template-columns: 250px max-content;
justify-content: center;
column-gap: 5rem;
padding: 3rem 0;
}
.discount__title {
font-size: var(--h2-font-size);
margin-bottom: var(--mb-1);
}
.discount__description {
margin-bottom: var(--mb-2);
}
.products__container {
grid-template-columns: repeat(3, 162px);
gap: 6rem 3rem;
padding-top: 5rem;
}
.products__card {
height: 152px;
padding: .85rem;
}
.products__img {
width: 95px;
}
.footer__container {
grid-template-columns: .4fr .7fr .7fr 1fr;
}
}
/* For large devices */
#media screen and (min-width: 1024px) {
.container {
margin-left: auto;
margin-right: auto;
}
.home__img {
width: 300px;
top: -15rem;
}
.home__title {
top: -5rem;
left: 3.5rem;
}
.home__description {
padding-right: 5rem;
}
.sponsor__img {
width: 100px;
}
.discount__img {
width: 350px;
}
.footer__container {
padding-top: 3rem;
}
.footer__copy {
margin-top: 9rem;
}
}
<!DOCTYPE html>
<html lang="en" class="sr"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--=============== FAVICON ===============-->
<link rel="shortcut icon" href="https://github.com/bedimcode/responsive-landing-page-headphones/blob/main/assets/img/favicon.png?raw=true" type="image/x-icon">
<!--=============== REMIX ICONS ===============-->
<link href="https://cdn.jsdelivr.net/npm/remixicon#2.5.0/fonts/remixicon.css" rel="stylesheet">
<title>Responsive landing page headphones</title>
</head>
<body>
<!--=============== HEADER ===============-->
<header class="header" id="header">
<nav class="nav container">
<a href="#" class="nav__logo">
<img src="https://github.com/bedimcode/responsive-landing-page-headphones/blob/main/assets/img/logo.png?raw=true" alt="">
</a>
<div class="nav__menu" id="nav-menu">
<ul class="nav__list">
<li class="nav__item">
Home
</li>
<li class="nav__item">
Specs
</li>
<li class="nav__item">
Case
</li>
</ul>
</div>
<a href="" class="toggle-menu" role="button" aria-controls="menu-wrapper" aria-label="Open navigation" aria-expanded="false">
<lottie-player src="https://assets8.lottiefiles.com/packages/lf20_nzuitqg1.json"></lottie-player>
</a>
</nav>
</header>
<main class="main">
<!--=============== HOME ===============-->
<section class="home section" id="home">
<div class="home__container container grid">
<div>
<img src="https://github.com/bedimcode/responsive-landing-page-headphones/blob/main/assets/img/home.png?raw=true" alt="" class="home__img">
</div>
<div class="home__data">
<div class="home__header">
<h1 class="home__title">On ear</h1>
<h2 class="home__subtitle">Beats 3</h2>
</div>
<div class="home__footer">
<h3 class="home__title-description">Overview</h3>
<p class="home__description">Enjoy award-winning Beats sound with wireless listening freedom and a sleek,
streamlined design with comfortable padded earphones, delivering first-rate playback.
</p>
<a href="#" class="button button--flex">
<span class="button--flex">
<i class="ri-shopping-bag-line button__icon"></i></i> Add to Bag
</span>
<span class="home__price">$299</span>
</a>
</div>
</div>
</div>
</section>
<!--=============== SPONSOR ===============-->
<section class="sponsor section">
<div class="sponsor__container container grid">
<img src="https://github.com/bedimcode/responsive-landing-page-headphones/blob/main/assets/img/sponsor1.png?raw=true" alt="" class="sponsor__img">
<img src="https://github.com/bedimcode/responsive-landing-page-headphones/blob/main/assets/img/sponsor2.png?raw=true" alt="" class="sponsor__img">
<img src="https://github.com/bedimcode/responsive-landing-page-headphones/blob/main/assets/img/sponsor3.png?raw=true" alt="" class="sponsor__img">
<img src="https://github.com/bedimcode/responsive-landing-page-headphones/blob/main/assets/img/sponsor4.png?raw=true" alt="" class="sponsor__img">
</div>
</section>
<!--=============== SPECS ===============-->
<section class="specs section grid" id="specs">
<h2 class="section__title section__title-gradient">Specs</h2>
<div class="specs__container container grid">
<div class="specs__content grid">
<div class="specs__data">
<i class="ri-bluetooth-line specs__icon"></i>
<h3 class="specs__title">Connection</h3>
<span class="specs__subtitle">Bluetooth v5.2</span>
</div>
<div class="specs__data">
<i class="ri-battery-charge-line specs__icon"></i>
<h3 class="specs__title">Battery</h3>
<span class="specs__subtitle">Duration 40h</span>
</div>
<div class="specs__data">
<i class="ri-plug-line specs__icon"></i>
<h3 class="specs__title">Load</h3>
<span class="specs__subtitle">Fast charge 4.2-AAC</span>
</div>
<div class="specs__data">
<i class="ri-mic-line specs__icon"></i>
<h3 class="specs__title">Microphone</h3>
<span class="specs__subtitle">Supports Apple Siri <br> and Google</span>
</div>
</div>
<div>
<img src="https://github.com/bedimcode/responsive-landing-page-headphones/blob/main/assets/img/specs.png?raw=true" alt="" class="specs__img">
</div>
</div>
</section>
<!--=============== CASE ===============-->
<section class="case section grid" id="case">
<h2 class="section__title section__title-gradient">Case</h2>
<div class="case__container container grid">
<div>
<img src="https://github.com/bedimcode/responsive-landing-page-headphones/blob/main/assets/img/case.png?raw=true" alt="" class="case__img">
</div>
<div class="case__data">
<p class="case__description">With a comfortable and adaptable case so that you can
store it whenever you want, and keep your durability forever.
</p>
<a href="#" class="button button--flex">
<i class="ri-information-line button__icon"></i> More info
</a>
</div>
</div>
</section>
<!--=============== DISCOUNT ===============-->
<section class="discount section">
<div class="discount__container container grid">
<div class="discount__animate">
<h2 class="discount__title">Immerse yourself in <br> your music</h2>
<p class="discount__description">Get it now, up to 50% off.</p>
<a href="#" class="button button--flex">
<i class="ri-shopping-bag-line button__icon"></i> Shop Now
</a>
</div>
<img src="https://github.com/bedimcode/responsive-landing-page-headphones/blob/main/assets/img/discount.png?raw=true" alt="" class="discount__img">
</div>
</section>
</main>
<!--=============== SCROLL UP ===============-->
<a href="#" class="scrollup" id="scroll-up">
<i class="ri-arrow-up-s-line scrollup__icon"></i>
</a>
<!--=============== SCROLL REVEAL ===============-->
<script src="https://unpkg.com/scrollreveal"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://unpkg.com/#lottiefiles/lottie-player#latest/dist/lottie-player.js"></script>
</body></html>
Following worked:
define a variable with array of all 3 menu-link:
// querySelectorAll gets you all 3 menu-links
const menuLink = document.querySelectorAll(".nav__link");
define a function() that closes the menu and plays backwards the lottie player:
function closeMenu() {
// pageHeader.classList.toggle(menuOpenedClass); // would also work;
pageHeader.classList.remove("menu-open");
// play lottie player segment backwards
player.getLottie().playSegments([45, 0], true);
}
Add event listener to all 3 menu-links:
menuLink.forEach(function (element) {
element.addEventListener("click", function () {
closeMenu();
})
});
I have a problem as my dropdown menu stays open and doesn't close. Have I done something or do i need to add something?
Here is a screenshot to what i am referring too:
https://imgur.com/VbU5nit
I have researched for a solution and I am unable to find anything relating to this issue
My code is:
```
<div class="NavigationTop__groupRight__3UIqi">
<span class="NavigationTop__navPlayer__2TGn7">
<div id="myDropdown" class="dropdown-content">
<a href="#" onclick="showDropDown()" class="NavigationTop__icon__32Kg3" data-ui-name="info"><span class="NavigationTop__iconBg__3nlrW">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" height="16" width="16" class="UI__Icon__icon"><path d="M15.6 32s-.1 0 0 0h-.8c-2.7 0-5.6 0-8.4-.8-3-.9-4.6-2.4-4.7-4.7-.1-1.1.3-2.2 1-3.1 1.1-1.5 2.7-2.4 4.1-3.1.5-.3 1-.5 1.5-.8.6-.4 2-1.4 2.1-2.7 0-.6-.2-1.3-.8-2.1l-.6-.9c-.4-.6-.8-1.2-1.2-1.9-1.2-2.5-1-5.6.4-7.9.2-.3.4-.6.7-.9 1.8-2 4.3-3.1 7-3.1 2.7-.1 5.3 1.1 7.2 3 .3.3.6.7.8 1 1.4 2.3 1.5 5.4.3 7.9-.4.7-.8 1.3-1.2 1.9l-.6.9c-.5.8-.8 1.5-.8 2.1.1 1.3 1.5 2.3 2.1 2.7.5.3 1 .6 1.5.8 1.4.7 3 1.5 4.1 3.1.7.9 1 2.1 1 3.1-.1 2.2-1.7 3.8-4.7 4.7-.7.2-1.4.3-2 .5-.7.1-1.5-.4-1.6-1.1-.1-.7.4-1.5 1.1-1.6.6-.1 1.2-.2 1.7-.4 2.4-.7 2.7-1.5 2.7-2.2 0-.5-.1-.9-.5-1.4-.7-1-1.9-1.6-3.1-2.3-.6-.3-1.1-.6-1.7-.9-2.1-1.3-3.3-3-3.4-4.9-.1-1.2.3-2.4 1.2-3.8.2-.3.4-.7.7-1 .4-.5.7-1 1-1.5.8-1.6.7-3.6-.2-5.2-.1-.1-.2-.2-.4-.5-1.3-1.4-3.2-2.2-5.2-2.2-1.9 0-3.7.8-5 2.2-.2.2-.3.4-.4.5-.9 1.6-1 3.6-.2 5.2.3.5.6 1 1 1.5.2.3.5.6.7 1 .9 1.3 1.3 2.6 1.2 3.8-.1 1.9-1.3 3.6-3.4 4.9-.5.3-1.1.6-1.7.9C6.9 23.4 5.7 24 5 25c-.3.4-.5.9-.5 1.4 0 .7.4 1.5 2.7 2.2 2.4.7 4.9.7 7.6.7h.8c.4 0 .8.2 1 .5.3.3.4.7.3 1.1 0 .6-.6 1.1-1.3 1.1z"></path></svg></span></a>
<div class="NavigationPlayer__nav__1GtYE NavigationPlayer__navOpen__kmIqC">
<ul class="NavigationPlayer__navSub__SIRkf">
<li class="NavigationPlayer__signUp__2AOMK">
Sign Up</li>
<li class="NavigationPlayer__signIn__3qaVH">Sign In</li>
<div id="dropdown" class="dropdown">
<li>Legal</li>
<li>Privacy</li>
<li>Support</li>
<li>Cookies</li>
<li><div class="NavigationPlayer__languageWrap__2jmcz">
<div class="UI__DropDown__custom-select LanguageSelector__dropdown__2uNdg">
<select class="select" data-ui-name="languageSelector">
<option value="de-DE">Deutsch</option>
<option value="en-US">English</option>
<option value="es-ES">Español</option>
<option value="es-MX">Español Latinoamérica</option>
<option value="fr-FR">Français</option>
<option value="it-IT">Italiano</option>
<option value="ja-JP">日本語</option>
<option value="ko-KR">한국어</option>
<option value="pl-PL">Polski</option>
<option value="pt-BR">Português do Brasil</option>
<option value="ru-RU">Русский</option>
<option value="zh-TW">繁體中文</option>
<option value="zh-CN">简体中文</option>
</select>
<script>
document.addEventListener("load", hideDropDownOnLoad());
function hideDropDownOnLoad() {
// Is called when the document loads to hide the dropdown
var dropdown = document.getElementById("dropdown");
dropdown.style.display = "none";
function showDropDown() {
// Get the dropdown
var dropdown = document.getElementById("dropdown");
// Check to see if the dropdown is currently hidden
if(dropdown.style.display === "none") {
// It is hidden so show the drop down
dropdown.style.display = "block";
} else {
// The dropdown is visible so hide it
dropdown.style.display = "none";
}
}
</script>
```
#media (min-width: 64em) {
.NavigationTop__wrap__fQdBR {
padding: 0 0.625rem;
}
}
.NavigationTop__inner__1LxZ7 {
margin: 0 auto;
max-width: 1420px;
-ms-flex-align: center;
align-items: center;
display: -ms-flexbox;
display: flex;
height: 100%;
}
#media (min-width: 88.75em) {
.NavigationTop__inner__1LxZ7 {
padding: 0 0.625rem;
}
}
.NavigationTop__icon__32Kg3 {
display: block;
padding: 14px 0.625rem;
position: relative;
}
.NavigationTop__icon__32Kg3:focus {
outline: 0;
}
.NavigationTop__icon__32Kg3 .NavigationTop__iconBg__3nlrW {
-ms-flex-align: center;
align-items: center;
background-color: rgba(255, 255, 255, 0.1);
border-radius: 50%;
display: -ms-flexbox;
display: flex;
height: 32px;
-ms-flex-pack: center;
justify-content: center;
padding: 8px;
position: relative;
width: 32px;
}
.NavigationTop__iconBg__3nlrW svg {
fill: #ffffff;
}
.NavigationTop__icon__32Kg3:focus .NavigationTop__iconBg__3nlrW svg,
.NavigationTop__icon__32Kg3:hover .NavigationTop__iconBg__3nlrW svg {
fill: url("#gradient") #f7931e;
}
.hide {
display: none;
}
.NavigationTop__hamburger__KU-ur {
padding-left: 0.625rem;
}
#media (min-width: 64em) {
.NavigationTop__hamburger__KU-ur {
display: none;
}
}
.NavigationTop__search__UDzfT {
margin-right: auto;
}
.NavigationTop__groupLeft__3lTQW {
display: -ms-flexbox;
display: flex;
margin-right: auto;
}
#media (min-width: 64em) {
.NavigationTop__groupLeft__3lTQW {
margin-left: auto;
margin-right: 0;
}
}
.NavigationTop__groupRight__3UIqi {
-ms-flex-align: center;
align-items: center;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: end;
justify-content: flex-end;
margin-left: auto;
min-width: 104px;
}
#media (min-width: 64em) {
.NavigationTop__groupRight__3UIqi {
margin-left: 0;
min-width: 0;
}
}
.NavigationTop__logo__3GmAs {
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
#media (min-width: 64em) {
.NavigationTop__logo__3GmAs {
-ms-flex-order: -1;
order: -1;
margin-left: 10px;
}
}
.NavigationTop__logoThunder__1m1Ou {
background-image: url(../images/react/logo/thunder.jpg);
background-repeat: no-repeat;
background-size: 100%;
box-sizing: content-box;
display: inline-block;
height: 32px;
position: relative;
top: 1px;
width: 34px;
}
#media (max-width: 64.6875em) {
.pl-PL .NavigationTop__logoSocialClub__1EfPy {
display: none;
}
}
#media (max-width: 68.125em) {
.pt-BR .NavigationTop__logoSocialClub__1EfPy {
display: none;
}
}
#media (max-width: 69.375em) {
.es-ES .NavigationTop__logoSocialClub__1EfPy,
.es-MX .NavigationTop__logoSocialClub__1EfPy {
display: none;
}
}
#media (max-width: 70.625em) {
.fr-FR .NavigationTop__logoSocialClub__1EfPy,
.ru-RU .NavigationTop__logoSocialClub__1EfPy {
display: none;
}
}
.NavigationTop__logoSocialClub__1EfPy {
background-image: url(../images/react/logo/socialclub_small.png);
background-repeat: no-repeat;
background-size: 100%;
box-sizing: content-box;
display: none;
height: 36px;
margin-left: 8px;
width: 128px;
}
#media (min-width: 64em) {
.NavigationTop__logoSocialClub__1EfPy {
display: inline-block;
}
}
.NavigationTop__logo__3GmAs:hover .NavigationTop__logoSocialClub__1EfPy {
-webkit-filter: drop-shadow(0 0 5px rgba(252, 175, 23, 0.5));
filter: drop-shadow(0 0 5px rgba(252, 175, 23, 0.5));
}
.NavigationTop__notifications__2lGKZ {
color: #4d4d4d;
cursor: pointer;
}
#media (min-width: 64em) {
.NavigationTop__notifications__2lGKZ {
position: relative;
}
}
.NavigationTop__notifications__2lGKZ:focus {
outline: 0;
}
.NavigationTop__notifications__2lGKZ .NavigationTop__new__1FmP_ {
font-size: 0.75rem;
line-height: 1.25rem;
-ms-flex-align: center;
align-items: center;
background-color: #bd0808;
border-radius: 3px;
color: #ffffff;
display: -ms-flexbox;
display: flex;
font-weight: bold;
-ms-flex-pack: center;
justify-content: center;
right: -5px;
line-height: 1;
padding: 3px 5px;
position: absolute;
top: -5px;
}
.NavigationTop__nav__1InFQ {
display: none;
list-style: none;
padding: 0;
}
#media (max-width: 63.9375em) {
.NavigationTop__nav__1InFQ {
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
background-color: #ffffff;
height: 100%;
left: 0;
margin: 0;
padding-bottom: 60px;
position: fixed;
top: 60px;
width: 50%;
}
}
#media (min-width: 64em) {
.NavigationTop__nav__1InFQ {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
height: 60px;
margin: 0 0 0 10px;
}
}
.NavigationTop__nav__1InFQ li {
position: relative;
}
.NavigationTop__navLink__k_LuP {
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
overflow-wrap: break-word;
word-break: break-word;
word-wrap: break-word;
color: #000000;
display: inline-block;
font-size: 0.875rem;
font-weight: bold;
padding: 1.25rem;
position: relative;
text-decoration: none;
text-transform: uppercase;
width: 100%;
z-index: 0;
}
.NavigationTop__navLink__k_LuP:focus {
outline: 0;
}
.NavigationTop__navLink__k_LuP:hover {
color: #000000;
}
#media (min-width: 64em) {
.NavigationTop__navLink__k_LuP {
color: #ffffff;
}
.NavigationTop__navLink__k_LuP:hover {
color: #ffffff;
}
}
.NavigationTop__navLink__k_LuP::after,
.NavigationTop__navLinkSub__2QMkZ::after {
background: linear-gradient(45deg, #f7931e, #fcaf17);
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
content: ' ';
display: none;
height: 6px;
left: 10px;
position: absolute;
top: 0;
width: 88%;
z-index: -1;
}
#media (min-width: 64em) {
.NavigationTop__navLink__k_LuP::after,
.NavigationTop__navLinkSub__2QMkZ::after {
left: 6%;
}
}
#media (min-width: 64em) {
.NavigationTop__nav__1InFQ li:hover .NavigationTop__navLink__k_LuP::after,
.NavigationTop__nav__1InFQ li .NavigationTop__navLink__k_LuP:focus::after {
display: block;
}
}
.NavigationTop__navLink__k_LuP.NavigationTop__navLinkActive__1-yPY {
color: #f7931e;
}
#media (min-width: 64em) {
.NavigationTop__navLink__k_LuP.NavigationTop__navLinkActive__1-yPY {
color: #ffffff;
}
}
.NavigationTop__navLinkSub__2QMkZ.NavigationTop__navLinkActive__1-yPY {
color: #fcaf17;
}
#media (min-width: 64em) {
.NavigationTop__navLink__k_LuP.NavigationTop__navLinkActive__1-yPY::after {
background: linear-gradient(45deg, #f7931e, #fcaf17);
display: block;
}
}
#media (max-width: 63.9375em) {
.NavigationTop__navSub__3YEgK.NavigationTop__navSubOn__QIUAx,
.NavigationTop__navSubSub__2Xm48.NavigationTop__navSubOn__QIUAx {
display: block;
}
}
.NavigationTop__navSub__3YEgK::before,
.NavigationTop__navSubSub__2Xm48::before {
border-bottom: 6px solid #ffffff;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
content: '';
-webkit-filter: drop-shadow(0 0 1px #999999);
filter: drop-shadow(0 0 1px #999999);
position: absolute;
top: -6px;
}
.NavigationTop__navSub__3YEgK::before {
left: 30px;
}
#media (min-width: 64em) {
.NavigationTop__navSub__3YEgK::before {
left: 60px;
}
}
.NavigationTop__navSubSub__2Xm48::before {
left: 40px;
}
#media (min-width: 64em) {
.NavigationTop__navSubSub__2Xm48::before {
border-bottom: 6px solid transparent;
border-right: 6px solid #ffffff;
border-left: 0;
border-top: 6px solid transparent;
left: -6px;
top: 22px;
}
}
#media (min-width: 64em) {
.NavigationTop__nav__1InFQ li:hover>.NavigationTop__navSub__3YEgK,
.NavigationTop__nav__1InFQ li:hover>.NavigationTop__navSubSub__2Xm48,
.NavigationTop__nav__1InFQ li>.NavigationTop__navSub__3YEgK:focus,
.NavigationTop__nav__1InFQ li>.NavigationTop__navSubSub__2Xm48:focus {
visibility: visible;
}
}
.NavigationTop__navLinkSub__2QMkZ {
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
overflow-wrap: break-word;
word-break: break-word;
word-wrap: break-word;
background-color: #ffffff;
color: #000000;
display: inline-block;
font-size: 0.875rem;
font-weight: bold;
padding: 1.25rem 2.5rem 1.25rem 1.875rem;
position: relative;
text-decoration: none;
text-transform: uppercase;
width: 100%;
z-index: 0;
}
#media (min-width: 64em) {
.NavigationTop__navLinkSub__2QMkZ:hover {
background: linear-gradient(45deg, #f7931e, #fcaf17);
color: #ffffff;
}
}
.NavigationTop__nav__1InFQ li ul li ul li .NavigationTop__navLinkSub__2QMkZ {
padding: 1.25rem 2.5rem;
}
#media (max-width: 63.9375em) {
.NavigationTop__navLinkToggle__2zB_R {
box-sizing: content-box;
padding: 22px 16px;
position: absolute;
right: 0;
top: 0;
}
}
#media (min-width: 64em) {
.NavigationTop__navLinkToggle__2zB_R {
display: none;
}
}
.NavigationTop__navSub__3YEgK,
.NavigationTop__navSubSub__2Xm48 {
list-style: none;
margin: 0;
min-width: 300px;
padding: 0;
top: calc(100% + -1px);
}
#media (max-width: 63.9375em) {
.NavigationTop__navSub__3YEgK,
.NavigationTop__navSubSub__2Xm48 {
border-bottom: 1px solid #e6e6e6;
border-top: 1px solid #e6e6e6;
display: none;
position: relative;
width: 100%;
left: 0;
}
}
#media (min-width: 64em) {
.NavigationTop__navSub__3YEgK {
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
left: -25px;
position: absolute;
visibility: hidden;
}
}
#media (min-width: 64em) {
.NavigationTop__navSubSub__2Xm48 {
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
left: 100%;
position: absolute;
top: 0;
visibility: hidden;
}
}
#media (max-width: 63.9375em) {
.NavigationTop__menuOpen__r1RJG {
height: 100%;
overflow-y: hidden;
position: fixed;
width: 100%;
}
.NavigationTop__menuOpen__r1RJG body {
height: 100%;
overflow-y: hidden;
position: fixed;
width: 100%;
}
}
#media (max-width: 63.9375em) {
.NavigationTop__nav__1InFQ>li:nth-child(even) .NavigationTop__navLink__k_LuP {
background-color: #fafafa;
}
}
.NavigationTop__navSub__3YEgK>li:nth-child(even) .NavigationTop__navLinkSub__2QMkZ {
background-color: #fafafa;
}
#media (min-width: 64em) {
.NavigationTop__overlay__h6uED {
background: rgba(0, 0, 0, 0.3);
height: calc(100vh - 60px);
left: 0;
opacity: 0;
pointer-events: none;
position: fixed;
top: 60px;
transition: 0.1s 0.2s;
visibility: hidden;
width: 100vw;
z-index: 5000;
}
.NavigationTop__nav__1InFQ li:hover>.NavigationTop__overlay__h6uED {
opacity: 1;
transition-delay: 0s;
visibility: visible;
}
}
.NavigationTop__navLink__k_LuP.NavigationTop__navLinkHighlight__2uEEp,
.NavigationTop__navLinkSub__2QMkZ.NavigationTop__navLinkHighlight__2uEEp {
color: #ff0000;
}
.NavigationTop__navLink__k_LuP.NavigationTop__navLinkHighlight__2uEEp::after,
.NavigationTop__navLinkSub__2QMkZ.NavigationTop__navLinkHighlight__2uEEp::after {
color: #ff0000;
}
#media (min-width: 64em) {
.NavigationTop__signUp__15T16,
.NavigationTop__signIn__38Mfg {
display: none;
}
}
.NavigationTop__navSignedOut__2qibz {
display: none;
}
#media (min-width: 83.125em) {
.NavigationTop__navSignedOut__2qibz {
display: -ms-flexbox;
display: flex;
}
}
.NavigationTop__avatar__2rxHG:hover::after {
border: 2px solid #f7931e;
}
.NavigationTop__avatar__2rxHG {
display: block;
padding: 14px 0.625rem;
cursor: pointer;
}
.NavigationTop__avatar__2rxHG img {
border-radius: 50%;
position: relative;
}
.NavigationTop__avatar__2rxHG::after {
background: transparent;
border-radius: 50%;
content: ' ';
height: 36px;
left: 8px;
position: absolute;
top: 12px;
width: 36px;
z-index: -1;
}
.NavigationTop__nav__1InFQ:hover .NavigationTop__avatar__2rxHG::after {
border: 2px solid #f7931e;
}
.NavigationTop__navPlayer__2TGn7 {
position: relative;
}
<div class="NavigationTop__groupRight__3UIqi">
<span class="NavigationTop__navPlayer__2TGn7">
<div id="myDropdown" class="dropdown-content">
<a onclick="myFunction()" href="#" class="NavigationTop__icon__32Kg3" data-ui-name="info">
<span class="NavigationTop__iconBg__3nlrW">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" height="16" width="16" class="UI__Icon__icon">
<path d="M15.6 32s-.1 0 0 0h-.8c-2.7 0-5.6 0-8.4-.8-3-.9-4.6-2.4-4.7-4.7-.1-1.1.3-2.2 1-3.1 1.1-1.5 2.7-2.4 4.1-3.1.5-.3 1-.5 1.5-.8.6-.4 2-1.4 2.1-2.7 0-.6-.2-1.3-.8-2.1l-.6-.9c-.4-.6-.8-1.2-1.2-1.9-1.2-2.5-1-5.6.4-7.9.2-.3.4-.6.7-.9 1.8-2 4.3-3.1 7-3.1 2.7-.1 5.3 1.1 7.2 3 .3.3.6.7.8 1 1.4 2.3 1.5 5.4.3 7.9-.4.7-.8 1.3-1.2 1.9l-.6.9c-.5.8-.8 1.5-.8 2.1.1 1.3 1.5 2.3 2.1 2.7.5.3 1 .6 1.5.8 1.4.7 3 1.5 4.1 3.1.7.9 1 2.1 1 3.1-.1 2.2-1.7 3.8-4.7 4.7-.7.2-1.4.3-2 .5-.7.1-1.5-.4-1.6-1.1-.1-.7.4-1.5 1.1-1.6.6-.1 1.2-.2 1.7-.4 2.4-.7 2.7-1.5 2.7-2.2 0-.5-.1-.9-.5-1.4-.7-1-1.9-1.6-3.1-2.3-.6-.3-1.1-.6-1.7-.9-2.1-1.3-3.3-3-3.4-4.9-.1-1.2.3-2.4 1.2-3.8.2-.3.4-.7.7-1 .4-.5.7-1 1-1.5.8-1.6.7-3.6-.2-5.2-.1-.1-.2-.2-.4-.5-1.3-1.4-3.2-2.2-5.2-2.2-1.9 0-3.7.8-5 2.2-.2.2-.3.4-.4.5-.9 1.6-1 3.6-.2 5.2.3.5.6 1 1 1.5.2.3.5.6.7 1 .9 1.3 1.3 2.6 1.2 3.8-.1 1.9-1.3 3.6-3.4 4.9-.5.3-1.1.6-1.7.9C6.9 23.4 5.7 24 5 25c-.3.4-.5.9-.5 1.4 0 .7.4 1.5 2.7 2.2 2.4.7 4.9.7 7.6.7h.8c.4 0 .8.2 1 .5.3.3.4.7.3 1.1 0 .6-.6 1.1-1.3 1.1z"></path></svg></span></a>
<div class="NavigationPlayer__nav__1GtYE NavigationPlayer__navOpen__kmIqC">
<ul class="NavigationPlayer__navSub__SIRkf">
<li class="NavigationPlayer__signUp__2AOMK">
Sign Up</li>
<li class="NavigationPlayer__signIn__3qaVH">Sign In</li>
<li>Legal</li>
<li>Privacy</li>
<li>Support</li>
<li>Cookies</li>
<li>
<div class="NavigationPlayer__languageWrap__2jmcz">
<div class="UI__DropDown__custom-select LanguageSelector__dropdown__2uNdg">
<select class="select" data-ui-name="languageSelector">
<option value="de-DE">Deutsch</option>
<option value="en-US">English</option>
<option value="es-ES">Español</option>
<option value="es-MX">Español Latinoamérica</option>
<option value="fr-FR">Français</option>
<option value="it-IT">Italiano</option>
<option value="ja-JP">日本語</option>
<option value="ko-KR">한국어</option>
<option value="pl-PL">Polski</option>
<option value="pt-BR">Português do Brasil</option>
<option value="ru-RU">Русский</option>
<option value="zh-TW">繁體中文</option>
<option value="zh-CN">简体中文</option>
</select>
</div>
Any help would be greatly appreciated and thanks in advance.
I couldn't get your code to work, so what I did is made an example. What you need to do is on document load set the style.display of your dropdown to none.
Then add the showDropDown function to an onclick method for your button, so that you can hide/show the button depending on its current state. It checks to see if the button is currently hidden, if it IS hidden it then shows the div, if not it hides the div.
document.addEventListener("load", hideDropDownOnLoad());
function hideDropDownOnLoad() {
// Is called when the document loads to hide the dropdown
var dropdown = document.getElementById("dropdown");
dropdown.style.display = "none";
}
function showDropDown() {
// Get the dropdown
var dropdown = document.getElementById("dropdown");
// Check to see if the dropdown is currently hidden
if(dropdown.style.display === "none") {
// It is hidden so show the drop down
dropdown.style.display = "block";
} else {
// The dropdown is visible so hide it
dropdown.style.display = "none";
}
}
<div class="container">
Click for More...
<div id="dropdown" class="dropdown">
<ul>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
<li>Option 5</li>
</ul>
</div>
</div>
UPDATE
I have updated your actual code for this to work, see below:
document.addEventListener("load", hideDropDownOnLoad());
function hideDropDownOnLoad() {
// Is called when the document loads to hide the dropdown
var dropdown = document.getElementById("dropdown");
dropdown.style.display = "none";
}
function showDropDown() {
// Get the dropdown
var dropdown = document.getElementById("dropdown");
// Check to see if the dropdown is currently hidden
if(dropdown.style.display === "none") {
// It is hidden so show the drop down
dropdown.style.display = "block";
} else {
// The dropdown is visible so hide it
dropdown.style.display = "none";
}
}
<div class="NavigationTop__groupRight__3UIqi">
<span class="NavigationTop__navPlayer__2TGn7">
<div id="myDropdown" class="dropdown-content">
<a onclick="showDropDown()" href="#" class="NavigationTop__icon__32Kg3" data-ui-name="info">
<span class="NavigationTop__iconBg__3nlrW">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" height="16" width="16" class="UI__Icon__icon">
<path d="M15.6 32s-.1 0 0 0h-.8c-2.7 0-5.6 0-8.4-.8-3-.9-4.6-2.4-4.7-4.7-.1-1.1.3-2.2 1-3.1 1.1-1.5 2.7-2.4 4.1-3.1.5-.3 1-.5 1.5-.8.6-.4 2-1.4 2.1-2.7 0-.6-.2-1.3-.8-2.1l-.6-.9c-.4-.6-.8-1.2-1.2-1.9-1.2-2.5-1-5.6.4-7.9.2-.3.4-.6.7-.9 1.8-2 4.3-3.1 7-3.1 2.7-.1 5.3 1.1 7.2 3 .3.3.6.7.8 1 1.4 2.3 1.5 5.4.3 7.9-.4.7-.8 1.3-1.2 1.9l-.6.9c-.5.8-.8 1.5-.8 2.1.1 1.3 1.5 2.3 2.1 2.7.5.3 1 .6 1.5.8 1.4.7 3 1.5 4.1 3.1.7.9 1 2.1 1 3.1-.1 2.2-1.7 3.8-4.7 4.7-.7.2-1.4.3-2 .5-.7.1-1.5-.4-1.6-1.1-.1-.7.4-1.5 1.1-1.6.6-.1 1.2-.2 1.7-.4 2.4-.7 2.7-1.5 2.7-2.2 0-.5-.1-.9-.5-1.4-.7-1-1.9-1.6-3.1-2.3-.6-.3-1.1-.6-1.7-.9-2.1-1.3-3.3-3-3.4-4.9-.1-1.2.3-2.4 1.2-3.8.2-.3.4-.7.7-1 .4-.5.7-1 1-1.5.8-1.6.7-3.6-.2-5.2-.1-.1-.2-.2-.4-.5-1.3-1.4-3.2-2.2-5.2-2.2-1.9 0-3.7.8-5 2.2-.2.2-.3.4-.4.5-.9 1.6-1 3.6-.2 5.2.3.5.6 1 1 1.5.2.3.5.6.7 1 .9 1.3 1.3 2.6 1.2 3.8-.1 1.9-1.3 3.6-3.4 4.9-.5.3-1.1.6-1.7.9C6.9 23.4 5.7 24 5 25c-.3.4-.5.9-.5 1.4 0 .7.4 1.5 2.7 2.2 2.4.7 4.9.7 7.6.7h.8c.4 0 .8.2 1 .5.3.3.4.7.3 1.1 0 .6-.6 1.1-1.3 1.1z"></path></svg></span></a>
<div id="dropdown" class="NavigationPlayer__nav__1GtYE NavigationPlayer__navOpen__kmIqC">
<ul class="NavigationPlayer__navSub__SIRkf">
<li class="NavigationPlayer__signUp__2AOMK">
Sign Up</li>
<li class="NavigationPlayer__signIn__3qaVH">Sign In</li>
<li>Legal</li>
<li>Privacy</li>
<li>Support</li>
<li>Cookies</li>
<li>
<div class="NavigationPlayer__languageWrap__2jmcz">
<div class="UI__DropDown__custom-select LanguageSelector__dropdown__2uNdg">
<select class="select" data-ui-name="languageSelector">
<option value="de-DE">Deutsch</option>
<option value="en-US">English</option>
<option value="es-ES">Español</option>
<option value="es-MX">Español Latinoamérica</option>
<option value="fr-FR">Français</option>
<option value="it-IT">Italiano</option>
<option value="ja-JP">日本語</option>
<option value="ko-KR">한국어</option>
<option value="pl-PL">Polski</option>
<option value="pt-BR">Português do Brasil</option>
<option value="ru-RU">Русский</option>
<option value="zh-TW">繁體中文</option>
<option value="zh-CN">简体中文</option>
</select>
</div>