折腾header完毕

2013-07-07 | 41 条评论分类:折腾标签: #header #wordpress #折腾

俺是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 条评论

评论标识：乍见>=1，时晤>=4，同契>=12

傅小黑同契 · 22°

2013‑07‑07 21:21

木有太大惊喜
1. Xinsenz W 作者
  
  2013‑07‑07 22:48
  
  我就这点水平，额……
麦田一根葱时晤 · 8°

2013‑07‑08 09:58

这个特效很好看啊
敖天羽乍见 · 1°

2013‑07‑08 20:39

我觉得很好高端洋气啊
kn007 同契 · 59°

2013‑07‑08 20:41

感觉一般。。。
1. Xinsenz W 作者
  
  2013‑07‑09 12:18
  
  俺是菜鸟，和大神不能比啊~
灵尘子同契 · 108°

2013‑07‑09 11:50

又折腾啊。
1. Xinsenz W 作者
  
  2013‑07‑09 12:18
  
  无折腾不幸福~
灵尘子同契 · 108°

2013‑07‑09 11:51

怎么发评论不能添加网址了
1. Xinsenz W 作者
  
  2013‑07‑09 12:17
  
  多说耍流氓了，他这是要游客注册多说，懂？
  1. 灵尘子同契 · 108°
    
    2013‑07‑09 18:04
    
    那你可以不用多说吧，注册个毛哦。
    1. Xinsenz W 作者
      
      2013‑07‑09 19:16
      
      关键是自身评论被我改成渣了~~~丑爆了~
    2. Xinsenz W 作者
      
      2013‑07‑09 19:32
      
      设置的问题，现在搞定了，额
你好先森同契 · 15°

2013‑07‑09 17:11

我来放点毒把。。。可以增强文字特效的魔法棒：textillate.js ，不知道能否吊起lz的味口
1. Xinsenz W 作者
  
  2013‑07‑09 19:17
  
  看了下，貌似现在不感冒…
予沐乍见 · 1°

2013‑07‑09 21:54

我写了这么久的主题，只用过hover这一个伪元素…
什么值得买乍见 · 1°

2013‑07‑09 22:48

看看，学习下
大发时晤 · 9°

2013‑07‑10 10:44

好奇怪的赶脚
1. Xinsenz W 作者
  
  2013‑07‑10 21:52
  
  啥？
  1. 大发时晤 · 9°
    
    2013‑07‑11 10:51
    
    header啊,ff很别扭
    1. Xinsenz W 作者
      
      2013‑07‑12 21:40
      
      现在就是搜索按钮位置有问题……其他感觉还好呀~
Archer 同契 · 19°

2013‑07‑11 18:40

Xinsenz折腾起来了啊，这个CSS3的效果还是不错的~
洋乍见 · 1°

2013‑07‑13 14:10

支持支持
鬼娃娃同契 · 62°

2013‑07‑15 12:47

我不折腾了
1. 海蓝时晤 · 10°
  
  2013‑07‑17 12:43
  
  我就没折腾过因为不会
软件小品乍见 · 3°

2013‑07‑15 17:31

恭喜恭喜，折腾的不错
那时年少时晤 · 11°

2013‑07‑16 11:36

感觉还好，哈哈
海蓝时晤 · 10°

2013‑07‑17 11:41

弄得挺好看的呀看着也舒服表扬一下
Sam 同契 · 25°

2013‑07‑25 08:51

折腾帝啊。。。。。
1. Xinsenz W 作者
  
  2013‑07‑25 21:16
  
  其实，比起你还有大发，没你们折腾~哈
  1. Sam 同契 · 25°
    
    2013‑08‑03 08:52
    
    唉~往事不要再提~~~都是空~~~
wymanchan 乍见 · 2°

2013‑08‑05 13:28

真会折腾啊= =
YangBigKing 乍见 · 3°

2013‑08‑05 23:10

我也是整天自己乱搞CSS 因为是文科生完全不懂都是摸着石头过河
1. Xinsenz W 作者
  
  2013‑08‑06 12:02
  
  摸着摸着就有经验了……
  1. YangBigKing 乍见 · 3°
    
    2013‑08‑06 18:02
    
    是啊是啊真是没有必要刻意去学但是就是会了
从良未遂同契 · 136°

2013‑08‑08 21:01

我明天也去试试效果
Luckerme 乍见 · 2°

2013‑08‑12 00:38

支持一下，主题修改的很不错。很漂亮
1. Xinsenz W 作者
  
  2013‑08‑12 18:38
  
  谢谢
知了时晤 · 4°

2013‑08‑16 11:53

很难相信你是大菜鸟
1. Xinsenz W 作者
  
  2013‑08‑16 20:26
  
  是啊，我是菜鸟！都是尝试出来的。。。
  1. 知了时晤 · 4°
    
    2013‑08‑16 20:54
    
    其实我也是菜鸟

评论已关闭。

折腾header完毕

相关文章

41 条评论