折腾header完毕

| 折腾 | 18,501 views | 41 replies


俺是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，
你的菜单栏对应的属性名称
然后再加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 条评论

  7. 我来放点毒把 。。。可以增强文字特效的魔法棒：textillate.js ，不知道能否吊起lz的味口