`
djob2008
  • 浏览: 127407 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

一种标准的网页下拉菜单(符合web标准)

    博客分类：
  • JSF
WebJavaScriptCSSXHTMLHTML 
阅读更多 
<!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" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>css菜单演示</title>


<style type="text/css">
<!--

*{margin:0;padding:0;border:0;}
body {
	font-family: arial, 宋体, serif;
        font-size:12px;
}


#nav {
	 line-height: 24px;  list-style-type: none; background:#666;
}

#nav a {
	display: block; width: 80px; text-align:center;
}

#nav a:link  {
	color:#666; text-decoration:none;
}
#nav a:visited  {
	color:#666;text-decoration:none;
}
#nav a:hover  {
	color:#FFF;text-decoration:none;font-weight:bold;
}

#nav li {
	float: left; width: 80px; background:#CCC;
}
#nav li a:hover{
	background:#999;
}
#nav li ul {
	line-height: 27px;  list-style-type: none;text-align:left;
	left: -999em; width: 180px; position: absolute; 
}
#nav li ul li{
	float: left; width: 180px;
	background: #F6F6F6; 
}


#nav li ul a{
	display: block; width: 180px;w\idth: 156px;text-align:left;padding-left:24px;
}

#nav li ul a:link  {
	color:#666; text-decoration:none;
}
#nav li ul a:visited  {
	color:#666;text-decoration:none;
}
#nav li ul a:hover  {
	color:#F3F3F3;text-decoration:none;font-weight:normal;
	background:#C00;
}

#nav li:hover ul {
	left: auto;
}
#nav li.sfhover ul {
	left: auto;
}
#content {
	clear: left; 
}


-->
</style>

<script type=text/javascript><!--//--><![CDATA[//><!--
function menuFix() {
	var sfEls = document.getElementById("nav").getElementsByTagName("li");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
		this.className+=(this.className.length>0? " ": "") + "sfhover";
		}
		sfEls[i].onMouseDown=function() {
		this.className+=(this.className.length>0? " ": "") + "sfhover";
		}
		sfEls[i].onMouseUp=function() {
		this.className+=(this.className.length>0? " ": "") + "sfhover";
		}
		sfEls[i].onmouseout=function() {
		this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), 

"");
		}
	}
}
window.onload=menuFix;
//more javascript from http://www.webjx.com
//--><!]]></script>

</head>
<body>


<ul id="nav">
<li><a href="#">产品介绍</a>
	<ul>
	<li><a href="#">产品一</a></li>
	<li><a href="#">产品一</a></li>
	<li><a href="#">产品一</a></li>
	<li><a href="#">产品一</a></li>
	<li><a href="#">产品一</a></li>
	<li><a href="#">产品一</a></li>
	</ul>
</li>
<li><a href="#">服务介绍</a>
	<ul>
	<li><a href="#">服务二</a></li>
	<li><a href="#">服务二</a></li>
	<li><a href="#">服务二</a></li>
	<li><a href="#">服务二服务二</a></li>
	<li><a href="#">服务二服务二服务二</a></li>
	<li><a href="#">服务二</a></li>
	</ul>
</li>
<li><a href="#">成功案例</a>
	<ul>
	<li><a href="#">案例三</a></li>
	<li><a href="#">案例</a></li>
	<li><a href="#">案例三案例三</a></li>
	<li><a href="#">案例三案例三案例三</a></li>
	</ul>
</li>
<li><a href="#">关于我们</a>
	<ul>
	<li><a href="#">我们四</a></li>
	<li><a href="#">我们四</a></li>
	<li><a href="#">我们四</a></li>
	<li><a href="#">我们四111</a></li>
	</ul>
</li>

<li><a href="#">在线演示</a>
	<ul>
	<li><a href="#">演示</a></li>
	<li><a href="#">演示</a></li>
	<li><a href="#">演示</a></li>
	<li><a href="#">演示演示演示</a></li>
	<li><a href="#">演示演示演示</a></li>
	<li><a href="#">演示演示</a></li>
	<li><a href="#">演示演示演示</a></li>
	<li><a href="#">演示演示演示演示演示</a></li>
	</ul>
</li>
<li><a href="#">联系我们</a>
	<ul>
	<li><a href="#">联系联系联系联系联系</a></li>
	<li><a href="#">联系联系联系</a></li>
	<li><a href="#">联系</a></li>
	<li><a href="#">联系联系</a></li>
	<li><a href="#">联系联系</a></li>
	<li><a href="#">联系联系联系</a></li>
	<li><a href="#">联系联系联系</a></li>
	</ul>
</li>

</ul>

</body>
</html>

 

分享到：
| JSP+AJAX三级级联及更多级的实现
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jquery实现很酷的网页顶部图标下拉菜单效果

    本文实例讲述了jquery实现很酷的网页顶部图标下拉菜单效果。分享给大家供大家参考。具体如下： 兼容IE和火狐的顶部菜单栏，带图标的图文菜单，还有右上角的下拉导航效果，一个演示包括了两种菜单，都是很实用的效果...

    导航条下拉菜单

    js导航条划过下拉菜单代码。兼容各浏览器，web前端资源

    网页菜单的辅助制作工具

    Agama Web Menus是一款帮助你快速的制作出专业的网页菜单的辅助制作工具，使你的菜单看起来就不是那么的单调了，它包含许多菜单，如，传统的弹出菜单，下拉式选 单，导航栏，书签菜单等！程序带有详细的操作向导，...

    百度百科目录隐藏效果，类似下拉伸展菜单

    内容索引:脚本资源,Ajax/JavaScript,下拉菜单,目录隐藏　百度百科里的目录显示、隐藏效果，类似一种下拉延展菜单的效果，你只需把鼠标放到右下角的小三角上，内容就会大幅展开，功能的确不错，不过看了看代码，实现...

    UIDropDown:使用Swift编写的iOS优雅下拉菜单

    概述UIDropDown允许您在表中选择一个选项，就像在Web上的下拉菜单一样。 它包含3种不同的动画来呈现选项表，并且可以通过多种方式进行修改。安装可可豆是Cocoa项目的依赖项管理器。 您可以使用以下命令进行安装： $ ...

    使用javascript实现下拉框的动态控制

    下拉框是常用的一种web页面控件。它很简单实用，便于 操作者从…组选项中选择适合的选项。一般的下拉框选项是在 页面编写过程中事先写好的，但有时这样不能满足要求。假设 有两个下拉框，一个是省份，一个是...

    【高端元件库】Web端高保真动态交互元件库V2.8.zip

    Navigation 导航：Breadcrumb 面包屑、Dropdown 下拉菜单、NavMenu 导航菜单、Pagination 分页、Tabs 标签页、PageHeader 页头、Steps 步骤条 Data Entry 数据录入：Radio 单选框、Checkbox 多选框、Input 输入框、...

    web开发常用js库（效果库、架构库）

    7.列表下拉加载更多-伪数据加载与ajax异步加载个一种； 8.折叠菜单一个； 9.banner图效果-7种包含手机上支持手指滑动的； 10.时间轴-控制1种； 11.自定义滚动条-横向、纵向各一种； 12.临时禁用滚动条-禁用与启用...

    软件界面设计工具_3款合集

    此时，你可以选择打开窗体、打开网页、弹出对话框、修改属性值和关闭本身窗体等五种效果，这里我们选择“打开窗体”，然后在弹出的对话框里指向弹出窗体的文件。最后，点击“完成”按钮即可。 图八、使用UI...

    系链：一种定位引擎，可以使覆盖，工具提示和下拉菜单更好

    它是用于Web开发人员构建功能的工具，该功能需要根据另一个UI元素的位置精确定位某些UI元素。 在UI开发中，经常需要将元素附加到其他元素，但是根据上下文，将它们彼此紧靠放置在可能会出现问题。 例如，如果我们要...

    paper-dropdown-menu-ex:带有浮动标签的纸质下拉菜单的扩展

    有几种方法可以做到这一点，但一种简单的方法是运行一个简单的 Python 附带的 Web 服务器，使用以下命令： python -m SimpleHTTPServer 或使用 NodeJS 的其他方法： http-server ./ 这会在端口 8000 上启动一个...

    Glimmer jQuery 可视化设计工具C#源代码(vs2005)

    它向我们提供了工具提示条(Tooltip)、图片切换（sequence）、下拉菜单（dropdown）三种效果的创建向导， 你只需要设置一些参数就可以生成相关的html、css、jquery代码。当然这里不是Glimmer的程序， 而是Glimmer的源...

    Glimmer jQuery 可视化设计工具C#源代码

    它向我们提供了工具提示条(Tooltip)、图片切换（sequence）、下拉菜单（dropdown）三种效果的创建向导，你只需要设置一些参数就可以生成相关的html、css、jquery代码。当然这里不是Glimmer的程序，而是Glimmer的源...

    Select.js是一款基于Tether的select下拉选择框美化插件-javascript

    它是一种用于 Web 开发人员构建功能的工具，这些功能需要根据另一个 UI 元素的位置精确定位某些 UI 元素。 在 UI 开发中经常会出现需要将元素附加到其他元素的情况，但是根据上下文将它们在 DOM 树中彼此相邻放置...

    基于web的网络购物系统附毕业设计论文_用asp+access实现的网络购物系统

    点击页面左侧的商品信息管理键，将出现下拉菜单。菜单中包括添加大类、添加小类、添加商品和商品审查。通过这个管理模块，管理员可以添加、删除商品、商品类型，并且可以修改商品售价、商品简介、商品说明等信息。 ...

    ASP.NET的网页代码模型及生命周期

    创建一个单文件页模型，在【文件】按钮中选择【新建文件】选项，在弹出对话框中选择【Web窗体】或在右击当前项目，在下拉菜单中选择【添加新建项】选项即可创建一个.aspx页面，如图4-2所示。 图4-2 创建单文件页...

    DevColor:适用于Mac，iOS和Web开发的简单颜色选择器

    从颜色选择器中选择任何颜色时，您将自动更新主颜色，以及该颜色的颜色的字符串表示形式： 当前支持的颜色表示为： UIColor NSColor 十六进制（网络） rgba（网络） RGB（网页） 选择一种颜色，从下拉菜单中选择一...

    for针对Angular应用程序的强大工具提示和弹出框-JavaScript开发

    Tippy.js是由Popper.js支持的完整的Web工具提示，弹出框，下拉菜单和菜单解决方案。 Angular应用程序的强大工具提示和Popover Tippy.js是由Popper.js支持的完整的Web工具提示，popover，下拉菜单和菜单解决方案。 它...

    Muximux:一种轻巧的方式来管理HTPC

    Muximux-您的Web应用程序的轻量级门户 这是一个轻量级的门户网站，用于查看和管理您的Web应用程序，而无需运行除启用PHP的Web服务器外的任何其他操作。 使用Muximux，您无需保持多个选项卡打开，也无需将URL标记为...

    web弹出层组件MyPopup

    依据MyPopup的tip()方法可以轻松扩展出下拉菜单组件。小提示框有zhi（带直角尾巴）、zhi1（带边框的直角尾巴）、jian（带尖角尾巴）、noTail（不带尾巴）四种样式，调用方法是MyCMS.popup.tip("麦草CMS问候您",{...

Magicbox
Global site tag (gtag.js) - Google Analytics