前端技巧使用CSS制作竖形二级导航菜单的简单步骤

使用CSS制作竖形二级导航菜单的简单步骤

很有网站都有竖形二级导航的效果,比如天猫电脑版首屏就是一个丰富的竖形导航。类似这样的竖形导航一般二级导航默认不显示,当鼠标指向一级导航的栏目时出现二级子栏目导航,通过CSS实现效果并不难,其原理主要是先隐藏二级子栏目,通过设置hover使对应的子栏目显示出来,再使用相对定位将子栏目定位到需要的位置即可,下面我先做个简单的示例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>测试</title>
<style type="text/css">
body {margin:20px;font-size:16px;font-weight:bold;}
</style>
</head>
<body>
<div id="nav">
<ul id="menu">
<li><a href="#">手机</a>
  <div class="sub">
   <ul>
       <li><a href="#">苹果手机</a></li>
       <li><a href="#">小米手机</a></li>
       <li><a href="#">华为手机</a></li>
       <li><a href="#">魅族手机</a></li>
   </ul>
  </div>
</li>
<li><a href="#">平板电脑</a>
  <div class="sub">
   <ul>
       <li><a href="#">iPad</a></li>
       <li><a href="#">小米Pad</a></li>
       <li><a href="#">华为平板</a></li>
   </ul>
  </div>
</li>
<li><a href="#">笔记本电脑</a>
  <div class="sub">
   <ul>
       <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>
  </div>
</li>
<li><a href="#">配件</a>
  <div class="sub">
   <ul>
       <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>
  </div>
</li>
</ul>
</div>
</body>
</html>

这里做了一个典型的二级导航菜单,未定义CSS之前,Chrome浏览器默认的显示效果是这样的:

竖形二级导航.png

接着我做一些简单的定义,让这个无序列表更像一个导航菜单,然后将二级列表先隐藏起来:

#nav ul {
 list-style-type:none;
 margin:0;padding:0;line-height:2.8;
}
#nav li {margin:1px;width:130px;}
#nav a {
 text-decoration:none;
 color:#fff;background:#00386A;
 padding:6px 5px 6px 15px;
 display:inline-block;width:100%;
}
.sub ul {display:none;}

这样设置之后,我们看到的效果只剩下几个一级栏目了,大概是这样的:

竖形二级导航2.png

然后我给子栏目列表的链接设置一个不同的背景颜色,与一级导航的链接加以区分:

#nav .sub a {background:#21B789;}

接下来设置当鼠标指向一级导航列表项的时候,将它对应的子栏目列表显示出来:

#nav li:hover .sub ul {display:block;}

为了美观和交互性,我给链接设置一个醒目的鼠标指向时的背景颜色:

#nav li a:hover {background:#EA7680;}

经过这些设置,当鼠标指向一级栏目的时候,对应的子栏目就会显示在下方,而一般我们需要显示到右方,就要用到定位,我们以子栏目对应的父栏目作为参考物,也就是:

#nav li {position:relative;}

然后给子栏目列表做定位,控制离左边和顶部的距离,使其与一级栏目列表对齐:

.sub ul {position:absolute;left:150px;top:-1px;}

完成定位之后,竖形二级导航基本就完成了,效果如下图:

竖形二级导航4.png

当我们把鼠标移动到子栏目列表项的时候,对应的父栏目没有显现不同的样式,这样没有那种视觉上的“父子栏目从属关系”,而CSS中也没有针对父元素的选择器,不过我们可以巧妙的通过下面的定义,实现当鼠标指向子栏目时,对应父栏目的背景变化:

#menu>li:hover a {background:#21B789;}
#menu>li:hover a:hover {background:#EA7680;}

上面这第一行定义表示当鼠标指向一级栏目列表项的时候,一级栏目链接与子栏目链接的背景相同。第二行定义表示,当鼠标指向二级栏目链接时背景颜色的变化,所以呈现的效果是:

竖形二级导航5.png

接下来给一级栏目链接增加一个向右的小箭头,这个小细节暗示本链接还存在子链接,这里需要用到伪类属性:

#menu>li>a:after {
 content:">";font-family:"Georgia";color:#fff;
 position:absolute;right:2px;top:4px;
}

通过定位的方式,将小箭头靠右对齐,更加美观:

竖形二级导航6.png

到此就基本实现了这个竖形二级导航,我把代码整理如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>测试</title>
<style type="text/css">
body {margin:20px;font-size:16px;font-weight:bold;}
#nav ul {
 list-style-type:none;
 margin:0;padding:0;line-height:2.8;
}
#nav li {margin:1px;width:130px;position:relative;}
#nav a {
 text-decoration: none;color:#fff;background:#00386A;
 padding:6px 5px 6px 15px;display:inline-block;width:100%;
}
.sub ul {display:none;position:absolute;left:150px;top:-1px;}
#nav .sub a {background:#21B789;}
#nav li:hover .sub ul {display:block;}
#nav li a:hover {background:#EA7680;}
#menu>li:hover a {background:#21B789;}
#menu>li:hover a:hover {background:#EA7680;}
#menu>li>a:after {
 content:">";font-family:"Georgia";color:#fff;
 position:absolute;right:2px;top:4px;
}
</style>
</head>
<body>
<div id="nav">
<ul id="menu">
<li><a href="#">手机</a>
  <div class="sub">
   <ul>
       <li><a href="#">苹果手机</a></li>
       <li><a href="#">小米手机</a></li>
       <li><a href="#">华为手机</a></li>
       <li><a href="#">魅族手机</a></li>
   </ul>
  </div>
</li>
<li><a href="#">平板电脑</a>
  <div class="sub">
   <ul>
       <li><a href="#">iPad</a></li>
       <li><a href="#">小米Pad</a></li>
       <li><a href="#">华为平板</a></li>
   </ul>
  </div>
</li>
<li><a href="#">笔记本电脑</a>
  <div class="sub">
   <ul>
       <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>
  </div>
</li>
<li><a href="#">配件</a>
  <div class="sub">
   <ul>
       <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>
  </div>
</li>
</ul>
</div>
</body>
</html>

站长Colin Gao,85后自由职业者,爱钻研,爱学习网页设计。建立本站的目的是整理学习笔记,分享学习经验,认识更多的朋友。感谢您阅读本站的文章,部分内容参考了网上的一些教程,但我会尽量根据自己的理解写更多原创的东西,本站网址如下,欢迎转载:
如果方便的话,转载请注明来自:http://www.cssaaa.com/skill/71.html