Used pure JS

Community feedback

• 

  Khaya•300

  @khaya05Posted over 1 year ago

  Hey Matheus!

  Great Job on this challenge. However, I noticed that for your dropdown to show, a user should start by clicking on the nav-link i.e. features to show the dropdown.

  This works, but to improve the user's experience, you should show the drop-down menu when the user hovers over the nav-links with drop-down links like features.

  To archive this functionality you should use mouse events like onmouseenter. The onmouseover mouse event is used to trigger a JavaScript function when the mouse pointer moves over an element. Here's an example of how you can use the onmouseover event:

  1. HTML: Start by creating an HTML element that you want to interact with using the onmouseover event.

  <button id="myButton">Hover over me!</button>
  

  2. JavaScript: Next, write a JavaScript function that will be called when the onmouseover event is triggered.

  3. Event binding: Finally, use the onmouseover to trigger any functionality that you wan't when the mouse hovers over the element

  Also, instead of this:

  function menu_open_a() {
  menu_actived = true;
  menu_dropdown.style.display = 'flex';
  menu_dropdown.style.flexDirection = 'column';
  menu_dropdown.style.listStyle = 'none';
  menu_dropdown.style.padding = '0';
  menu_dropdown.style.alignItems = 'flex-end';
  menu_dropdown.style.borderRadius = '10px';
  menu_dropdown.style.backgroundColor = 'white';
  menu_dropdown.style.boxShadow = '2px 2px 35px 2px rgba(0, 0, 0, 0.2)';
  arrow.src = 'images/icon-arrow-up.svg';
  }
  

  You can just create a sepatere CSS class that will have all those styles, and add it programaticaly on mouseover event like this:

  .menu-dropdown-active {
  display: flex;
  flex-direction: column;
  list-style: none;
  padding: 0;
  align-items: flex-end;
  border-radius: 10px;
  background-color: white;
  box-shadow: 2px 2px 35px 2px rgba(0, 0, 0, 0.2);
  }
  
  

  JavaScript

  // call this function on mouseover
  function menu_open_a() {
  menu_actived = true;
  menu_dropdown.classList.add('menu-dropdown-active');
  arrow.src = 'images/icon-arrow-up.svg';
  }
  
  

  Hope this helps👍.

  Marked as helpful

  0

  ---

  

  Matheus Garibaldi•100

  @garibaldiiPosted over 1 year ago

  Hey Khaya I'm so glad that you gave me this sugestion! Im goint to implement right now! @khaya05

  0

  

  Matheus Garibaldi•100

  @garibaldiiPosted over 1 year ago

  I really thought there were other efficient ways to interact with the dropdown menu

  0