利用边框实现网页导航栏的动态效果

目录

网页导航栏需要加点儿动态效果,来区别其他元素。图片太费劲,直接用文字效果比较简单。文字上可用的效果不外乎字体大小、颜色,背景颜色,边框效果等。边框指示效果最明显。

Google和jQuery网站有两种不同的加边框方式。
Google页面导航栏如下:

Google导航栏
Google导航栏

边框加在上面,但将标签内的空间分成两个部分,分别显示边框和文字。
[html]



  • 搜索



  • 图片
  • [/html]
    a及两个span有相同的宽度,这样两个span就能上下排列。第一个span只有上边框的高度,height为0。第二个span则是文字信息。
    当前页面,边框用红色标出,border-top-color:#DD4B39!important 。
    非当前页面,边框颜色继承父元素颜色,2px solid transparent 。
    jQuery页面导航栏如下:

    jQuery导航栏
    jQuery导航栏

    直接用标签的下边框。
    [html]

  • Plugins
  • UI
  • [/html]
    CSS
    [css]
    #dock ul li a:hover,
    #dock ul li.selected a {
    color: #fff;
    border-bottom: 2px solid #ff9c08;
    }
    [/css]
    当前页面,a有下边框;但非当前页面,a没有下边框。当在a上悬停时,a在显示出下边框。
    这种方式只能把边框放在下方。因为a元素总体高度有变化(与是否有边框相关),若在不显示边框的页面中,动态给a加边框,会使a中的文字位置下移,但边框在下边就不会改变文字的位置。当然,像google那样处理一下也行。
    我就是这样做的。
    HTML代码
    [html]

  • 首页
  • 发布
  • [/html]
    CSS代码
    [css]
    .nav-panel ol>li a{
    display:block;
    font-size:20px;
    line-height:38px;
    text-align:center;
    width:45px;
    border-top:solid 2px black;
    }
    .nav-panel ol li.selected a,.nav-panel ol li a:hover{
    border-top:solid 2px red;
    }
    .nav-panel ol li a:hover{
    background-color:#333;
    }
    [/css]
    这是最后的效果:

    上述代码的实际效果
    上述代码的实际效果