您正在使用IPV4(18.205.176.39)访问本站 您本次共访问本站 1 次
 用户名: 密 码: 验证码:     用QQ登录本站
首页 软件 编程 笑话 知识 公告 台风 日历 计算器
[公益]文明驾车我带头,文明行路我带头,礼貌让座我带头       深圳小产权房      

【腾讯云】热门云产品首单特惠秒杀,2核2G云服务器45元/年      
[公益] 节省一分零钱 献出一份爱心 温暖世间真情      
2022年 儿童节 15
2022年 端午节 17
2023年 元 旦 229
2023年 春 节 250
 
本类新增
本类热门文章
您现在的位置:首页 >> 脚本程序 >> 内容
JS+CSS相对定位实现的下拉菜单
内容摘要: htmlheadtitle非定位CSS+Js下拉菜单/titlestyle#menu{position:absolute;font-family:sans-serif;font-size:9pt;}#menuli{float:left;list-style-type:none;width:102px;background-color:skyblue;bord......
<html>

<head>

<title>非定位CSS+Js下拉菜单</title>

<style>

#menu{

position:absolute;

font-family:sans-serif;

font-size:9pt;

}

#menuli{

float:left;

list-style-type:none;

width:102px;

background-color:skyblue;

border:1pxsolid#0066cc;

text-indent:0px;

margin-left:3px;

}

#menulia{

color:blue;

text-decoration:none;

width:100%;

display:block;

}

#menulia:hover{

color:white;

}

#menuliul{

background-color:skyblue;

margin:0px;

padding:0px;

}

#menuliulli{

padding:0px;

margin:0px;

float:none;

list-style-type:none;

width:100px;

text-indent:0px;

border:none;

}

#menuliullia{

color:black;

text-decoration:none;

}

#menuliullia:hover{

color:black;

background-color:aqua;

}</style>

<scriptlanguage="javascript"type="text/javascript">

vart=false,current;

functionSetupMenu(){

if(!document.getElementsByTagName)return;

items=document.getElementsByTagName("li");

for(i=0;i<items.length;i++){

if(items[i].className!="menu")continue;

thelink=findChild(items[i],"A");

thelink.onmouseover=ShowMenu;

thelink.onmouseout=StartTimer;

if(ul=findChild(items[i],"UL")){

ul.style.display="none";

for(j=0;j<ul.childNodes.length;j++){

ul.childNodes[j].onmouseover=ResetTimer;

ul.childNodes[j].onmouseout=StartTimer;

}

}

}

}

functionfindChild(obj,tag){

cn=obj.childNodes;

for(k=0;k<cn.length;k++){

if(cn[k].nodeName==tag)returncn[k];

}

returnfalse;

}

functionShowMenu(e){

if(!e)vare=window.event;

thislink=(e.target)?e.target:e.srcElement;

ResetTimer();

if(current)HideMenu(current);

thislink=thislink.parentNode;

current=thislink;

ul=findChild(thislink,"UL");

if(!ul)return;

ul.style.display="block";

}

functionHideMenu(thelink){

ul=findChild(thelink,"UL");

if(!ul)return;

ul.style.display="none";

}

functionResetTimer(){

if(t)window.clearTimeout(t);

}

functionStartTimer(){

t=window.setTimeout("HideMenu(current)",200);

}

window.onload=SetupMenu;

</script>

</head>

<body>

<h1>MenuTest</h1>

<ulid="menu">

<liclass="menu"><ahref="#">Home</a></li>

<liclass="menu"><ahref="#">Products</a>

<ul>

<li><ahref="#">Sub-item1</a></li>

<li><ahref="#">Sub-item2</a></li>

</ul>

</li>

<liclass="menu"><ahref="#">Support</a>

<ul>

<li><ahref="#">Sub-item1</a></li>

<li><ahref="#">Sub-item2</a></li>

</ul>

</li>

<liclass="menu"><ahref="#">Employment</a>

<ul>

<li><ahref="#">Sub-item1</a></li>

<li><ahref="#">Sub-item2</a></li>

</ul>

</li>

<liclass="menu"><ahref="#">ContactUs</a>

<ul>

<li><ahref="#">Sub-item1</a></li>

<li><ahref="#">Sub-item2</a></li>

</ul>

</li>

</ul>

</body>

</html>

上一篇:vue中实现滚动加载更多的示例 下一篇:JavaScript实现横向滑出的多级菜
发布日期:2022/4/10
手机扫二维码直达本页
发布时间:17:17:29
点击:381
录入:齐天大圣
相关文章
Baidu

YiJiaCMS 6.2.1.220509(MSSQL) 闽ICP备05000814号-1
本空间由腾讯云(轻量应用服务器)提供,百度云加速提供加速防护
Copyright©2000-2022