夏日博客

A-A+

分享一个非常美观的导航菜单

2014年06月10日 前端设计 评论 51 条 阅读 494 views 次

在网页美工制作中，制作导航是常有的事情，下面分享一个非常美观简洁的一个导航菜单，可以直接应用到网站中，这种导航菜单是常用的，仅利用了css的样式就实现了，源码一看就懂，如果想要改变导航样式，只需要修改 images/ 下的导航图片就可以了，快试试吧。

源码效果图：

源码文件：
<!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" xml:lang="en" lang="en">

<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<meta name="author" content="memory" />

<title>无标题 1</title>
</head>

<style type="text/css">
ul#menunav,ul#menunav li{padding: 0px;margin: 0px; list-style: none;}
ul#menunav{width:980px; height:45px; background:url(./images/index_16.jpg) left 8px no-repeat;padding-left:6px;overflow:hidden;}
ul#menunav li{float: left; color:#ffffff; line-height:51px; display:inline-block; font-size:12px;background: url(./images/index_18.jpg) left 8px repeat-x; height:45px; overflow:hidden;}
ul#menunav li.right{background:url(./images/index_21.jpg) left 8px no-repeat; width:6px;float:left;overflow:hidden;}
ul#menunav li a{color:#ffffff; text-decoration: none; width:92px; display:inline-block; text-align:center; font-size:13px; font-weight: bold;}
ul#menunav li a.hit,ul#menunav li a:hover{background:url(./images/index_12.jpg) no-repeat; color: maroon;}
</style>

<body>

<ul id="menunav">
<li class="left"></li>
<li><a href="#" class="hit">佳音首页</a>|</li>
<li><a href="#">我的佳音</a>|</li>
<li><a href="#">相亲1+1</a>|</li>
<li><a href="#">交友活动</a>|</li>
<li><a href="#">在线聊天</a>|</li>
<li><a href="#">情感博客</a>|</li>
<li><a href="#">缘分交友</a>|</li>
<li><a href="#">投票抽奖</a>|</li>
<li><a href="#">会员俱乐部</a>|</li>
<li><a href="#">佳音娱乐</a></li>
<li class="right"></li>
</ul>

</body>
</html>

相关图片下载。。。

标签：

