This article aims to resolve the problem that the drop-down menu does not appear or disappears after clicking when using the responsive navigation bar code provided by W3Schools. We will detail the possible causes of the problem and provide clear steps and code examples to help you fix the drop-down menu feature of the navigation bar to ensure it works properly on all devices.

Problem analysis

When the drop-down menu of the responsive navigation bar does not appear after clicking, or disappears after scrolling the page, it is usually caused by the following reasons:

1. JavaScript code is missing or not properly introduced: Switching of responsive navigation bar and display/hiding of drop-down menus depend on JavaScript code. If the code is missing or the introduction is incorrect, it will cause the function to fail.
2. Missing Font Awesome Icon Library: Toggle icons (three horizontal lines) in the navigation bar are usually used with Font Awesome Icon Library. If the library is missing, the icon may not be displayed correctly, affecting the user experience.
3. CSS Style Overwrite or Conflict: Some CSS Styles may overwrite or conflict with the style of the navigation bar, causing the drop-down menu to not be displayed correctly.
4. The page content is insufficient and the scroll bar does not appear: In some cases, if the page content is small and there is no scroll bar, the problem of the drop-down menu disappearing after scrolling may not be reproduced.

Solution

To address the above problems, we can take the following steps to solve them:

1. Introducing JavaScript code

Make sure the HTML file contains the following JavaScript code and place it at the end of the

 <script>
  function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
      x.className = "responsive";
    } else {
      x.className = "topnav";
    }
  }
</script>

The purpose of this code is: when clicking the toggle icon, the responsive class will be added or removed to the topnav class of the navigation bar, thereby controlling how the navigation bar is displayed on the small screen.

2. Introduce Font Awesome icon library

Add the following code to the

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

This will ensure that the toggle icon (three horizontal lines) can be displayed correctly.

3. Check CSS Style

Double-check the CSS styles to make sure there are no overrides or conflicts that cause the drop-down menu to not display correctly. Especially the following aspects:

• Whether the display property of .dropdown-content is set to none and is not overwritten correctly.
• .topnav.responsive Whether the position property of .dropdown-content is set to relative to ensure that the drop-down menu appears correctly on the small screen.
• Check if there are other CSS styles that affect the z-index attribute of the drop-down menu, causing it to be obscured by other elements.

4. Make sure the page content is sufficient

To test whether the drop-down menu after scrolling is working properly, make sure the page content is long enough that a scroll bar appears. You can add some extra text or elements to the HTML file, such as:

 <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minimum venia, quis nostrud exercise ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
  ... (Repeat the above paragraph many times) ...
</p>

5. Complete code example

Here is a complete code example containing HTML, CSS, and JavaScript code:

 


  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  



  

    Home
    News
    Contact
    

      Dropdown
        
      
      

        Link 1
        Link 2
        Link 3
      
    
    About
    
      
    
  

  

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minimum venia, quis nostrud exercise ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  
  

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minimum venia, quis nostrud exercise ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  
  

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minimum venia, quis nostrud exercise ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  
  

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minimum venia, quis nostrud exercise ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  
  

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minimum venia, quis nostrud exercise ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  
  

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minimum venia, quis nostrud exercise ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  

  <script>
    function myFunction() {
      var x = document.getElementById("myTopnav");
      if (x.className === "topnav") {
        x.className = "responsive";
      } else {
        x.className = "topnav";
      }
    }
  </script>

Summarize

Through the above steps, you should be able to solve the problem of invalid clicks on the responsive navigation bar drop-down menu. The key is to ensure that JavaScript code is introduced correctly, Font Awesome icon library is available, and CSS styles are not conflicted. Check each step carefully and adjust it according to your specific situation to finally achieve a fully functional responsive navigation bar.

The above is the detailed content of Solve the problem of clicking on the responsive navigation bar drop-down menu failure. For more information, please follow other related articles on the PHP Chinese website!