css+html实现变幻菜单
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css+html实现变幻菜单相关的知识，希望对你有一定的参考价值。
变幻菜单效果：
当鼠标移动到菜单上相应位置时，该位置的中文变成英文。
主要使用了css来控制样式。
代码如下
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>变幻菜单</title> 5 <meta charset="utf-8"> 6 <style type="text/css"> 7 .top_nav{ 8 font-size:12px; 9 font-weight:bold; 10 list-style-type:none; 11 border-bottom:8px solid red; 12 overflow:auto; 13 } 14 15 .top_nav li{ 16 float:left; 17 margin-right:1px; 18 } 19 20 .top_nav li a{ 21 text-decoration:none; 22 display:block; 23 line-height:20px; 24 width:80px; 25 color:#666; 26 background:#ddd; 27 text-align:center; 28 } 29 30 .top_nav a span{ 31 display:none; 32 } 33 34 .top_nav li a:hover span{ 35 display:block; 36 } 37 38 .top_nav li a:hover{ 39 margin-top:-20px; 40 background:red; 41 color:#fff; 42 43 } 44 45 46 </style> 47 </head> 48 <body> 49 <div> 50 <ul class="top_nav"> 51 <li><a href="#">首页<span>Home</span></a></li> 52 <li><a href="#">前端乱煮<span>Front</span></a></li> 53 <li><a href="#">阳光小厨<span>Kichen</span></a></li> 54 <li><a href="#">光影天地<span>Photo</span></a></li> 55 <li><a href="#">事务大厅<span>Room</span></a></li> 56 </ul> 57 </div> 58 </body> 59 </html>
主要使用的小技巧有：
1 如果将英文和中文分别放在两个链接里会很麻烦，所以这里将所有的英文放在了span标签里面，这样可以统一控制。
2 当鼠标移到相应位置时中文消失，英文显示，则是利用了margin-top属性，让它的值为-20px，恰好等于a标签的行高，这样中文就从当前位置消失，相应的，下方的英文就出现了。
3 当给菜单设置下边框时，会发现边框并未出现在下边，而是偏上很多，这是因为受到了浮动影响，容器并不能完全包裹浮动元素，所以应该在加上overflow：auto;
以上是关于css+html实现变幻菜单的主要内容，如果未能解决你的问题，请参考以下文章