Skip to content
Submitted over 2 years ago

Responsive dropdown Menu using HTML SCSS JS

Victor Paumier•140
@lifeaddikt
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Intro section with dropdown navigation
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

Any feedbacks would be welcome !

I had some difficulties on the dropdown menu i have used position:fixed.... it would be better to use position : absolute i guess... but i didn't have a parent item to do it properly.

I also add difficulties on the desktop on sharing the main content in 2 sections that are well responsive. I'm steel learning flex-basis, flex-shrink and grow... Im not clear with everything.

Thank's :)

Community feedback

  • lieneil•560
    @NJVSPosted over 2 years ago

    Great work completing this challenge.

    Regarding your dropdown menu, I think you can better position your <ul class="dropdown"> by moving your dropdown inside the <li class="nav__site-links__dropdown-links">.

    <li class="nav__site-links__dropdown-links">
  <a href="#">Features</a>
  <ul class="dropdown features>
    <li>...</li>
    <li>...</li>
    <li>...</li>
  </ul>
</li>

    .nav__site-links__dropdown-links  {
  position: relative;

  .dropdown {
    position: absolute;
    top: 120%;

    &.features {
      right: 0;
    }
    &.company{
      left: 0;
    }
  }
}
    Marked as helpful
    1
    Victor Paumier•140
    @lifeaddiktPosted over 2 years ago

    @NJVS Hello and thank you for your comment !

    yes i have seen that after the challenge i didnt thought that ul could be iniside a li. That will be useful in the future ty

    I will definitely do that in my next nav-bar !

    0

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