请求技术帮助：制作类似https://www.jinx.com的导航菜单栏

Hey there! I get it—recreating a polished nav menu can feel tricky when you're still learning. Let's put together a functional, modern navigation bar similar to the one you liked, using HTML, CSS, and jQuery. You can tweak the styles later to match your target design.

Step 1: Basic HTML Structure #

First, let's lay out the core structure with a logo, main menu items, and a dropdown submenu:

<nav class="main-nav">
  <div class="nav-container">
    <a href="#" class="nav-logo">MySite</a>
    <ul class="nav-menu">
      <li class="nav-item">
        <a href="#" class="nav-link">Home</a>
      </li>
      <li class="nav-item dropdown">
        <a href="#" class="nav-link dropdown-toggle">Services</a>
        <ul class="dropdown-menu">
          <li><a href="#" class="dropdown-link">Web Design</a></li>
          <li><a href="#" class="dropdown-link">Development</a></li>
          <li><a href="#" class="dropdown-link">SEO</a></li>
        </ul>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">About</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">Contact</a>
      </li>
    </ul>
    <div class="hamburger">
      <span class="bar"></span>
      <span class="bar"></span>
      <span class="bar"></span>
    </div>
  </div>
</nav>

Step 2: CSS for Styling & Responsiveness #

Next, add styles to make it look clean, responsive, and add hover/active effects:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

.main-nav {
  background-color: #2c3e50;
  padding: 1rem 0;
  position: relative;
}

.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 2rem;
}

.nav-logo {
  color: white;
  font-size: 1.5rem;
  font-weight: bold;
  text-decoration: none;
}

.nav-menu {
  display: flex;
  list-style: none;
  gap: 2rem;
}

.nav-link {
  color: white;
  text-decoration: none;
  padding: 0.5rem 1rem;
  transition: background-color 0.3s ease;
}

.nav-link:hover {
  background-color: #34495e;
  border-radius: 4px;
}

/* Dropdown Styles */
.dropdown {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: white;
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
  border-radius: 4px;
  list-style: none;
  min-width: 180px;
  display: none;
}

.dropdown-link {
  color: #2c3e50;
  padding: 0.8rem 1rem;
  display: block;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.dropdown-link:hover {
  background-color: #f1f1f1;
}

.dropdown:hover .dropdown-menu {
  display: block;
}

/* Hamburger Menu for Mobile */
.hamburger {
  display: none;
  cursor: pointer;
}

.bar {
  display: block;
  width: 25px;
  height: 3px;
  margin: 5px auto;
  background-color: white;
  transition: all 0.3s ease;
}

@media (max-width: 768px) {
  .hamburger {
    display: block;
  }

  .nav-menu {
    position: fixed;
    left: -100%;
    top: 70px;
    flex-direction: column;
    background-color: #2c3e50;
    width: 100%;
    text-align: center;
    transition: 0.3s;
    padding: 2rem 0;
  }

  .nav-menu.active {
    left: 0;
  }

  .dropdown-menu {
    position: static;
    box-shadow: none;
    background-color: #34495e;
  }

  .dropdown-link {
    color: white;
  }
}

Step 3: jQuery for Interactive Behavior #

Add jQuery to handle the mobile hamburger menu toggle and dropdowns on touch devices:

$(document).ready(function() {
  // Toggle mobile menu
  $('.hamburger').click(function() {
    $('.nav-menu').toggleClass('active');
    $('.hamburger').toggleClass('active');
  });

  // Close dropdown when clicking outside (optional)
  $(document).click(function(event) {
    if (!$(event.target).closest('.dropdown').length && !$(event.target).closest('.hamburger').length) {
      $('.dropdown-menu').hide();
    }
  });

  // Toggle dropdown on click for mobile
  $('.dropdown-toggle').click(function(e) {
    e.preventDefault();
    $(this).siblings('.dropdown-menu').slideToggle();
  });
});

Key Notes to Customize #

• Colors: Change background-color values in the CSS to match the site you're referencing.
• Fonts: Swap out font-family for the typography used in your target menu.
• Animations: Adjust the transition properties to tweak hover/menu open speeds.
• Layout: Modify gap, padding, or max-width values to match the spacing of the original menu.

Feel free to ask if you need help adjusting specific parts—like adding animations, changing the dropdown behavior, or refining the responsive layout!

内容的提问来源于stack exchange，提问作者felipe