用JS做个小清新导航，打造个人专属风格

2023-09-21 21:00:49

JS小清新导航的制作过程

在这个JS小清新导航的制作过程中，我们将经历以下几个步骤：

HTML初始化 ：首先，我们需要创建一个基本的HTML文件，并添加必要的元素，例如<div>和<ul>，为导航栏和导航项留出空间。
CSS设置 ：接下来，我们需要添加CSS样式来设计导航的外观，例如字体、颜色和布局。可以使用外部样式表或内联样式来实现。
JS代码编写 ：在这一步中，我们将编写JavaScript代码来处理导航的交互性，例如当鼠标悬停在导航项上时出现下拉菜单，或当用户点击导航项时跳转到相应页面。
测试与调试 ：最后，我们需要对导航进行测试和调试，确保其在不同浏览器和设备上都能正常工作。

具体步骤和示例代码

以下是具体步骤和示例代码：

HTML代码 ：

<!DOCTYPE html>
<html>
<head>
  
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="navigation">
    <ul>
      <li><a href="#">主页</a></li>
      <li><a href="#">关于我们</a></li>
      <li><a href="#">产品</a></li>
      <li><a href="#">联系我们</a></li>
    </ul>
  </div>

  <script src="script.js"></script>
</body>
</html>

CSS代码 ：

#navigation {
  width: 100%;
  height: 50px;
  background-color: #f5f5f5;
}

#navigation ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#navigation li {
  float: left;
  width: 20%;
  height: 50px;
  text-align: center;
  line-height: 50px;
}

#navigation li a {
  text-decoration: none;
  color: #000;
}

#navigation li a:hover {
  color: #fff;
  background-color: #000;
}

JavaScript代码 ：

// 获取导航元素
const navigation = document.getElementById('navigation');

// 遍历导航项
const navigationItems = navigation.getElementsByTagName('li');

// 为每个导航项添加事件监听器
for (let i = 0; i < navigationItems.length; i++) {
  const navigationItem = navigationItems[i];

  // 当鼠标悬停在导航项上时，显示下拉菜单
  navigationItem.addEventListener('mouseover', () => {
    const dropdownMenu = navigationItem.getElementsByTagName('ul')[0];
    dropdownMenu.style.display = 'block';
  });

  // 当鼠标离开导航项时，隐藏下拉菜单
  navigationItem.addEventListener('mouseout', () => {
    const dropdownMenu = navigationItem.getElementsByTagName('ul')[0];
    dropdownMenu.style.display = 'none';
  });
}