用CSS开发时髦的导航栏第二篇

总体思路：

1. 先用HTML定义导航栏的外框架，确定导航栏的基本结构。
2. 使用CSS样式定义导航栏的样式，包括背景、高度、宽度以及对鼠标的交互效果等。
3. 对选中的菜单项增加样式，以凸显当前所选项目。
4. 对二级菜单进行样式定义并实现显示。

Step1：HTML定义导航栏的外框架

导航栏最外层是

标签，里面嵌套

标签，
• 标签表示每一个菜单项。

  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">Services</a>
        <ul>
          <li><a href="#">Web Design</a></li>
          <li><a href="#">Web Development</a></li>
        </ul>
      </li>
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
  

  Step2：使用CSS样式定义导航栏的样式

  对导航栏的样式进行整体布局设计，如下所示：

  nav {
    background-color: #2F4F4F;
    height: 65px;
  }
  ul {
    list-style-type: none;
    margin: 10px 0 0 0;
    padding: 0;
    display: flex;
  }
  li {
    margin: 0 20px;
    position: relative;
  }
  a {
    font-size: 18px;
    color: #fff;
  }
  a:hover {
    color: #FFA500;
  }
  

  解释一下上述CSS样式的作用：

  • background-color：背景颜色
  • height：导航栏高度
  • list-style-type：菜单项的列表风格
  • margin：上部边距与左右边距
  • padding：内部边距（即内部的文本和边框之间的空白）
  • display：flex布局，使导航栏中的项目水平排列
  • position：相对定位
  • font-size：文字大小
  • color：文字颜色

  Step3：对选中的菜单项增加样式

  使用CSS的伪类选择器（:hover）对所选菜单项的链接添加样式，高亮当前项目，如下所示：

  li:hover > a {
    color: #FFA500;
  }
  
  /* 高亮当前页 */
  li.current-menu-item > a {
    color: #FFA500;
  }
  

  注释：

  • :hover: 鼠标悬停时的状态
  • li:hover > a: 鼠标在菜单项上悬停时，文本颜色改变
  • li.current-menu-item > a: 高亮当前页面所在的菜单项，改变显示颜色

  Step4：对二级菜单进行样式定义并实现显示

  取一级菜单项下具有子菜单的菜单项，并用CSS为其子菜单定义样式，如下所示：

  ul.sub-menu {
    position: absolute;
    background-color: #fff;
    box-shadow: 0 5px 5px #888888;
    display: none;
  }
  
  ul.sub-menu li {
    margin: 0;
    width: 120px;
  }
  

  注释：

  • position: absolute: 将二级菜单项定位为绝对位置，即不随滚动条滚动。
  • background-color: 设定二级菜单的背景颜色。
  • box-shadow: 添加阴影
  • display: none;: 设置二级菜单项的列表不可见，在需要的时候再显示它（我们需要使用 js 代码实现）。
  • ul.sub-menu li: 设定二级菜单项的选项的外部边距。

  然后使用 jQuery 代码来实现课程中所述的交互效果：

  $(function() {
    $('li')
      .has('ul')
      .hover(
        function() {
          $('ul', this)
            .stop()
            .slideDown(200);
        },
        function() {
          $('ul', this)
            .stop()
            .slideUp(200);
        }
      );
  });
  

  优化：以上代码会应用于整个网站，因此我们需要做一些修正以使其仅适用于导航栏。为此，我们可以为导航栏添加一个 id 属性(nav-1)，并将这个 id 用作 JavaScript 代码的选择器：

  $(function () {
    $('#nav-1 li')
        .has('ul')
        .hover(
            function () {
                $('ul', this)
                    .stop()
                    .slideDown(200);
            },
            function () {
                $('ul', this)
                    .stop()
                    .slideUp(200);
            }
        );
  });
  

  以上操作完成后，你就可以运行这些代码，将其添加到网站上，并实现所述jQuery效果了。