低一度

顶部横幅

CSS实现中英文双语导航效果

2010-7-21 - diyidu - css应用 - Views

今天再和大家分享一个CSS实例——纯CSS实现的中英文双语导航菜单效果。这个效果可以比较轻松地应用到各大博客主题的制作当中，如ZB、WP、PJ等等……相信略微懂得HTML+CSS的同学，都知道怎么搞。这里，我先将完整代码罗列给大家——

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="Keywords" content="menu,中英文双语导航菜单" />
<meta http-equiv="Description" content="CSS实现中英文双语导航效果" />
<meta name="author" content="diyidu" />
<title>CSS实现中英文双语导航效果</title>
<style type="text/css">
a{
  color: #FFFF99;
  text-decoration: none;
}
a:hover{
  color: #FFFFFF;
  text-decoration: underline;
}
#nav{
  padding: 10px 10px 0;
  font-size: 12px;
  font-weight: bold;
  margin: 1em 0 0;
  list-style:none;
}
#nav li{
  float: left;
  margin-right: 10px;
}
.diyidu{
  position: relative;
  z-index: 0;
}
.diyidu:hover{
  z-index: 99;
}
.diyidu:hover span{
  visibility: visible;
  top: 0;
  left: 0;
  cursor: pointer;
}
.diyidu span{
  position: absolute;
  left: -999em;
  visibility: hidden;
}
#nav li a,.diyidu:hover span{
  line-height: 20px;
  text-decoration: none;
  background: #DDDDDD;
  color: #666666;
  display: block;
  width: 80px;
  text-align: center;
  margin: -0.3em 0 0;
}
#nav li a:hover,.diyidu:hover span{
  color: #FFFFFF;
  background: #8FBF00;
}
.diyidu:hover span{
  padding-top: 2px;
}
#navbar{
  background: #8FBF00;
  height: 8px;
  overflow: hidden;
  clear: both;
}
</style>
</head>
<body>
<div id="top">
<ul id="nav">
    <li><a class="diyidu" href="#">Home<span>首页</span></a></li>
    <li><a class="diyidu" href="#">About me<span>关于我</span></a></li>
    <li><a class="diyidu" href="#">Tagcloud<span>标签云集</span></a></li>
    <li><a class="diyidu" href="#">Search<span>搜索</span></a></li>
 <li><a class="diyidu" href="#">Guestbook<span>留言本</span></a></li>
    <li><a class="diyidu" href="#">Admin<span>后台管理</span></a></li>
  </ul>
  <div id="navbar"></div>
</div>
</body>
</html>

    再看效果演示！单击“运行代码”按钮可查看——


提示：您可以先修改部分代码再运行

关键词 // css css应用 css实例
出处：低一度，链接：http://www.diyidu.cn/post/css_menu_code.html

上一篇：快盘10G免费网盘空间等你拿 下一篇：7.12~7.16香港夏令营图片秀

随机推荐

