asked on
Why aren't the dropdowns displaying in this menu?
The code is a refactoring (sort of) of an existing codepen to incorporate BEM naming. The codepen can be found at: https://codepen.io/tutsplus/pen/bGVPVrY. As it stands, the menu seems to work except the submenu items are not displaying. Experts' help in debugging this issue would be wonderful?
Also, since this is my first venture into namespacing/BEM notation, any thoughts, comments, opinions or advice would be appreciated.
HTML
Also, since this is my first venture into namespacing/BEM notation, any thoughts, comments, opinions or advice would be appreciated.
HTML
<header class="l-header">
<div class="c-banner">
<div class="c-banner__logo">
<a href="./index.htm"><img src="./_img/graphics/logos/serena-logo-lg.svg"
srcset="./_img/graphics/logos/serena-logo-sm.svg 360w,
./_img/graphics/logos/serena-logo-md.svg 576w,
./_img/graphics/logos/serena-logo-lg.svg 992w"
sizes="(min-width:144.0rem) 15vw,
(min-width: 76.8rem) 14vw,
(min-width: 0) 40vw"
alt="Serena Construction Logo">
</a>
</div>
<div class="c-banner__button js-button">
<a href="#"><ion-icon name="menu-sharp"></ion-icon></a>
</div>
</div>
<nav>
<div class="c-navbar">
<div class= "c-navbar__items">
<div class="c-navbar__items--link has-submenu">
<a tabindex="1">PROPERTIES</a>
<div class="c-navbar__subitems">
<div class="c-navbar__subitems--link">
<a href="./properties/kirkland.htm">KIRKLAND</a>
</div>
<div class="c-navbar__subitems--link">
<a href="./properties/bellevue.htm">BELLEVUE</a>
</div>
</div>
</div>
<div class="c-navbar__items--link">
<a href="./gallery.htm" tabindex="2">GALLERY</a>
</div>
<div class="c-navbar__items--link has-submenu">
<a tabindex="3" >ABOUT</a>
<div class="c-navbar__subitems">
<div class="c-navbar__subitems--link">
<a href="./serena.htm">SERENA</a>
</div>
<div class="c-navbar__subitems--link">
<a href="./team.htm">TEAM</a>
</div>
<div class="c-navbar__subitems--link">
<a href="./testimomials.htm">TESTIMONIALS</a>
</div>
</div>
</div>
<div class="c-navbar__items--link"><a href="./news.htm" tabindex="4">NEWS</a>
</div>
<div class="c-navbar__items--link"><a href="./contact.htm" tabindex="5">CONTACT</a>
</div>
</div>
</div>
</nav>
</header>
.l-header {
position: fixed;
top: 0;
left:0;
width: 100%;
height: 50vw;
padding-bottom: 1rem;
background-color: $brand-white;
}
.c-banner {
position: relative;
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: flex-end;
width: 100%;
height: auto; //auto;
padding: 2rem;
background: $brand-white;
border-bottom: .4rem $brand-gold solid;
&__logo {
width: calc(15vw + .1rem);
}
&__button {
text-decoration: none;
& a ion-icon {
font-size: 5rem;
color: $black-black;
}
}
}
.c-navbar {
display: block;
width: 33vw; //100vw;
height: 100vh;
background: #000;
&__items {
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
align-items: flex-start;
text-align: left;
padding: 0 4rem;
font-family: $font-family-base;
font-size: calc(#{$font-size-base} * .875);
font-weight: 300;
&--link {
display: none;
width: 100%;
text-align: left;
text-decoration: none;
color: $brand-white;
padding: 2.5rem 0;
& a {
display: block;
color: $brand-white;
text-decoration: none;
}
& a:hover {
display: block;
color: $brand-gold;
}
& a:active { // not needed
display: block;
color: $cool-grey;
}
& .has-submenu {
& > a::after {
font-family: "Ionicons";
font-size: 1.2rem;
line-height: 1.6rem;
font-weight: 900;
content: "caret-down";
color: white;
padding-left: .5rem;
}
}
}
}
&__subitems {
margin: 0;
padding: 0;
font-family: $font-family-base;
font-size: calc(#{$font-size-base} * .875);
font-weight: 300;
text-align: left;
text-decoration: none;
&--link a {
display: none;
outline: 1px red solid;
padding: 1rem 1.5rem;
color: $brand-gold;
&:hover {
color: green;
}
}
}
}
// show menu items
.active .c-navbar__items--link {
display: block;
}
// show submenu items
.submenu-active .c-navbar__subitems--link {
display: block;
}
/* js-toggleNav
** ***************************************************************** */
const button = document.querySelector(".js-button");
const menu = document.querySelector(".c-navbar__items");
const items = document.querySelectorAll(".c-navbar__items--link"); //returns node list
// Toggle mobile menu
function toggleMenu() {
if (menu.classList.contains("active")) {
menu.classList.remove("active");
button.querySelector("a").innerHTML = "<ion-icon name='menu'></ion-icon>";
} else {
menu.classList.add("active");
button.querySelector("a").innerHTML = "<ion-icon name='close-sharp'></ion-icon>";
}
}
// Activate Submenu
function toggleItem() {
if (this.classList.contains("submenu-active")) {
let listA = this.classList;
if(listA) {
console.log(listA);
}else{
console.log("listA is null");
}
this.classList.remove("submenu-active");
} else if (menu.querySelector(".submenu-active")) {
menu.querySelector(".submenu-active").classList.remove("submenu-active");
this.classList.add("submenu-active");
} else {
this.classList.add("submenu-active");
}
}
// Close Submenu From Anywhere
function closeSubmenu(e) {
let isClickInside = menu.contains(e.target);
if (!isClickInside && menu.querySelector(".submenu-active")) {
menu.querySelector(".submenu-active").classList.remove("submenu-active");
}
}
// Event Listeners
button.addEventListener("click", toggleMenu, false);
for (let item of items) {
if (item.querySelector(".c-navbar__subitems")) {
item.addEventListener("click", toggleItem, false);
}
item.addEventListener("keypress", toggleItem, false);
}
document.addEventListener("click", closeSubmenu, false);
* BEMHTMLJavaScript* SCSS
Last Comment
dlearman1