如何给网站导航添加动态分割线

网络整理 - 07-27

我们来介绍一下如何给自己的导航添加动态分割线,非常实用的教程,我们首先看一下效果:

 ,

是没有中间那小白条的,给人的感觉是界线不够明了清晰。所以后来就给它在中间加了个小白条。由于博客的目录也就是导航要根据增减而相应变化,所以不能采用手动的方式去添加,如果那样就不具备可扩展性啦。

所以我用了几句灰常简单的JQuery代码实现了这个效果:

<script type="text/javascript">
$(document).ready(function(){
    $("<span></span>").insertAfter("#nav li");
});
</script>

这样,在每一个导航栏的li之后就添加了一个<span>,如图:

如何给网站导航添加动态分割线

 。

然后在为<span>添加css样式即可:

#nav span {
background-color: #FFFFFF;
display: block;
float: left;
height: 16px;
margin: 11px 2px 0 0;
width: 2px;
}

当博客目录增加或减少的时候,<span>也会相应增加或减少。