DIV CSS制作的个性水平导航菜单实例

下面是关于“DIV CSS制作的个性水平导航菜单实例”的完整攻略。

一、前期准备

在开始制作水平导航菜单之前，我们需要进行一些准备工作。

1.1 HTML结构

在页面上添加一个无序列表<ul>，在列表中添加若干个列表项<li>，每个列表项包含两个部分：导航链接和导航标签。示例代码如下：

<ul class="nav">
  <li><a href="#">首页</a></li>
  <li><a href="#">产品中心</a></li>
  <li><a href="#">新闻动态</a></li>
  <li><a href="#">关于我们</a></li>
  <li><a href="#">联系我们</a></li>
</ul>

1.2 CSS样式

为了让导航菜单具有个性化的效果，我们需要添加一些CSS样式。

以下是示例样式代码：

.nav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #333;
  overflow: hidden;
  display: inline-block;
}

.nav li {
  float: left;
  border-right: 1px solid #bbb;
}

.nav li:last-child {
  border-right: none;
}

.nav li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  font-weight: bold;
  transition: background-color 0.3s;
}

.nav li a:hover {
  background-color: #111;
}

二、制作导航菜单

在完成前期准备工作之后，我们现在开始制作水平导航菜单。

2.1 设定导航的宽度

我们可以通过为导航菜单添加一个width属性来设定导航菜单的宽度。例如：

.nav {
  width: 100%;
}

这样设置之后，导航菜单的宽度将会占据整个页面的宽度。

2.2 设定导航的高度

为了让导航菜单具有一定的高度，在CSS样式中，我们可以添加一个height属性。例如：

.nav {
  height: 50px;
  line-height: 50px;
}

这样设置之后，导航菜单的高度将会是50px。

2.3 设定导航的背景色

我们可以通过为导航菜单添加一个background-color属性来设定导航菜单的背景色。例如：

.nav {
  background-color: #333;
}

这样设置之后，导航菜单的背景色将会是深灰色。

2.4 设定导航的边框样式

为了让导航菜单更加美观，我们可以为其添加一个边框样式。通过为导航菜单列表项和最后一个列表项设置一个border-right属性，就可以实现这个效果。例如：

.nav li {
  border-right: 1px solid #bbb;
}

.nav li:last-child {
  border-right: none;
}

这样设置之后，导航菜单的每个列表项都将带有一个右边框，而最后一个列表项则没有。

2.5 设定导航链接的字体样式

为了让导航菜单链接文字更加突出，我们可以通过为导航菜单链接设置一些字体样式来实现这个效果。例如：

.nav li a {
  color: white;
  text-align: center;
  font-size: 17px;
  font-weight: bold;
}

这样设置之后，导航菜单链接的字体颜色为白色，字体大小为17px，加粗。

2.6 设定导航链接的底部高亮效果

为了让用户在导航菜单中得知自己所在的位置，我们可以通过设置导航链接在底部添加一个高亮效果来达到这个目的。例如：

.nav li a:hover {
  background-color: #111;
}

这样设置之后，当用户将鼠标悬停在导航链接上时，导航链接底部将会出现一个深色的高亮效果。

通过以上步骤，我们就可以制作出一个简单又个性化的水平导航菜单了。

三、示例说明

3.1 示例1

在这个示例中，我们将制作一个平滑过渡的导航菜单效果。首先，我们需要在CSS样式中添加一个过渡效果属性transition，并将其设为0.3s，表示过渡动画的时间为0.3秒。例如：

.nav li a {
  transition: background-color 0.3s;
}

接着，我们需要为导航链接的悬停状态添加一个背景色。例如：

.nav li a:hover {
  background-color: #111;
  transition: background-color 0.3s;
}

这样设置之后，当用户将鼠标悬停在导航链接上时，导航链接背景色将会平滑过渡到深灰色。

3.2 示例2

在这个示例中，我们将制作一个下划线高亮的导航菜单效果。首先，我们需要为导航链接添加一个下划线效果。例如：

.nav li a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: white;
  visibility: hidden;
  transform: scaleX(0);
  transition: all 0.3s ease-in-out 0s;
}

.nav li a:hover:before {
  visibility: visible;
  transform: scaleX(1);
}

这样设置之后，当用户将鼠标悬停在导航链接上时，导航链接底部将会出现一个白色下划线效果。

通过以上两个示例，我们可以发现，在制作个性水平导航菜单时，灵活采用各种CSS技巧可以使导航菜单效果更加出色。