原文地址:http://www.w3cn.org/article/tips/2005/105.html
尽管在我的网站和文章里都有提到CSS制作菜单的方法,但很多初学者还是不太清楚如何实现,以及实现原
理,我想专门写一篇详细教程会对大家比较有帮助。
我们先来看一个菜单的例子,最终效果是:
然后我们来详细讲解步骤
第一步:建立一个无序列表
我们先建立一个无序列表,来建立菜单的结构。代码是:
<ul>
<li><a href="1">首页</a></li>
<li><a href="2">产品介绍</a></li>
<li><a href="3">服务介绍</a></li>
<li><a href="4">技术支持</a></li>
<li><a href="5">立刻购买</a></li>
<li><a href="6">联系我们</a></li>
</ul>
效果是:
第二步:隐藏li的默认样式
因为看起来不是很好看,菜单通常都不需要li默认的圆点,我们给UL定义一个样式来消除这些圆点。
当然,为了更好的控制整个菜单,我们把菜单放在一个div里。页面代码变成:
<div class="test">
<ul>
<li><a href="1">首页</a></li>
<li><a href="2">产品介绍</a></li>
<li><a href="3">服务介绍</a></li>
<li><a href="4">技术支持</a></li>
<li><a href="5">立刻购买</a></li>
<li><a href="6">联系我们</a></li>
</ul>
</div>
CSS定义为:
.test ul{list-style:none;}
说明:“.test ul”表示我要定义的样式将作用在test的层里的ul标签上。
现在的效果是没有圆点了:
第三步:关键的浮动
这里是菜单变成横向的关键,我们给li元素加上一个“float:left;”属性,让每个li浮动在前面一个li的
左面。
CSS定义为:
.test li{float:left;}
效果是:
看,菜单变横向了。就这么简单!下面需要做的就是优化细节了。
第四步:调整宽度
菜单都挤在一起不好看怎么办?我们来调节li的宽度。
在CSS中添加定义width:100px指定一个li的宽度是100px,当然你可以根据你的需要调整数值:
.test li{float:left;width:100px;}
效果是:
如果我们同时定义外面div的宽度,li就会根据div的宽度自动换行,例如定义了div宽350px,6个li的总宽
度是600px,一行排不下就自动变成两行:
.test{width:350px;}
效果是:
第五步:设置基本链接效果
接下来,我们通过CSS来设置链接的样式,分别定义:link、:visited、:hover的状态
.test a:link{color:#666;background:#CCC;text-decoration:none;}
.test a:visited{color:#666;text-decoration:underline;}
.test a:hover{color:#FFF; font-weight:bold;text-decoration:underline;background:#F00;}
效果是:
第六步:将链接以块级元素显示
有朋友问,菜单链接的背景色为什么没有填满整个li的宽度?恩,解决的方法很简单,在a的样式定义中增
加display:block,使链接以块级元素显示。
同时我们微调了如下细节:
- 用text-align:center将菜单文字居中;
- 用height:30px增加背景的高度;
- 用margin-left:3px使每个菜单之间空3px距离;
- 用line-height:30px;定义行高,使链接文字纵向居中;
CSS定义象这样:
.test a{display:block;text-align:center;height:30px;}
.test li{float:left;width:100px;background:#CCC;margin-left:3px;line-height:30px;}
效果变成:
这样就漂亮多了吧。
第七步:定义背景图片
我们通常都会在每个链接前加一个小图标,这样导航更清楚。CSS是采用定义li的背景图片来实现的:
.test a:link{color:#666;background:url(arrow_off.gif) #CCC no-repeat 5px
12px;text-decoration:none;}
.test a:hover{color:#FFF; font-weight:bold;text-decoration:none;background:url(arrow_on.gif)
#F00 no-repeat 5px 12px;}
说明:“background:url(arrow_off.gif) #CCC no-repeat 5px 12px;”这句代码是一个CSS缩写,表示背
景图片是arrow_off.gif;背景颜色是#CCC;背景图片不重复"no-repeat",背景图片的位置是左边距5px、上
边距12px;
默认状态下,图标为arrow.off.gif,当鼠标移动到链接上,图标变为arrow_on.gif
效果变成:
现在css的完整代码是:
.test ul{list-style:none;}
.test li{float:left;width:100px;background:#CCC;margin-left:3px;line-height:30px;}
.test a{display:block;text-align:center;height:30px;}
.test a:link{color:#666;background:url(arrow_off.gif) #CCC no-repeat 5px
12px;text-decoration:none;}
.test a:visited{color:#666;text-decoration:underline;}
.test a:hover{color:#FFF; font-weight:bold;text-decoration:none;background:url(arrow_on.gif)
#F00 no-repeat 5px 12px;}
页面的完整代码是:
<div class="test">
<ul>
<li><a href="1">首页</a></li>
<li><a href="2">产品介绍</a></li>
<li><a href="3">服务介绍</a></li>
<li><a href="4">技术支持</a></li>
<li><a href="5">立刻购买</a></li>
<li><a href="6">联系我们</a></li>
</ul>
</div>
好了,主要步骤就是这7步,立刻拷贝和修改代码试试,你也可以用CSS做横向菜单了!
分享到:
相关推荐
CSS制作横向菜单,很好的,很好学的,可以学
纯CSS实现横向导航栏,导航栏分三级子菜单,主要所用的html标签为ul与li
css和javascript编写的 横向下拉菜单,有益于学习网页制作
音乐横向css导航菜单 网页设计使用推荐
纯div+css 弹出菜单 水平三级横向弹出菜单
--*-- 1 单元目标 2 教学内容 3 动手实践 4 课堂小结 单元目标 CSS控制标记制作导航菜单 能力目标 学会使用 CSS控制标记 知识目标 《CSS网页样式设计与制作》 参考资料 2 教学内容 1 单元目标 3 动手实践 4 课堂小结...
一款使用css3 transition属性和少量js代码制作的宽屏带缩略图的横向下拉菜单。适合于做产品展示网站的导航菜单。
应用无序列表ul构建水平横向菜单; ?应用无序列表ul制作多种菜单元素; ?标题标签h1-h4在页面中的使用; ?定义列表dl的应用实例及组织页面元素的实例; ?有序列表ol的应用实例; ?CSS Sprites工作原理; ?制作...
1、html+css+jquery制作,适合大多数主流游览器,经过IE6、及IE6以上,谷歌 Chrome测试 2、一级标题是横向动感 3、二级菜单下坠动感 4、鼠标移动到二级菜单也有弹性动感 5、可以更换主题 6、使用简单,直接...
5.11 一个横向导航菜单的制作 5.11.1 菜单原理 5.11.2 制作菜单内容和结构部分 5.11.3 CSS 代码编写 5.12 清除浮动 5.12.1 清除浮动属性详解 5.12.2 清除浮动属性的使用 第6 章 CSS 定义文本属性 第123 页 6.1 文本...
推荐jQuery黑色多级横向菜单导航(带动画效果) 49.学习jQuery简单伸缩菜单代码实例 50.一款jquery仿flash滑动左侧菜单插件代码下载 51.一款jQuery实现伸缩型菜单源码下载 52.一款jQuery制作仿FLASH动感导航...
我们理念中的菜单都是矩形的,不是横向排列就是纵向排列,这里我们打破了常规的思维,把菜单做成圆形的。 在这里我们不得不克服几个问题: 如何定义html如何悬停定位菜单元素 在此之前先看一下最终效果是怎样的,...
里面包含几种常用到的CSS特效,有源代码。 1.论坛会员等级图制作 2.CSS横向菜单制作 3.CSS代替图片实现背景颜色渐变特效 ....
第8章 用CSS制作实用的菜单 8.1 项目列表 8.1.1 列表的符号 8.1.2 图片符号 8.2 无需表格的菜单 8.3 菜单的横竖转换 8.4 菜单实例一:百度导航条 8.5 菜单实例二:流行的Tab菜单 第9章 CSS...
废话不多说,直接上图: ...精美横向滚动菜单按钮 - Glunefish</title> </head> <!-- 这里接下面的行间样式 --> <body> <li><a><span>Home</span></a> <li><a><span>C
由于时间关系,本教程只讲解一些实用知识,让您从原来的表格布局跨入到web标准(div+css)布局,会使用web标准制作出常见的页面,这也达到了本教程的目的。 本教程多以实例形式循序渐进讲解,实例涉及到哪些关键点...
内容索引:脚本资源,jQuery,动感菜单,水平导航菜单 jQuery 带动态效果的两级横向导航菜单,全部是由jquery+CSS代码完成,菜单很简洁,使用背景色平铺而成,因此没有使用GIF等图像资源,这个菜单可以两级展开,当把...
1、html+css+jquery制作,适合大多数主流游览器,经过IE6、及IE6以上,谷歌Chrome测试 2、一级标题是横向动感 3、二级菜单下坠动感 4、鼠标移动到二级菜单也有弹性动感 5、可以更换主题 6、使用简单,直接修改标题和...
此代码内容为巧克力jQuery横向二级滑动导航菜单,属于站长常用代码,更多菜单导航代码请访问懒人图库JS代码频道。" /> 巧克力jQuery横向二级滑动导航菜单_懒人图库 <link href="css/lrtk.css" rel="stylesheet" type...
1.论坛会员等级图制作(背景图不同位置显示) 2、CSS横向菜单制作 3、CSS代替图片实现背景颜色渐变特效 4、文字及图片滤镜特效 5、CSS实现层的显示隐藏 6、CSS实现文字与图片互相转换特效