Used SASS (flexbox, grid, media queries) and plain JS

Community feedback

• 

  mubizzy•1,520

  @mubizzyPosted over 2 years ago

  Excellent job on this challenge!

  Hope it helps:)...don't forget to mark it as helpful 👍

  Marked as helpful

  0
• 

  James•340

  @James-aldersonPosted over 2 years ago

  Hi David, the challenge you designed is very nice and well designed, there are just a few points that would help improve your design.

  1. Change the dropdown link to the dropdown button, in this case, when you click on it, it will no longer add the # sign to the url. best structure to create dropdown menu.
  2. Add a black shadow on the website content when clicking the menu button. Side Navigation.
  3. Use transitions instead of animation. Small changes from the challenge you designed:

  HTML:

  <div id="loading" class="modal__phone">
    ...
    <div class="modal__list">
      <a id="modal__phone--features" href="#">
        Features
        <img class="modal__list--img" src="build/img/icon-arrow-down.svg" alt="">
        <div class="modal__popup hiddenModal">...</div>
      </a>
  
      <a id="modal__phone--company" href="#">
        Company
        <img class="modal__list--img" id="phone__modal--arrow" src="build/img/icon-arrow-down.svg" alt="">
        <div class="modal__popup2 hiddenModal" id="modal-popup">...</div>
      </a>
      ...
    </div>
  </div>
  

  CSS:

  .modal__phone {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 225px;
    transition: right 0.3s ease-in-out;
    background-color: #fff;
    box-shadow: 0 10rem 10rem rgba(0, 0, 0, 0.486);
  }
  .modal__phone.hidden {
    right: -255px;
  }
  
  .modal__phone--close {
    cursor: pointer;
    margin: 3.3rem 1.2rem 0 auto;
  }
  
  .modal__list {
    display: flex;
    padding-left: 3rem;
    gap: 2rem;
    margin-top: 5rem;
    align-items: flex-start;
    flex-direction: column;
  }
  
  .hidden {
    display: initial;
    overflow: initial;
  }
  
  .header__list.hidden,
  .header__list2.hidden {
    display: none;
  }
  
  .hiddenModal {
    max-height: 0;
    overflow: hidden;
  }
  
  .modal__popup,
  .modal__popup2 {
    overflow: hidden;
    transition: max-height 0.3s ease-out;
  }
  .modal__popup {
    max-height: 167px;
  }
  .modal__popup2 {
    max-height: 123px;
  }
  
  .modal__popup ul {
    display: flex;
    padding: 1rem 0;
    justify-content: center;
    flex-direction: column;
  }
  .modal__popup2 ul {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1rem 0;
  }
  
  .hiddenModal {
   max-height: 0;
  }
  

  In this code, some changes have been written to display the notification menu better, you can see the changes by placing it in your project code. (in mobile resolution)

  happy codding 🚀

  Marked as helpful

  0