一步步教大家编写酷炫的导航栏js+css实现

在这里我将为大家详细讲解如何一步步实现酷炫的导航栏。

准备工作

在开始编写之前，我们需要准备一些文件。首先，我们需要HTML文件，将我们的导航栏放在其中，并链接我们的CSS和JS文件。然后我们需要一个CSS文件，用于样式的定义。最后，我们需要一个JS文件，用于编写我们的交互逻辑。

HTML结构

让我们先来看一下我们的导航栏需要的HTML结构。我们需要一个HTML \

标签来作为我们主要导航的容器。然后，每一个菜单项会被放在一个 \
• 标签中，这些标签总共作为一个 \
  的子元素。

  示例代码:

  <nav class="navbar">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">Contact Us</a></li>
    </ul>
  </nav>
  

  CSS样式

  接下来，让我们来定义一些CSS样式来为我们的导航栏添加一些样式。

  示例代码:

  .navbar {
    background-color: #333;
    height: 50px;
    line-height: 50px;
  }
  
  .navbar ul {
    margin: 0;
    padding: 0;
  }
  
  .navbar ul li {
    display: inline-block;
    position: relative;
  }
  
  .navbar ul li a {
    color: #fff;
    display: block;
    padding: 0 20px;
    text-decoration: none;
  }
  
  .navbar ul li a:hover {
    background-color: #555;
  }
  
  .navbar ul li ul {
    display: none;
    position: absolute;
    top: 50px;
    left: 0;
    background-color: #333;
    padding: 10px;
  }
  
  .navbar ul li:hover ul {
    display: block;
  }
  
  .navbar ul li ul li {
    display: block;
  }
  

  以上的样式设置了导航栏的背景色、高度和行高等样式。同时也定义了子元素——菜单项的样式，并为鼠标悬浮时定义了背景颜色。同时，也定义了下拉菜单的样式，包括了其位置、样式及展示与隐藏。

  JS代码

  最后，我们需要编写一些JS代码，让我们的下拉菜单能够正常的展示与隐藏。

  示例代码:

  /* 获取所有导航栏的菜单项*/
  var navItems = document.querySelectorAll('.navbar ul li');
  
  /* 遍历菜单项，发现有子菜单的菜单项，通过监听其鼠标移入和移出事件，控制其子菜单显示与隐藏*/
  for (var i = 0; i < navItems.length; i++) {
    if (navItems[i].querySelector('ul')) {
      /* 监听菜单项的鼠标移入事件*/
      navItems[i].addEventListener('mouseover', function() {
        this.querySelector('ul').style.display = "block";
      });
  
      /* 监听菜单项的鼠标移出事件*/
      navItems[i].addEventListener('mouseout', function() {
        this.querySelector('ul').style.display = "none";
      });
    }
  }
  

  以上JS代码将会获取所有导航栏的菜单项，通过遍历菜单项判断，为拥有子菜单的菜单项添加鼠标移入和移出事件的监听。当鼠标移入时，子菜单将被展示，而当鼠标移出时，子菜单将被隐藏。

  这样，我们自己实现一个酷炫的导航栏的准备工作就全部完成了，接下来只需要把以上的代码放到之前准备好的HTML文件、CSS文件和JS文件中即可。

  示例

  为了帮助大家更好地学习理解，这里提供两个示例供参考查看:

  • 示例1: 点击查看
  • 示例2: 点击查看