to "CSS实现中英文双语导航效果"

  • 任鸟飞
    #1 任鸟飞 回复该留言 2010-7-21 11:51:16
    这效果比较帅，不过我估计不能在IE6下运行。
    diyidu 于 2010-7-21 12:13:59 回复
    呵，我刚刚特意测试了下，可以的。
    爱好者博客 于 2010-7-21 19:02:57 回复
    不会吧，你不安装ＩＥ６？同学你真的ＯＵＴ啦，哈哈。
    爱好者博客 于 2010-7-21 19:03:48 回复
    哥用ＩＥ６都多年了。
    极乐鸟 于 2010-7-31 7:51:00 回复
    能在ie6下运行的。我刚测试过了的。
  • myway
    #3 myway 回复该留言 2010-7-21 13:04:44
    支持下。不过暂时用不到哈。
    低一度，那我，点一下，哈哈，GG。
    diyidu 于 2010-7-21 18:12:29 回复
    多谢支持。
  • 痕迹
    #4 痕迹 回复该留言 2010-7-21 14:50:16
    这个功能貌似作用不大。
    diyidu 于 2010-7-21 18:12:56 回复
    属于小技巧吧。呵呵。
  • 刘志猛
    #5 刘志猛 回复该留言 2010-7-21 15:06:22
    呵呵，这个好像用得少哦，哈哈，不过方法学习了。
    diyidu 于 2010-7-21 18:13:38 回复
    其实这个效果可能对一些企业站比较实用。
  • 电脑人生
    #6 电脑人生 回复该留言 2010-7-21 15:36:20
    真不错，非常感谢。
    diyidu 于 2010-7-21 18:14:12 回复
    感谢就免了啦，多批评。
  • 疯子
    #7 疯子 回复该留言 2010-7-21 15:52:27
    看起来还是非常的棒了呀！
    diyidu 于 2010-7-21 18:14:38 回复
    呵呵，你又唯心了。
  • 老实人博客
    #8 老实人博客 回复该留言 2010-7-21 16:11:17
    这个功能很有意思。玩起来很炫。不过目前我还用不到。再次关心一下：速度会受到影响吗？
    diyidu 于 2010-7-21 18:15:11 回复
    这个绝对不会影响速度啦。
  • 老实人博客
    #9 老实人博客 回复该留言 2010-7-21 16:11:59
    虚拟主机真郁闷，随便一点问题，或者代码多一点，错一个，都让人头疼。
    diyidu 于 2010-7-21 18:16:02 回复
    是这样啊，不过不是主机的原因，是代码规则的严密性所致。
  • 星星之火
    #10 星星之火 回复该留言 2010-7-21 16:56:12
    不怎么实用，不是很喜欢这种的。
    diyidu 于 2010-7-21 18:16:32 回复
    恩，希望下次写个你喜欢的：）
  • 爱好者博客
    #11 爱好者博客 回复该留言 2010-7-21 19:00:11
    哈哈，今天空了过来转下，还以为是第一了呢。
    爱好者博客 于 2010-7-21 19:01:59 回复
    这个不错，很漂亮，什么时候才能运用到模板中来哇，期待下。
    diyidu 于 2010-8-7 12:50:30 回复
    随时可以啊。
  • 可乐
    #12 可乐 回复该留言 2010-7-21 19:42:31
    收藏了，以后可以直接用啊。
    diyidu 于 2010-8-7 12:52:49 回复
    恩，是的。稍作下修改。
  • 思齐博客
    #13 思齐博客 回复该留言 2010-7-21 21:34:05
    还是喜欢页面越简单越好。
    diyidu 于 2010-8-7 12:53:32 回复
    这个就很简单啊，纯CSS控制。
  • 7cbt
    #14 7cbt 回复该留言 2010-7-21 22:31:37
    再想办法把GOOGLE页面翻译弄进来，就可以拥有一个双语种的博客啦！
    diyidu 于 2010-8-7 12:54:17 回复
    呵呵，那个也不难弄啊。
  • 刘晓林
    #15 刘晓林 回复该留言 2010-7-21 23:53:36
    这个效果是很不错的，就是弄起来麻烦哦。
    diyidu 于 2010-8-7 12:55:36 回复
    不麻烦的，很简单。
  • 石头
    #16 石头 回复该留言 2010-7-22 8:13:00
    这个原理可以用于实现许多JS实现的功能。比如下拉菜单。
    diyidu 于 2010-8-7 12:56:30 回复
    对的，还有就是二级菜单：）
  • 草儿
    #17 草儿 回复该留言 2010-7-22 10:53:38
    这效果很帅哦~
    diyidu 于 2010-8-7 12:56:57 回复
    呵呵，还好吧，谢谢鼓励。
  • Ken
    #18 Ken 回复该留言 2010-7-22 15:20:33
    效果很炫哦。
    diyidu 于 2010-8-7 12:57:19 回复
    谢谢鼓励。
  • oogps
    #19 oogps 回复该留言 2010-7-22 16:42:46
    margin: -0.3em 0 0; 这句可以不要？
    diyidu 于 2010-7-22 16:56:00 回复
    可以不要，但留着这句，效果更好。你前后执行下代码就知道了。主要是:hover的区别。
  • winw
    #21 winw 回复该留言 2010-7-22 17:51:40
    恩，这个有用，收之。
    diyidu 于 2010-8-7 12:58:16 回复
    用上了别忘了来秀一下。
  • 上海家具
    #22 上海家具 回复该留言 2010-7-22 18:44:53
    岁月无声，雁过留痕，人过留名。
    diyidu 于 2010-8-7 12:58:58 回复
    欢迎，虽然你是来打广告的。希望下次不是！
  • 白雪山
    #23 白雪山 回复该留言 2010-7-22 22:34:02
    效果看起来要比我现在用的好，可是我现在已经懒得折腾皮肤了。现在用的还是2008年改的。
    diyidu 于 2010-8-7 12:59:36 回复
    呵呵，自己看着顺眼就好。
  • 风也飘泊
    #24 风也飘泊 回复该留言 2010-7-23 11:51:21
    低一度很有想法嘛，这个方法很简单，又实用，不用写JS。
    diyidu 于 2010-8-7 13:00:05 回复
    呵呵，之前的一个小构思。
  • viv
    #25 viv 回复该留言 2010-7-23 13:24:04
    很不错的效果哦！
    diyidu 于 2010-8-7 13:00:33 回复
    谢谢鼓励，多提意见。
  • 好米店
    #26 好米店 回复该留言 2010-8-4 15:32:21
    很不错，学习了！
    diyidu 于 2010-8-7 13:00:57 回复
    你真是来学习的吗？
  • 流年
    #27 流年 回复该留言 2010-8-8 10:59:27
    原来是通过隐藏、显示、移位来实现的啊。
    diyidu 于 2010-8-8 11:17:52 回复
    恩，是的。

Add comment

验证码