- 1、本文档共6页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
微软的纯CSS 水平下拉菜单,弹出式菜单
来自微软的纯CSS下拉菜单结合JavaScript的下拉菜单,纯CSS的下拉菜单我也写过很多了。不过在微软 Microsoft Expression Web 的相关站点上看到这个纯CSS下拉菜单的时候,我还是觉得很赞赏。这应该是最精简、最干净的纯CSS下拉菜单了。
先看一下效果(这是我重新实现的):
下面是实现方法:
首先是菜单的XHTML代码:
ul
lia href=#菜单一/a/li
lia href=#菜单二/a
ul
lia href=#子菜单一/a/li
lia href=#子菜单二/a/li
lia href=#子菜单三/a/li
/ul
/li
lia href=#菜单三/a/li
lia href=#菜单四/a
ul
lia href=#子菜单一/a/li
lia href=#子菜单二/a/li
lia href=#子菜单三/a/li
/ul
/li
lia href=#菜单五/a/li
/ul
?
不设置任何CSS类,实在是干净到极点了(当然,考虑到实际应用的复杂性,我估计你不可能真的什么都不加。要么把这段代码放到一个特定的容器里,要么给第一层的ul加一个id或者class。
假设这是在一个新的HTML文档里,那么我们现在没有任何的CSS定义,这时候的网页显示效果是这样的:
在我们的下拉菜单中,不需要内补丁、外边距这些东西,即使需要,我们也要自己重新设置,所以我们首先添加第一条规则:
ul {
margin: 0px;
padding: 0px;
}
为了跨浏览器兼容,必须同时把外边距和内补丁都设置为0,因为有的浏览器默认使用外边距,有的则默认使用内补丁。这样设置以后,页面上可以看到两层列表项前面的缩进都没了,实心和空心的列表符号也不见了。然后设置第二条规则:
ul li {
float: left;
display: inline;
font: 0.9em Arial, Helvetica, sans-serif;
height: 30px;
width: 100px;
list-style: none;
}
这是让原本各占一行的li元素变成嵌入式(inline)显示,另一种说法是把list-item元素变成行内元素。总而言之就是让li不要各占一行,并列起来,这样才能成为菜单。设置后,效果如下:
这样就得到了下拉菜单的雏形,当然了,外观很丑陋,下拉功能也还没实现。这里要说明的是,最好给菜单项设置高度和宽度,否则有可能出现不可预料的结果(取决于页面或容器的宽度)。为了让菜单项看起来像菜单,我们继续添加规则:
ul li a {
color: #FFF;
text-decoration: none;
line-height: 29px;
width: 91px;
margin: 0px;
padding: 0px 0px 0px 8px;
display: block;
border-right: solid 1px #ccc;
border-bottom:solid 1px #ccc;
background: #808080;
}
这一条规则比较长,从作用上说呢,就是加上背景和菜单间的隔离线,把默认有下划线蓝色的文字变成白色无下划线。增加了规则后的效果:
从外观上,这就已经是我们最终的下拉菜单样式了。不过,我们还要在细节上修饰一下,比如让子菜单和一级菜单的样式有所区别(当然了,由于字体设置的0.9em,所以在文字大小上已经有区别了,但是还不够,而且对于中文来说,很多时候我们未必能通过文字大小来区别,因为适合中文的常规文字大小就12px和14px而已),所以我们修改一下子菜单的背景色,并且让子菜单比一级菜单的高度要小一些。规则:
ul li ul li { height:25px; }
ul li ul li a {
background: #666;
line-height:24px;
}
这里包含两条规则,第一条是将子菜单的列表项目高度由之前统一设置的30px减小为25,第二是将子菜单项的背景改为#666,并且文字行高对应地减小到24设置完成后(列表项高度-1,减去的1正好是上边框的1像素),效果如下:
通常我们鼠标滑过某个菜单项的时候,要让它跟其它项目有所区别(表示当前菜单处于激活状态,术语叫“高亮” ,所以我们对一级菜单的鼠标滑过样式做一下定义:
ul li a:hover { background: #666;
您可能关注的文档
- 乌鲁木齐市区域城市化水平的综合评价研究.docx
- 享受过程_活在当下.ppt
- 人力资源微信微博等新媒体在青少年革命传统教育中的应用研究.doc
- 企业技术创新情况快报表指标解释.doc
- 信息时代人际交往的新特点.doc
- 全社会固定资产投资对我国经济增长的影响.doc
- 光学非线性现象.doc
- 冰皮月饼DIY制作方案.doc
- 弹簧垫圈涨圈原因再探.doc
- 弹吉他右手指甲的形状以及修剪方法.doc
- 2024年05月山东交通职业学院招考聘用博士研究生50人笔试历年典型题及考点剖析附带答案含详解.docx
- 2024年05月安徽芜湖市弋江区老年学校(大学)工作人员特设岗位公开招聘2人笔试历年典型题及考点剖析附带答案含详解.docx
- 2024年05月山东东营河口区教育类事业单位招考聘用22人笔试历年典型题及考点剖析附带答案含详解.docx
- 2024年05月山东交通职业学院招考聘用100人笔试历年典型题及考点剖析附带答案含详解.docx
- 2024年05月山东威海职业学院招考聘用高层次人才2人笔试历年典型题及考点剖析附带答案含详解.docx
- 2024年05月安徽石台县事业单位工作人员33人笔试历年典型题及考点剖析附带答案含详解.docx
- 2024年05月山东滨州市博兴县事业单位公开招聘考察笔试历年典型题及考点剖析附带答案含详解.docx
- 2024年05月安徽蚌埠固镇县湖沟镇选聘村级后备干部7人笔试历年典型题及考点剖析附带答案含详解.docx
- 2024年05月山东省安丘市教育和体育局所属事业单位学校公开2024年招考232名工作人员笔试历年典型题及考点剖析附带答案含详解.docx
- 2024年05月山东临沂临港经济开发区工作人员(5人)笔试历年典型题及考点剖析附带答案含详解.docx
文档评论(0)