# Hide submenus when I scroll page

**URL:** <https://forum.kirupa.com/t/hide-submenus-when-i-scroll-page/643023>\
**Category:** web dev\
**Created:** [May 30, 2020, 9:59am UTC](https://forum.kirupa.com/t/hide-submenus-when-i-scroll-page/643023 "2020-05-30T09:59:51Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Mary\_Pieroszkiewicz](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/mary_pieroszkiewicz/32/11639_2.png) [@Mary\_Pieroszkiewicz](https://forum.kirupa.com/u/Mary_Pieroszkiewicz)\
**Post date:** [May 30, 2020, 9:59am UTC](https://forum.kirupa.com/t/hide-submenus-when-i-scroll-page/643023/1 "2020-05-30T09:59:51Z")

</div>

I need to do this functionality in navigation menu - submenu lists. When scrolls down the page, the submenu is to hide

[http://www.marypieroszkiewicz.com/3n\_solution/](http://www.marypieroszkiewicz.com/3n_solution/)

This is my code for menu-submenu

```
      const menu = document.querySelector(".menu");
      const links = menu.querySelectorAll("a:not(.js-anchor--link)");
    
      for (const el of links) {
        el.addEventListener("click", function (e) {
          e.preventDefault();
    
          const ul = this.nextElementSibling;
          if (ul !== null) {
            ul.classList.toggle("menu-submenu--show");
          }
    
    
          let par = this.parentElement;
          while (true) {
            if (par.parentElement.classList.contains("menu")) break;
            par = par.parentElement;
          }
    
          console.log(par)
          const mainLiChild = menu.children;
          for (const li of mainLiChild) {
            if (li !== par) {
              li.querySelectorAll(".menu-submenu").forEach(el => el.classList.remove("menu-submenu--show"));
            }
          }
        })
      }
```

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [May 30, 2020, 10:13pm UTC](https://forum.kirupa.com/t/hide-submenus-when-i-scroll-page/643023/2 "2020-05-30T22:13:05Z")

</div>

When you scroll, which menu exactly do you want to hide? Is it the entire header menu, or is it just the menu that appears when you click on an item?

 ![image](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/2X/e/ea1894ca2fb741a1c7b445f0fc7c87b4bbfda825.jpeg)

---

<div class="post-metadata">

**Author:** ![krilnon](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/krilnon/32/34_2.png) [@krilnon](https://forum.kirupa.com/u/krilnon)\
**Post date:** [May 31, 2020, 2:15am UTC](https://forum.kirupa.com/t/hide-submenus-when-i-scroll-page/643023/3 "2020-05-31T02:15:11Z")

</div>

I looked at this earlier today; the sort of “moral equivalent” solution is just:

```javascript
addEventListener(
    'scroll',
    _ => [...document.querySelectorAll('.menu-submenu--show')]
        .forEach(
            e => e.classList.remove('menu-submenu--show')
        )
)

```

…plus adjustments for what exactly folks want to dismiss or have happen.

---

<div class="post-metadata">

**Author:** ![Mary\_Pieroszkiewicz](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/mary_pieroszkiewicz/32/11639_2.png) [@Mary\_Pieroszkiewicz](https://forum.kirupa.com/u/Mary_Pieroszkiewicz)\
**Post date:** [June 4, 2020, 7:41pm UTC](https://forum.kirupa.com/t/hide-submenus-when-i-scroll-page/643023/4 "2020-06-04T19:41:35Z")

</div>

@krilnon Yes, this is it. Truly thank you for your great solution 👍🏻🙂

---

<div class="post-metadata">

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\
**Post date:** [June 4, 2020, 8:20pm UTC](https://forum.kirupa.com/t/hide-submenus-when-i-scroll-page/643023/5 "2020-06-04T20:20:22Z")

</div>

One tiny addition is that, unlike getElementsByClassName, querySelectorAll returns a NodeList, and NodeList objects have a forEach built in. This means spreading to an array is not needed if you need forEach (note that other array methods like map are not built in, so you may want to spread then, or manually call map on the list via call()).

```javascript
addEventListener(
    'scroll',
    _ => document.querySelectorAll('.menu-submenu--show')
        .forEach(
            e => e.classList.remove('menu-submenu--show')
        )
)

```

getElementsByClassName return HTMLCollections which do not have a forEach. They are, like NodeLists, array-like, though, so you can ultimately use array methods on them (more on that in the array-likes tip of the day: [JavaScript Tips of the Day](http://forum.kirupa.com/t/javascript-tips-of-the-day/641803) ).

---

<div class="post-metadata">

**Author:** ![krilnon](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/krilnon/32/34_2.png) [@krilnon](https://forum.kirupa.com/u/krilnon)\
**Post date:** [June 5, 2020, 4:58pm UTC](https://forum.kirupa.com/t/hide-submenus-when-i-scroll-page/643023/6 "2020-06-05T16:58:25Z")

</div>

> [@senocular](#):
>
> This means spreading to an array is not needed if you need forEach (note that other array methods like map are not built in, so you may want to spread then, or manually call map on the list via call()).

Fair enough; I spend enough of my time programming in other languages that all I remembered was that `querySelectorAll` has an unpredictable (by me, not docs) subset of behavior that I’d expect from an array.