在新浪博客栏目看到其导航条简洁大方又不失动感美观,甚是欣赏,打开源文件又有新发现:大公司就是不一样,从不人云亦云,其导航条结构并没有采用教科书或网页教程众口一词的ul-li-a结构,而是采用毫无技术含量”的文本平铺结构,代码精简直观,与新浪网页风格一样遵循着简单即美的理念,体现出开发人员对css深刻的理解和把握。

   但是新浪博客导航条的特效部分是用js脚本实现的。下面我们尝试用纯html+css来实现它。


第一步,依据新浪的思路我们做一个基本导航条。


代码:

<style type="text/css">

a:link,a:visited{
 float:left;   /* 设置浮动使a成为块元素可设置高宽 */
 width:4em;    /* 菜单项宽度:4个默认字体宽<meta charset="gb2312"> */
 text-decoration:none;
 color:white;
 background-color:#e04e00;
 padding:0.5em 0.6em;  /* 用内边距调节块高度及垂直对齐 */

 border-right:1px solid ;  /* 右边框做间隔线 */

 border-color:#f0700e; /* 间隔线颜色 */
}

a:hover{
 background-color:#f0700e;/*同菜单项间隔线颜色 */

}
</style>
<body>
<div>
 <a href="#">娱乐</a>
 <a href="#">体育赛事</a>
 <a href="#">文史</a>
 <a href="#">尚品堂</a>
</div>
</body>

执行结果:

   上述代码简洁直观且只涉及a元素属性控制,也无须特别技巧甚至连div元素都可有可无。效果媲美采用ul-li-a复杂结构设计的导航条。既然li元素拥有的属性a元素同样拥有,再用li元素来承载a元素来构造菜单,就有多余之嫌。


   以上述代码为基础,以下我们尝试用纯html+css来实现剩余的特效。


   第二步,添加鼠标悬停时菜单项增高特效


   在上面代码a:hover选择器中插入下面代码(蓝色部分),作用是鼠标悬停时菜单项高度增加一点(0.4em),但是高度增加的部分会向下延展,需要将其重新定位。这里采用了相对定位,这样比绝对定位要简单一些,不用考虑与其他元素的互相影响,只要相对于自身原始位置作出上移即可。

a:hover{

 background-color:#f0700e;
 padding:0.7em 0.6em;   /* 增加菜单项高度增加了0.4em */
 position: relative;    
/* 增加的块高度会向下延展,需要将块位置提升 */
 top:-0.4em;            /* 上移0.4em */
}

执行结果:

比较接近了,菜单项右上角还差一个小三角

   重温一下css关于相对定位的描述:元素框相对于自身原始位置偏移某个距离。元素仍然保持其未定位前的类型,它原本所占的空间仍保留。

幸好对菜单项做了相对定位后“它原本所占的空间仍保留”,不然该菜单项原空间会被后面的菜单项填补,我们的导航条也就面目全非啦。


第三步:添加鼠标悬停时菜单项右上角外加小三角“


   注意观察新浪博客导航条,这个小三角在菜单项方框之外,无法用背景图方法实现。实现这个特效的思路是:菜单项中添加一个当鼠标悬停时可以进行重新定位的小三角,通过重新定位将小三角移出菜单项方框遵循这一思路,我们继续特效设计。

   1、用css制作小三角

   原理:css可以独立控制块元素的4个边框,如果块元素的边框宽度相对于内容域足够大,边框的外在属性就会就会充分表现。

   我们需要的小三角可以这样得到:内容区的高宽为缩小到0,4个边框宽度为小三角边长的一半,左下边框颜色为深红,上右边框颜色为透明,这样一个矩形看起来“像”小三角。绝大多数元素都可以用于制作小三角,以下用div元素制作小三角。


   2、小三角div包含于菜单项中,使小三角能够与菜单项联动。


   将小三角div插入到链接中(见蓝色代码),a元素必须包含div,作用有二:鼠标在菜单项悬停时能连带触发小三角div的选择器;a元素作为小三角div的定位基准。

<div>
 <a href="#">娱乐
<div></div></a>
 <a href="#">体育赛事<div></div></a>
 <a href="#">文史<div>/div></a>
 <a href="#">尚品堂<div></div></a>
</div>


   3、当鼠标悬停时对小三角div重定位。


   以目前使用的css版本,鼠标在菜单项悬停时只能触发a:hover选择器,但a:hover选择器只能控制a元素属性,而不能控制小三角div的属性,如果鼠标在菜单项悬停时还可以触发另外一个控制小三角的选择器,那么解决问题的大门便敞开了。

   有没有与a:hover选择器同时被触发选择器?有!这就是a:hover的后代选择器,如a:hover div(前提是在html中a包含了div)。现在用它生成并定位小三角,其css代码段是:

a:hover div{
 /****** 开始生成小三角*****/
 width:0px;  /*内容区高度宽度为0**/
 height:0px;
 border-style: solid;
 border-width: 0.2em;  /*每边框宽度0.2em,则矩形边长0.4em,正好是鼠标悬停时菜单项增加的高度*/
 border-color:transparent transparent #d00 #d00; /*上右边框透明,左下边框为深红色,形成小三角*/
 /****** 开始定位,小三角以鼠标悬停时的菜单项为基准绝对定位 *****/
 position:absolute;  
 top:0;  right:-0.4em; /* 小三角关于菜单项方框右上角定位 */
}

   这里的小三角用了绝对定位,这样无论菜单项大小位置如何变化,小三角始终定位在菜单项a的右上角,适应性广。

   另外不要忘了,菜单项a已被定位(鼠标悬停时上移了0.4em)并且小三角被包含在菜单项a中,所以小三角可以以菜单项a作绝对定位。这一点非常重要,重温一下css关于绝对定位的描述:元素框相对于相对于包含它的最近的已定位祖先元素偏移某个距离。元素原先在正常文档流中所占的空间会关闭,就好像该元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。


好了,运行一下

成功了。没有图片,没有JS,没有特别技巧。我们用纯html+css,充分运用控制html元素属性,用最少的元素,最简洁的代码实现了新浪特色的导航条。