css利用一张背景图制作导航菜单实现思路及代码
发布时间：2013-03-28 16:43:37 作者：佚名 
我要评论
我要评论利用一张背景图片来实现菜单的悬停状态，没有什么不可思议完全可以办得到，仅这一张图片，我们实现一个横行CSS菜单。并设置它们的悬停效果，感兴趣的朋友可以参考下哈，希望可以帮助到你
今天介绍的这款简单非常简单，利用一张背景图片来实现菜单的悬停状态。我们看下面的图片：
仅这一张图片，我们实现一个横行CSS菜单。并设置它们的悬停效果。我们该如何做呢？看下面的图片：
这是一个示意图。最底层是ul，这是一个容器，我们将列表项li全部置入其中。为了方便说明，示意图中仅画了一个li。实际此例中有六个li，全部向左浮动，实现横行排列。在li上面还有链接a标签。
我们首先整理XHTML代码：
Example Source Code
复制代码
代码如下:<ul id="mini_nav">
<li class="nav1"><a href="http://www.52css.com/" title="财经">财经</a></li>
<li class="nav2"><a href="http://www.52css.com/" title="商业">商业</a></li>
<li class="nav3"><a href="http://www.52css.com/" title="管理">管理</a></li>
<li class="nav4"><a href="http://www.52css.com/" title="领袖">领袖</a></li>
<li class="nav5"><a href="http://www.52css.com/" title="协会">协会</a></li>
<li class="nav6"><a href="http://www.52css.com/" title="博客">博客</a></li>
</ul>
我们着手写CSS前，先结合上面的示意图整理一下思路：
1、首先需要让ul居中，然后让nav成为ul的背景图片。这样就可以简化编码，不必给每一个li或a再定义不同的背景图片及其定位。
2、定义列表项li的宽度与高度，并向左浮动。实现列表项的横向排列，组成一个横向的菜单格局。
3、定义列表项内部的链接a元素为块元素。并给a:hover一个背景图片，但不给他任何定位信息。
4、根据nav1~nav6分别定义a:hover状态下，背景图片的定位。
5、利用padding移除链接a元素的文字。使得在CSS有效时文字不可见，若出现CSS加载失败或其它设备浏览时，链接同样有效。
我们开始着手CSS编写：
Example Source Code
复制代码
代码如下:* {margin:0; padding:0; font-size:12; list-style-type:none; }
#mini_nav {width:390px; height:38px; margin:50px auto; background:url(nav.png) no-repeat 0 0;}
#mini_nav li {width:65px; height:38px; float:left;}
#mini_nav li a {display:block; width:65px; height:38px;}
#mini_nav li a:hover {background:url(nav.png) no-repeat;}
设置总体布局声明，外边距与内边距均为零，文字大小为12px，列表项预调标记为无（去掉列表项前面的小黑点）。
设置ID为mini_nav的UL宽度与高度，上下边距为50px，左右边距为auto，实现水平居中对齐。设计背景图片为nav.png，定位于：0 0。
设置UL中的LI的样式，宽度与高度，向左浮动。
设置LI中链接A元素的样式，首先将A元素转换为块元素，并设置其宽与高。
设置链接A元素的县停样式，定义背景图片nav.png，重复方式为不重复，不给出背景图片的定位信息。
此时我们可以看到的页面效果如下：
但这时候还不能实现任何悬停交互效果，而且链接文字而位于我们的神觉范围内。我们继续编写CSS代码：
Example Source Code
复制代码
代码如下:#mini_nav li.nav1 a:hover {background-position:0 -38px;}
#mini_nav li.nav2 a:hover {background-position:-65px -38px;}
#mini_nav li.nav3 a:hover {background-position:-130px -38px;}
#mini_nav li.nav4 a:hover {background-position:-195px -38px;}
#mini_nav li.nav5 a:hover {background-position:-260px -38px;}
#mini_nav li.nav6 a:hover {background-position:-325px -38px;}
这一段很相类，我们给不同的链接（即nav1~nav6）设置了鼠标悬停时的定位坐标。
我们给前面的LI中链接A元素增加以下代码：
Example Source Code [www.52css.com]
复制代码
代码如下:padding-top:40px; overflow:hidden;
上部的内边距为40px。溢出为隐藏。我们将链接文字增加上部的内边距，从而推到了下面，不可见的地方，为了使这样的方法成功，我们必须设置溢出为隐藏。
相关文章
- 大家都知道，目前有很多浏览器无法实现背景裁切、背景透明度、背景变换和复杂背景定位等效果;那么这篇文章将详细介绍了这几种背景图片的处理方法,需要了解的朋友可以参考下2012-12-24
- IE6下CSS背景图片闪烁的Bug（ie6下的背景图片缓存问题）2011-07-27
链接伪类（:hover）CSS背景图片有闪动BUG的解决方法
IE6下链接伪类（:hover）CSS背景图片有闪动BUG，主要原因ie会再一次请求这张图片，或者说图片没被缓存。2011-04-28网页CSS背景图片使用的测试结果-CSS教程-网页制作-网页教学网
这篇文章主要讲了CSS对背景图片渲染效率的一些经验和研究，在webjx.com中，还有着类似CSS效率的相关文章。 树型结构竖线用样式表（背景图）来实现，样式表背景2008-10-17- 利用一张背景图片来实现菜单的悬停状态，没有什么不可思议完全可以办得到，仅这一张图片，我们实现一个横行CSS菜单。并设置它们的悬停效果，感兴趣的朋友可以参考下哈，希2013-03-28
纯css实现的六边形(蜂窝)导航效果(支持hover/兼容浏览器)
在之前的文章中曾经写到过一篇“三角形变形记之纯css实现的分布导航条效果”，其中用到了边框实现三角形的效果。最近又折腾了一个六边形的蜂窝效果给大家蹂躏。主要用到了2013-02-057款设计巧妙的css3飘带状3D立体效果的导航菜单和表单窗口
接下来向大家推荐7款设计巧妙的CSS3飘带状菜单和窗口，相当不错的效果，很多都具有3D立体效果，看了相信你一定会喜欢的好了不多说，切入主题，希望本文可以帮助到你，提高2013-02-04- 一般情况下导航菜单的背景图片都是比较有规则的，但是平时我们也会遇到很多背景图片形状不规则导航条比如但鼠标移上的时候，背景图片不规则，本例只讨论此种类型2013-01-02
- W3cplus第二版本刚上线时，好多位朋友向我问起站上的分页导航样式是怎么制作;为了报答各位朋友一持对本站的大力支持，今天我特意把这个分页导航的效果当作一个小教程来说。2012-12-24
- 不改变html结构，使导航菜单垂直水平居中这个问题应该如何解决呢？本文将详细介绍，需要了解的朋友可以参考下2012-11-30
最新评论