51 条留言  访客：51 条  博主：0 条

  1. 百家网络博客 2014年10月11日 下午 2:56  -199楼  回复

    主要是css样式好看

  2. 噶里味美食网 2014年07月25日 下午 4:49  -198楼  回复

    这个图片的颜色多些就好了。。。

  3. 厦门品讯 2014年07月18日 上午 11:00  -197楼  回复

    0.0 不能复制 难道 叫人一个一个 的 敲吗

  4. 009博客 2014年07月15日 下午 5:47  -196楼  回复

    适合女性站点，顺藤摸瓜又摸过来了

  5. 51onb分享网 2014年06月16日 下午 1:42  -195楼  回复

    看起来不错，不过用在女性站点上比较好！

    • smiling 2014年06月18日 下午 1:15  地下1层  回复

      确实比较适合女性站点.

  6. 明修网络博客 2014年06月13日 下午 9:44  -194楼  回复

    颜色很适合女生用，不过女生做博客的实在是少

    • smiling 2014年06月18日 下午 1:15  地下1层  回复

      还真是的,我也发现了,女生做博客得太少了.

  7. 齐车逸博客 2014年06月12日 下午 2:58  -193楼  回复

    不错这个我喜欢，希望你也希望我的博客

  8. 宋小北 2014年06月11日 下午 4:55  -192楼  回复

    很不错的，自己修改下会好很多

    • smiling 2014年06月18日 下午 1:16  地下1层  回复

      可以修改成自己喜欢的导航菜单样式.

  9. 马斯 2014年06月11日 下午 3:39  -191楼  回复

    博主喜欢这种类型的，可以试试html5.

    • smiling 2014年06月18日 下午 1:16  地下1层  回复

      html5基本上没用过.

  10. 东菱面包机 2014年06月11日 下午 3:33  -190楼  回复

    非常好看的导航，不知道能用上不，谢谢分享！

  11. jamie 2014年06月11日 下午 2:19  -189楼  回复

    很多文章，有空就来逛逛

  12. 余哥 2014年06月11日 上午 10:45  -188楼  回复

    这个是微言微语的主题

  13. 维诺seo团队 2014年06月11日 上午 8:22  -187楼  回复

    确实很漂亮，欢迎回访

  14. APP雄起 2014年06月11日 上午 1:35  -186楼  回复

    很漂亮的，适合女性类

  15. 李明 2014年06月11日 上午 12:17  -185楼  回复

    很好看,既简单又实用。

  16. 破折君 2014年06月10日 下午 11:24  -184楼  回复

    只为女性站设计？哈哈

  17. 个人博客leiboy.com 2014年06月10日 下午 10:25  -183楼  回复

    挺好看的，适合女性站

  18. wingsBlog 2014年06月10日 下午 9:54  -182楼  回复

    女性网站专用

  19. 张戈博客 2014年06月10日 下午 8:45  -181楼  回复

    挺漂亮的，女性购物，女性博客都不错哈~哈哈

  20. PHP二次开发 2014年06月10日 下午 8:30  -180楼  回复

    还不错。

  21. 南京珠江路 2014年06月10日 下午 8:28  -179楼  回复

    我想说，这个图片预览的功能蛮好的。

    • smiling 2014年06月18日 下午 1:17  地下1层  回复

      图片预览是是安装的插件.

  22. 凌吉林 2014年06月10日 下午 8:23  -178楼  回复

    博主，顺便给你点了一下左右浮窗广告。

  23. 凌吉林 2014年06月10日 下午 8:22  -177楼  回复

    导航看起来很漂亮的样子。女孩子的网站可以偿试一下，

  24. 微历史 2014年06月10日 下午 7:52  -176楼  回复

    为啥不搞个演示地址？

    • smiling 2014年06月11日 上午 9:51  地下1层  回复

      有张预览效果图就可以了吧.

  25. 东 2014年06月10日 下午 7:38  -175楼  回复

    这个导航栏看起来确实不错。

  26. 梦想家 2014年06月10日 下午 6:49  -174楼  回复

    配色到可以改，只是这个不支持下拉菜单吧~

    • smiling 2014年06月11日 上午 9:51  地下1层  回复

      不支持下拉菜单.

  27. 茶叶品牌 2014年06月10日 下午 5:47  -173楼  回复

    写的好漂亮呢？很喜欢。

  28. 半块糖 2014年06月10日 下午 4:35  -172楼  回复

    这个导航条适合偏女性化的网站了~

    • smiling 2014年06月11日 上午 9:51  地下1层  回复

      现有的样式有点偏向女性化.

  29. jQuery学习网 2014年06月10日 下午 4:06  -171楼  回复

    写的再好，布局也要美化下滴。我的上边留的网址不给显示了，死链接太多了，一年内博客关闭的非常多。

  30. 笑眯眯贴 2014年06月10日 下午 3:50  -170楼  回复

    加了完全的失标代码了

  31. 郭爱兵 2014年06月10日 下午 3:37  -169楼  回复

    这个不是吧….这个哪里算美观了…像那种美肤产品网站的导航

    • smiling 2014年06月11日 上午 9:50  地下1层  回复

      其实有了这种样式,可以按照自己的想法diy.

  32. 微信营销博客 2014年06月10日 下午 3:11  -168楼  回复

    博主写得很好，真不错。

  33. 彩财通 2014年06月10日 下午 2:59  -167楼  回复

    牛人那

  34. 1.95刺影 2014年06月10日 下午 2:57  -166楼  回复

    写得还可以拉

  35. osblog 2014年06月10日 下午 2:56  -165楼  回复

    挺简单的，就是颜色有点那啥哇

  36. 旅行者 2014年06月10日 下午 2:31  -164楼  回复

    先收藏再说

  37. 情趣乐 2014年06月10日 下午 2:17  -163楼  回复

    写的蛮不错的

  38. maillot saxo bank 2014年06月10日 上午 10:57  -162楼  回复

    颜色换一换就更好啦

    • smiling 2014年06月11日 上午 9:49  地下1层  回复

      图片样式可以自己修改.

  39. 叶德华的博客 2014年06月10日 上午 10:55  -161楼  回复

    内容怎么不允许复制啊！

    • 免费赚钱中心 2014年06月10日 下午 5:55  地下1层  回复

      确实，博主限制右键复制了，如果真有人想用这个导航，也太不方便了

      • smiling 2014年06月11日 上午 9:49  地下2层  回复

        嗯，会取消掉的.

给我留言