横向下拉:一个横向下拉菜单的教程来源: 发布时间:星期四, 2009年2月12日 浏览:169次 评论:0
注:内容主要是意译  目 是介绍这种菜单制作过程 每个建立过下拉菜单 人都习惯了 实现菜单需要而采用大量脚本但是使用结构化 HTML 和简单 CSS 也可以创建易于编辑和升级并且视觉效果良好菜单它们可以跨浏览器使用包括 IE 更好是对于那些忌讳代码设计者不需要使用 JavaScript (实际上需要 点点 JavaScript 但是你不需要去考虑这些) 建立菜单 建立菜单 首要也是最重要部分是建立它结构完成这个得最好思路方法是通过无序列表每个子菜单作为父列表项内列表来呈现听起来很复杂？其实它很直观: 代码: <ul> <li><a href=\"#\">Home</a></li> <li><a href=\"#\">About</a> <ul> <li><a href=\"#\">History</a></li> <li><a href=\"#\">Team</a></li> <li><a href=\"#\">Offices</a></li> </ul> </li> <li><a href=\"#\">Services</a> <ul> <li><a href=\"#\">Web Design</a></li> <li><a href=\"#\">Internet Marketing</a></li> <li><a href=\"#\">Hosting</a></li> <li><a href=\"#\">Do  Names</a></li> <li><a href=\"#\">Broadband</a></li> </ul> </li> <li><a href=\"#\">Contact Us</a> <ul> <li><a href=\"#\">United Kingdom</a></li> <li><a href=\"#\">France</a></li> <li><a href=\"#\">USA</a></li> <li><a href=\"#\">Australia</a></li> </ul> </li> </ul> 如此 简单 HTML 即可以访问也易于编辑(有些歧义明白就好smile.g ) 视觉呈现 如果你已经预览上面 菜单看到只是些项列表但是我可以向你保证它可以很好地呈现现在我们来加入样式 第 步我们要去掉无序列表缩进和项目符号并且定义菜单项宽度: 代码: ul { margin: 0; padding: 0; list-style: none; width: 150px; } 下面 我们需要定位菜单项很幸运是默认情况下它们是垂直堆积(排列？)但是为了定位它们包含子菜单我们必须设置它定位为 relative: 代码: ul li { position: relative; } 下 步是子菜单我们希望主菜单被鼠标覆盖时候子菜单出现在它右侧 代码: li ul { position: absolute; left: 149px; top: 0; display: none; } 使用 \'“left” 和 “top” 属性 我们完全可以将每个子菜单定位在它父项中你可能注意到了我们设置 “left” 为 149px (比主菜单项宽度窄个像素)这是为了让子菜单贴近主菜单而不出现两条边框(后面你将会明白我所说) 另外 我们将 显示(display) 设置为 “none” 这是为了我们不希望在默认情况下让子菜单显示出来 现在我们有个基本 结构但是看上去还是平板我们来为链接增加样式: 代码: ul li a { display: block; text-decoration: none; color: #777; background: #fff; padding: 5px; border: 1px solid #ccc; border-bottom: 0; } IE5.01 滑动菜单 BUG IE5.01 下 用户会发现当覆盖其中某些项时菜单会 4处跳动通过下面代码可以很容易修缮[我没在 IE5.01 下面测试过所以对于作者说这个现象没有明确概念翻译可能也有些出入 代码: /* Fix IE. Hide from IE Mac \\*/ * html ul li { float: left; height: 1%; } * html ul li a { height: 1%; } /* End */ IE 6 BUG During the development of this article, I uncovered a strange bug that I believe is _disibledevent=>HTML 代码: <!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\"><head><meta http-equiv=\"Content-Type\" content=\"text/html; char  =gb2312\" /><title>下拉菜单</title><style type=\"text/css\"><!--ul {margin: 0px;padding: 0px;list-style: none;width: 120px;border-bottom: 1px solid #777;}ul li {position: relative;}li ul {position: absolute;left: 119px;top: 0px;display: none;}ul li a {display: block;font-size: 12px;text-decoration: none;color: #333;background-color: #FFF;padding: 5px;border: 1px solid #777;border-bottom: 0px;}/* Fix IE. Hide from IE Mac \\*/* html ul li {float: left;height: 1%;}* html ul li a {height: 1%;}/* End */li:hover ul, li.over ul {display: block;}-->
</style><script language=\"javascript\" type=\"text/javascript\"><!--startList = function  { (document.all&&document.getElementById) {navRoot = document.getElementById(\"nav\");for (i=0; i<navRoot.childNodes.length; i ) {node = navRoot.childNodes[i]; (node.nodeName \"LI\") {node.onmouseover=function {this. Name  \" over\";}node.onmouseout=function {this.Name=this.Name.replace(\" over\", \"\");}}}}}window.onload = startList;--></script></head><body><ul id=\"nav\"><li><a href=\"#\">首页</a></li><0
相关文章读者评论发表评论 |
|
 |
专注于互联网--专注于架构 |
最新标签 网站地图 文章索引 Rss订阅 |
