Skip to content
OverviewSolutions
4
Comments
1
Htoo Myat Kyaing
@Htoomyat-Kyaing

All comments

  • Talasa•130
    @TalasaDevSubmitted almost 2 years ago

    Hello everyone, I just finished this project.

    I had a really hard time figuring out how to create the darkening effect in the site when the hamburger menu is open. I tried creating a <div class="shadow"> and then:

    • place in the after the <main> as <div class="shadow"></div> and give through CSS size, position, background-color, and then apply a blend-mode with multiply and transparency. I wanted to place over the main container another empty container of same size with only a transparent dark color that would display only when clicking the '.openMenu'. It didn't work and I sensed like my own computer was judging me. It was wear.

    • the second option I tried was, in mobile display, to add a second column in the '.navbar' element and style it with a dark color and transparency.

            <logo>    
         <div>  
            **// right here I place the <div class="shadow></div>**
             <ul class="navbar">            
                 <li>Home</li>
                 <li>New</li>
                 <li>Popular</li>
                 <li>Trending</li>
                 <li>Categories</li>            
             </ul>          
        </div>        
        <burger-menu>                
      </nav>```

 Could somebody provide any orientation on how to get that effect? 

Thank you,
happy codding!!

    News Homepage using Grid and Javascript

    2
    Htoo Myat Kyaing•100
    @Htoomyat-KyaingPosted almost 2 years ago

    Hello. This is how I did the dark filter effect. I put a class in <body> tag. The dark filter effect is set on that class using CSS "before" property and the display is set to "none". Then, when the hamburger menu is clicked, the display is toggled back to unset thus a dark filter is appeared between the page and the menu. If my explanation is confusing(sorry, my English is a little bit rusty), you can check the solution I've submitted recently. I hope this helps!

    Marked as helpful
    0