- 浏览: 183460 次
- 性别:
- 来自: 深圳
文章分类
最新评论
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
<script type="text/javascript">
<!--
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;
// open hidden layer
function mopen(id)
{
// cancel close timer
mcancelclosetime();
// close old layer
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
// get new layer and show it
ddmenuitem = document.getElementById(id);
ddmenuitem.style.visibility = 'visible';
}
// close showed layer
function mclose()
{
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}
// go close timer
function mclosetime()
{
closetimer = window.setTimeout(mclose, timeout);
}
// cancel close timer
function mcancelclosetime()
{
if(closetimer)
{
window.clearTimeout(closetimer);
closetimer = null;
}
}
// close layer when click-out
document.onclick = mclose;
// -->
</script>
<style>
#sddm
{ margin: 0;
padding: 0;
z-index: 30}
#sddm li
{ margin: 0;
padding: 0;
list-style: none;
float: left;
font: bold 11px arial}
#sddm li a
{ display: block;
margin: 0 1px 0 0;
padding: 4px 10px;
width: 60px;
background: #5970B2;
color: #FFF;
text-align: center;
text-decoration: none}
#sddm li a:hover
{ background: #49A3FF}
#sddm div
{ position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
background: #EAEBD8;
border: 1px solid #5970B2}
#sddm div a
{ position: relative;
display: block;
margin: 0;
padding: 5px 10px;
width: auto;
white-space: nowrap;
text-align: left;
text-decoration: none;
background: #EAEBD8;
color: #2875DE;
font: 11px arial}
#sddm div a:hover
{ background: #49A3FF;
color: #FFF}
</style>
</head>
<body>
<form id="form1" runat="server">
<ul id="sddm">
<!--如果栏目下没有子菜单就不用onmouseover="mopen('m1')" onmouseout="mclosetime()"以及下面的那个DIV -->
<li><a href="#" onmouseover="mopen('m1')" onmouseout="mclosetime()">Home</a>
<div id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
<a href="#">HTML DropDown</a> <a href="#">DHTML DropDown menu</a> <a href="#">JavaScript
DropDown</a> <a href="#">DropDown Menu</a> <a href="#">CSS DropDown</a>
</div>
</li>
<li><a href="#" onmouseover="mopen('m2')" onmouseout="mclosetime()">Download</a>
<div id="m2" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
<a href="#">ASP Dropdown</a> <a href="#">Pulldown menu</a> <a href="#">AJAX dropdown</a>
<a href="#">DIV dropdown</a>
</div>
</li>
<li><a href="#" onmouseover="mopen('m3')" onmouseout="mclosetime()">Order</a>
<div id="m3" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
<a href="#">Visa Credit Card</a> <a href="#">Paypal</a>
</div>
</li>
<li><a href="#" onmouseover="mopen('m4')" onmouseout="mclosetime()">Help</a>
<div id="m4" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
<a href="#">Download Help File</a> <a href="#">Read online</a>
</div>
</li>
<li><a href="#" onmouseover="mopen('m5')" onmouseout="mclosetime()">Contact</a>
<div id="m5" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
<a href="#">E-mail</a> <a href="#">Submit Request Form</a> <a href="#">Call Center</a>
</div>
</li>
</ul>
<div style="clear: both">
</div>
<div style="clear: both">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
</form>
</body>
</html>
发表评论
文章已被作者锁定,不允许评论。
-
html页面获取参数加载数据,提高访问速度
2013-06-03 14:49 801如果你的网站很多数据是用jquery ajax获取的,那就没 ... -
取汉字拼音首字母
2012-08-05 20:01 1936<html><head><met ... -
网页QQ联系
2012-08-05 19:59 685<a target="_blank" ... -
防止重复提交的一个小技巧 很好用哦
2012-08-05 19:46 584function CheckData() { //这里会有 ... -
faq 折叠效果
2012-04-11 19:05 889<!DOCTYPE html PUBLIC " ... -
json用法小案例
2012-03-01 11:36 860首先构建json 数据 StringBuilder sb = ... -
使用iframe ,父页面调用嵌套页面的内容
2011-12-28 17:36 918iframe 父级页面 js 是 MyIframe.win ... -
文本框不能输入中文判断
2011-11-08 11:03 2078具体步骤: 方法一:用文本框的CSS属性ime-mode实现。 ... -
页面刷新
2011-07-05 17:29 623有项目可能要做刷新的功能,比如你添加一条信息后就刷新下,有二种 ... -
window.location.search的用法
2011-06-11 09:59 1056location.search是从当前URL的?号开始的字符串 ... -
javascript常用知识点
2011-06-08 09:19 6531.输出语句:document.write(“”) 2. ... -
js中window.parent和window.opener区别
2011-06-01 10:42 1323下面一段代码是关于wind ... -
JS转义
2011-05-19 19:14 2379方法主要有三种 ...
相关推荐
横向菜单 水平菜单 后台模板 颜色偏浅 bootstrap+html+css
ext3横向菜单
双重横向菜单 多个swiper
JavaScript横向菜单JavaScript横向菜单JavaScript横向菜单
Ext3.X横向菜单导航栏,已有json横向菜单数据,只要引入基本extjs、 css就可以使用,内有效果图。
横向菜单导航
高仿网易新闻抽屉效果+横向菜单+页面滑动源代码,是一个很不错的Android源码,有兴趣的伙伴们抽时间可以看一下把
NULL 博文链接:https://rebecca.iteye.com/blog/1173631
delphi语言编写菜单横向显示效果,更好展示各功能部分;
css经典横向菜单,多种样式经典横向菜单,多种颜色、样式
第一行菜单可自定义菜单数量、菜单样式(宽、高,选中和非选中时的颜色) 2.第二行附加菜单可自定义滑块、菜单样式 3.两层菜单均可滑动,可设置动画,控制动画速度 4.通过currentIndexForMain和...
flash横向菜单flash 横向菜单源码
横向菜单 页面滑动 例子 UIViewController *VC1 = [[UIViewController alloc]init]; [VC1.view setBackgroundColor:[UIColor redColor]]; UIViewController *VC2 = [[UIViewController alloc]init]; ...
简洁的横向菜单,可以通过代码自己随意变样式。
div层应用效果,欢迎下载,谢谢支持!我没有分看O(∩_∩)O哈哈
flash效果横向菜单,颜色运用的非常好,建站的朋友可以考虑
使用jquery做的小实例,显示横向菜单的,子菜单可不受限制添加,扩展性强
不错的js,打包了(微软横向菜单也在其中)