troubleshooting Question

Why aren't the dropdowns displaying in this menu?

Avatar of dlearman1
dlearman1Flag for United States of America asked on
* BEMHTMLJavaScript* SCSS
1 Comment1 Solution11 ViewsLast Modified:
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
  <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>

Open in new window

SCSS

.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;
}

Open in new window

JS

/* 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);



Open in new window

 
ASKER CERTIFIED SOLUTION
dlearman1
Principal

Our community of experts have been thoroughly vetted for their expertise and industry experience.

Log in to continue reading
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform for $9.99/mo
View membership options
Unlock 1 Answer and 1 Comment.
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
See how we're fighting big data
The Value of Experts Exchange in My Daily IT Life

Experts Exchange (EE) has become my company's go-to resource to get answers. I've used EE to make decisions, solve problems and even save customers. OutagesIO has been a challenging project and... Keep reading >>

Mike

Owner of Outages.IO
Phoenix, Arizona, United States
Member Since 2016
Join a full scale community that combines the best parts of other tools into one platform.
Unlock 1 Answer and 1 Comment.
View membership options
“All of life is about relationships, and EE has made a virtual community a real community. It lifts everyone's boat.”
William Peck

Member since 2004