Skip to content
Submitted 7 months ago

News Homepage

Øystein Håberg•10,710
@Islandstone89
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...News homepage
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I used Subgrid for the first time!

What challenges did you encounter, and how did you overcome them?

The most challenging part was the mobile menu.

What specific areas of your project would you like help with?

I couldn't figure out how to make the dark overlay when the mobile menu is open.

Community feedback

  • Roksolana•910
    @RoksolanaVeresPosted 7 months ago

    Hey, great job! The responsiveness of your project is just awesome!

    Regarding your issue with dark overlay, there is nothing too complicated.

    First in your html you create an empty div with class "overlay" for example:

      <body>
    <div class="overlay"></div>

    <h1 class="visually-hidden">News Homepage Challenge</h1>
      ...
  </body>

    Then you need to style it so that it stretches on the whole page and is hidden initially (until we open the menu):

    .overlay {
  position: absolute;
  background-color: rgba(23, 24, 44, 0.6);
  height: 100%;
  width: 100%;
  display: none;
}

    You also need to create another class in css, for example, "active" which will override display: none;with display: block; to show the overlay when the menu is open:

    .active {
  display: block;
}

    Now in your JS you select the overlay and add the "active" class to it when the menu is open and remove this class when the menu is closed:

    let overlay = document.querySelector(".overlay");

menuBtnOpen.addEventListener("click", () => {
  menuBtnOpen.setAttribute("aria-expanded", "true");
  menuBtnClose.setAttribute("aria-expanded", "true");
  overlay.classList.add("active");
});

menuBtnClose.addEventListener("click", () => {
  menuBtnOpen.setAttribute("aria-expanded", "false");
  menuBtnClose.setAttribute("aria-expanded", "false");
  overlay.classList.remove("active");
});

    That's all. You can also add an event listener to the overlay and make the menu close when the overlay is clicked (typical behavior in most websites)

    overlay.addEventListener("click", () => {
  menuBtnOpen.setAttribute("aria-expanded", "false");
  menuBtnClose.setAttribute("aria-expanded", "false");
  overlay.classList.remove("active");
});
    Marked as helpful
    1
    Øystein Håberg•10,710
    @Islandstone89Posted 7 months ago

    @RoksolanaVeres Thanks, that worked! Appreciate it :)

    1
    Roksolana•910
    @RoksolanaVeresPosted 7 months ago

    @Islandstone89 I'm glad it helped :)

    Marked as helpful
    1

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord