无序列表实践：自适应宽度的导航菜单制作
发布时间：2010年4月21日 文章分类：xhtml+css 文章作者：Hitomi 浏览次数：次
今天学习用无序列表ul和列表元素li制作漂亮的导航菜单
对无序列表ul还不是很熟悉的同学请看：无序列表实践：制作网易奥运专题视频右侧新闻列表
首先我们看一下效果图：
本例子演示地址：http://www.sseoo.com/mygame/menu/
图中“网页补习班”是鼠标经过时链接的样子
效果和演示都看完了，我们来分析一下这个导航的原理
首先三步骤我们要将<body></body>中的xhtml部分写好
第一步：首先要有5个文字链接
- <a href="http://www.sseoo.com/">首页</a>
- <a href="http://www.sseoo.com/bbs/">网页补习班</a>
- <a href="http://www.sseoo.com/mygame/fly/">小游戏</a>
- <a href="http://www.qudou8.com/">祛痘吧</a>
- <a href="http://www.laicaiba.cn/">来猜吧</a>
第二步：这五个文字链接要在无序列表ul和列表元素li中
- <ul>
- <li><a href="http://www.sseoo.com/">首页</a></li>
- <li><a href="http://www.sseoo.com/bbs/">网页补习班</a></li>
- <li><a href="http://www.sseoo.com/mygame/fly/">小游戏</a></li>
- <li><a href="http://www.qudou8.com/">祛痘吧</a></li>
- <li><a href="http://www.laicaiba.cn/">来猜吧</a></li>
- </ul>
第三步：最后这个列表要放在一个自定义区域中，我们就定义一个id为menu的div吧
- <div id="menu">
- <ul>
- <li><a href="http://www.sseoo.com/">首页</a></li>
- <li><a href="http://www.sseoo.com/bbs/">网页补习班</a></li>
- <li><a href="http://www.sseoo.com/mygame/fly/">小游戏</a></li>
- <li><a href="http://www.qudou8.com/">祛痘吧</a></li>
- <li><a href="http://www.laicaiba.cn/">来猜吧</a></li>
- </ul>
- </div>
这样我们的xhtml部分算是告一段落了
接下来我们分析一下图片的构成，我这里用了两张图片，我把这两张图片放大四倍发上来看看
可以看出来这两个图片的特点是：
- 1、每张图片都是有两个图片组合起来的，就是导航中的默认样式和鼠标经过时的样式，这样鼠标经过不用换另一张图，而是同一张图片换个位置即可，提升加载速度。
- 2、大图的右上角是圆角，小图的左上角是圆角
- 3、两张图左右拼在一起后横着从中间分开刚好是我们完成图的效果的两种样式
- 4、如果这个图片是放在背景图里那么大图的宽度就可以用背景区域的宽度控制
图片分析结束，我们来分析一下这两个背景图在CSS中如何拼接
首先我们看一下最终效果的要求：
- 1、鼠标经过后背景图位置变更：就需要背景图在a标签上或被a标签包含
- 2、两张图片组合需要两个放背景图的区域
- 3、目前能放背景并且还在a上的只有a，所以需要在a中嵌套一个标签
我们分析的结果是xhtml需要调整，a标签需要包含一个新的标签<span>标签
调整一下吧，我们在<a></a>中间加一层<span></span>
- <div id="menu">
- <ul>
- <li><a href="http://www.sseoo.com/"><span>首页</span></a></li>
- <li><a href="http://www.sseoo.com/bbs/"><span>网页补习班</span></a></li>
- <li><a href="http://www.sseoo.com/mygame/fly/"><span>小游戏</span></a></li>
- <li><a href="http://www.qudou8.com/"><span>祛痘吧</span></a></li>
- <li><a href="http://www.laicaiba.cn/"><span>来猜吧</span></a></li>
- </ul>
- </div>
PS：span和div一样都是无意义标签，不同的是div是块状[block]的而span是连级[inline]的
这样我们的xhtml才算完成，接下来根据图片构成和原理分析我们再来分析一下CSS的写法
首先大背景是黑色的，所以要给body加上一个黑色背景色
- body{background:#000;}
我们知道图片的高度是42px而宽度根据内容自适应，所以自定义区域id=menu要42px高并且有个1px颜色#666的下边框
- #menu{height:42px;border-bottom:1px solid #666;}
接下来看ul的样子，默认的ul有一个小黑点，不好看我们去掉
- #menu ul{list-style:none;}
黑点去掉了但是5个li并没有在一排啊，怎么办？都向左对齐！
- #menu ul li{float:left;}
发现俩li之间还有个间隔，貌似只有1px，继续调整li
- #menu ul li{float:left;margin-left:1px;}
有点意思了，还差链接a的字体和背景了，先把字体搞定！颜色、大小、粗细、下滑线
- #menu ul li a{color:#CCC;font-size:12px;font-weight:bold;text-decoration:none;}
下面制作a的背景，首先把a从inline改成block的，然后给个高度，因为block才能有高度，然后给背景！
- #menu ul li a{color:#CCC;font-size:12px;font-weight:bold;text-decoration:none;display:block;line-height:42px;background:url(menu_1.gif) no-repeat rightright 0px;}
到此a的7个属性完成，然后是a里面的span，和a累似，也是block，高度，背景，多一个内间距
- #menu ul li a span{display:block;line-height:42px;padding:0 15px;background:url(menu_2.gif) no-repeat 0px 0px;}
鼠标经过的时候将a和span的背景图像上移动42px即可
- #menu ul li a:hover{background:url(menu_1.gif) no-repeat rightright -42px;}
- #menu ul li a:hover span{display:block;line-height:42px;background:url(menu_2.gif) no-repeat 0px -42px;}
我们要做的效果已经完成了，源文件在http://www.sseoo.com/mygame/menu/ 这里找，具体怎么找不说了，自己探索吧！
转载请注明出处：風山漸（刘超）原创
