How can HTML and JavaScript be used to create a menu in a PHP website?

To create a menu in a PHP website using HTML and JavaScript, you can use HTML to structure the menu items and JavaScript to handle the menu interactions, such as showing and hiding submenus or changing the active menu item. You can include the HTML menu structure in your PHP template file and use JavaScript to enhance its functionality. 

<!DOCTYPE html>
<html>
<head>
  <title>Menu Example</title>
  <style>
    .menu {
      list-style-type: none;
      margin: 0;
      padding: 0;
    }
    .menu li {
      display: inline-block;
      margin-right: 10px;
    }
    .submenu {
      display: none;
    }
  </style>
</head>
<body>

<ul class="menu">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a>
    <ul class="submenu">
      <li><a href="#">Company</a></li>
      <li><a href="#">Team</a></li>
    </ul>
  </li>
  <li><a href="#">Services</a></li>
  <li><a href="#">Contact</a></li>
</ul>

<script>
  document.querySelectorAll('.menu li').forEach(item => {
    item.addEventListener('mouseenter', () => {
      item.querySelector('.submenu').style.display = 'block';
    });
    item.addEventListener('mouseleave', () => {
      item.querySelector('.submenu').style.display = 'none';
    });
  });
</script>

</body>
</html>

Keywords

HTML JavaScript menu PHP website navigation.

Related Questions