折腾header完毕


俺是wordpress的大菜鸟,一切修改都是在摸石头过河之后形成的,而且参考了许多老鸟的方法。特别是在DIV布局方面一直不开窍,面对布局困难的方法,我常常用最简单最实用的方法来解决,那就是——表格!囧!

之前的header部分真是越看越丑,而且logo和菜单栏都不是居中对齐,灰常难看,于是也有博友提出了抗议!于是昨日,拿出折腾的勇气坚决要把header改一下。俺不会DIV+CSS啊,所以此次俺无一例外的又用上了表格,- -!还好吧,最终效果还看得过去。先就勉强用一段时间了。今天在牧风那看到了针对菜单栏hover的动态效果,觉得很赞,于是拿来用上。

显示效果如右→→→→→→→CSS3导航栏悬浮动画
实现方法,给菜单栏添加CSS效果:

#menu ul li a {
    display: block;
    border-bottom: 0;
    color: #6a6a6a;
    line-height: 40px;
    text-transform: uppercase;
    text-decoration: none;
    position: relative;
    height: 41px;
    margin-bottom: -1px;
}
#menu ul li a:after,
#menu ul li a:before {
    position: absolute;
    width: 0;
    height: 1px;
    left: 50%;
    bottom: 0;
    border-bottom: 1px solid #6a6a6a;
    content: "";
    z-index: 999;
        -webkit-transition: width .3s, left .3s;
        -moz-transition: width .3s, left .3s;
        transition: width .3s, left .3s;
}
#menu ul li a:hover:before {
    left: 0;
    width: 60%;
}
#menu ul li a:hover:after {
    width: 50%;
}

这个效果在在IE10、chrome和firefox上都能正常显示,由于浏览器版本的原因,可能会出现不支持的现象,那么只需在你header部分给菜单栏手动添加属性ID,

<a id="hover-animate">你的菜单栏对应的属性名称<span class="hover-animate-left"></span><span class="hover-animate-right"></span></a>

然后再加CSS效果

#hover-animate {
    color:#21759b!important;
    cursor:pointer;
    margin-left:20px;
    display:inline-block;
    border-bottom:0;
    color:#6a6a6a;
    text-transform:uppercase;
    text-decoration:none;
    position:relative;
    text-decoration:none;
}
.hover-animate-left,.hover-animate-right {
    position:absolute;
    width:0;
    height:1px;
    left:50%;
    bottom:0;
    border-bottom:1px solid #6a6a6a;
    content:"";
    z-index:999;
    -webkit-transition:width .3s,left .3s;
    -moz-transition:width .3s,left .3s;
    transition:width .3s,left .3s;
}
#hover-animate:hover .hover-animate-left {
    left:0;
    width:60%;
}
#hover-animate:hover .hover-animate-right {
    width:50%;
}

共有 41 条评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注