2款精致的web2.0导航菜单分享

当前位置：首页 > 网页设计 > 2款精致的web2.0导航菜单分享

Mar29th

桶哥网页设计 11 人阅读了此文我来说两句！

今天整理了两款导航菜单，都是仿制的，素材来源自网络，低一度做了代码优化与验证，效果可以说非常漂亮、精致。一款是仿猪八戒首页的MENU效果，一款是仿美橙互联。演示图片见下图！这两款菜单，低一度会想办法整合进下次制作的主题中，希望届时大家会喜欢。

2款精致的web2.0导航菜单分享

NO.1_仿猪八戒首页导航菜单

2款精致的web2.0导航菜单分享

NO.2_仿美橙互联导航菜单

再来个演示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta name="keywords" content="JS代码,菜单导航,JS广告代码,JS特效代码" /> <meta name="description" content="此代码内容为仿2010猪八戒首页导航菜单，来源低一度博客。" /> <title>仿2010猪八戒首页导航菜单 - 低一度</title> <style type="text/css">  </style> </head> <body style="text-align:center"> <div style="height:100px;"></div> <div style="clear:both"></div>  <div class="menu_navcc"> <div class="menu_nav clearfix"> <ul class="nav_content"> <li class="current"><a href="#" title="首页"><span>首页</span></a></li> <li><a href="#" title="我的作品"><span>我的作品</span></a></li> <li><a href="#" title="设计在线"><span>设计在线</span></a></li> <li style="position:relative;"><a href="#" title="免费资源"><span>免费资源</span></a><em></em></li> <li><a href="#" title="电脑网络"><span>电脑网络</span></a></li> <li><a href="#" title="博客相关"><span>博客相关</span></a></li> </ul> <div class="menu_nav_right"> </div> </div> </div>  <p></p> <p>整理：<a href="http://www.diyidu.cn/" target="_blank">diyidu</a> 来源：<a href="#" target="_blank">猪八戒</a> 发布：<a href="http://www.diyidu.cn" target="_blank">低一度博客</a>　</p> <p>＊尊重他人劳动成果，转载请自觉注明出处！注：此代码仅供学习交流，请勿用于商业用途。</p> <p></p> <p></p> <p></p> </body> </html>
提示：您可以先修改部分代码再运行

下载该资源：点这儿

本文出自：低一度，地址：http://www.diyidu.cn/post/menu_codedl.html，转载须注明！

« 掌上百度2010 Beta2升级版下载记住：千万别对生活瞎扯淡 »

或许您会对下列文章感兴趣：

to "2款精致的web2.0导航菜单分享" 引用该日志！

#1 liuzm 回复该留言 2010-3-29 11:23:41

兄弟，能把这个导航站做完分享吗？
我现在想做个导航站，觉得你这站很漂亮。
diyidu 于 2010-3-29 11:26:58 回复
你是说我的那个博客秀吗？已经分享了。
#2 周哥回复该留言 2010-3-29 11:30:10

先占坑。。
周哥于 2010-3-29 11:31:19 回复
楼上的太快了，没办法哇。什么时候桶哥弄到模板中来嘛。上次说Tab切换的，到现在还没发现应用到位呢。哎，顶了。
diyidu 于 2010-3-29 11:32:03 回复
这么着急把自己埋进去啊？就不能多赞扬两句。
#3 丢失的蓝色回复该留言 2010-3-29 11:32:28

哈哈，桶哥出的东西就是好！
顶你。。
diyidu 于 2010-3-29 11:36:03 回复
多谢：）
#4 liuzm 回复该留言 2010-3-29 11:33:21

不是那个哦，是你这个导航啊。
我觉得你这个导航的很漂亮哦。但是不完整，能否做全？
diyidu 于 2010-3-29 11:37:37 回复
不完整是啥意思？Q聊。
#5 liuzm 回复该留言 2010-3-29 11:48:37

非常感谢一度兄的帮助！感动ing。
diyidu 于 2010-3-29 12:02:40 回复
先别谢，哥看了一头雾水呢，死链太多。
#6 刘学政博客回复该留言 2010-3-29 13:25:21

你的设计真是一流啊。
diyidu 于 2010-3-29 14:02:37 回复
其实严格点讲，这不是我的原创。
不死鸟于 2010-3-30 11:00:49 回复
但仿得也相当了得。
#7 痕迹回复该留言 2010-3-29 13:36:44

其实我连WEB2.0的大体含义都不是很明白，你的制作主题教程我等了很久啦。
diyidu 于 2010-3-29 14:03:46 回复
这是一个非常宽泛无所不包的词啊，概括来说就是互联网第二代。
痕迹于 2010-3-31 0:13:44 回复
你的教程什么时候出来。。
#8 karm 回复该留言 2010-3-30 13:57:53

东西虽小，但精致漂亮哦。
diyidu 于 2010-3-30 14:47:13 回复
呵呵，是感觉还行：）
#9 酷玩装备回复该留言 2010-3-30 16:11:11

不错的导航条。。
diyidu 于 2010-3-30 17:24:57 回复
谢谢。欢迎使用。
#10 拉登回复该留言 2010-4-2 14:52:22

这个要顶！博主辛苦了。
diyidu 于 2010-4-2 14:53:54 回复
呵呵，喜欢就好：）
#11 GPS地图网回复该留言 2010-4-2 19:31:05

这个我可能要用到我网站上了。
diyidu 于 2010-4-3 20:18:35 回复
用吧，用你那个站挺合适的。

低一度