来自 计算机网络 2019-09-04 19:47 的文章
当前位置: 六合联盟网 > 计算机网络 > 正文

CSS达成仿天猫左边网页菜单效用,JavaScript落成向

本文实例叙述了JavaScript+CSS实现仿Taobao左边网页菜单功用。分享给我们供大家参照他事他说加以考察。具体如下:

本文实例呈报了JavaScript完结向右伸出的俯拾就是网页菜单作用。分享给大家供大家参照他事他说加以考察。具体如下:

那是一款融洽写的仿Tmall的菜单功用,二级分类的作用已经落到实处,但从没鼓吹,留着用的相恋的人自个儿完美呢,JS功用已经落实,鼠标移在主分类上,二级分类向右伸出打开,如今天猫商城网、Taobao购物、京东都在用的导航菜单特效,测量检验时候请先点击一下美食指南,主菜单就突显出来了。

此间运用JavaScript完结向右伸出的类别网页菜单功效,鼠标放在右边的主菜单上,右边就伸展出二级菜单,基本未有鼓吹,菜鸟所写,款待指正,需求通盘的地点还挺多。

运作效果截图如下:

运营效果截图如下:

图片 1

图片 2

在线演示地址如下:

在线演示地址如下:

切实代码如下:

切切实实代码如下:

<!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; charset=utf-8" />
<title>仿天猫侧边网页菜单</title>
<style type="text/css">
*{margin:0; padding:0;}
body{ font-size:14px; font-family:"宋体";}
h1, h2, h3{ font-size:14px; font-weight:normal;}
li{ list-style:none;}
a{ color:#333; text-decoration:none;}
#nav{ width:202px; height:35px; background:#C00; margin:50px 0 0 20px;}
#nav h1{ padding-left:17px; line-height:35px; color:#fff; margin-right:17px;}
#box{ width:200px; border:1px solid #B00; border-top:none; margin-left:20px; display:none;}
#subnav{width:200px;}
#subnav .list{ width:200px; height:30px;}
#subnav .list h2{ width:160px; height:30px; padding-left:30px; line-height:30px; margin-right:10px;}
#subnav .list a:hover, #subnav .active a:hover{ color:#900; font-weight:bold;}
#subnav .active{ width:200px; height:30px; border-bottom:1px solid #b00; border-top:1px solid #b00; position:relative;}
#subnav .active h2{ width:170px; height:30px; padding-left:30px; line-height:30px; background:#fff; position:absolute; left:1px; top:0; z-index:4;}
#subnav .list_nav{ width:500px; overflow:hidden; border:1px solid #b00; position:absolute; left:200px; top:-1px; z-index:3; display:none;}
</style>
<script type="text/javascript">
window.onload=function()
{
 var oNav=document.getElementById('nav');
 var oBox=document.getElementById('box');
 var oSubnav=document.getElementById('subnav');
 var aLi=oSubnav.getElementsByTagName('li');
 var i=0;
 oNav.onclick=function()
 {
  if(oBox.style.display=='block')
  {
   oBox.style.display='none';
  }
  else
  {
   oBox.style.display='block';
  }
 }
 for(i=0;i<aLi.length;i++)
 {
  if(aLi[i].className=='list')
  {
   aLi[i].onmousemove=function()
   {
    for(i=0;i<aLi.length;i++)
    {
     var aDivList=this.getElementsByTagName('div')[0];
     aDivList.style.display='block';
     this.className='active';
    }
   }
   aLi[i].onmouseout=function()
   {
    for(i=0;i<aLi.length;i++)
    {
     var aDivList=this.getElementsByTagName('div')[0];
     aDivList.style.display='none';
     this.className='list';  
    }
   }
  }
 }
};
</script>
</head>
<body>
<div id="nav">
<h1>所有商品分类</h1>
</div>
<div id="box">
 <ul id="subnav">
  <li class="list">
   <h2><a href="#">服饰内衣、鞋靴运动</a></h2>
   <div class="list_nav">
    <ul>
     <li>1</li>
     <li>1</li>
     <li>1</li>
     <li>1</li>
    </ul>
   </div>
  </li>
  <li class="list">
   <h2><a href="#">电子商品</a></h2>
   <div class="list_nav">
    <ul>
     <li>222</li>
     <li>2222</li>
     <li>2222</li>
     <li>22222</li>
    </ul>
   </div>
  </li>
  <li class="list">
   <h2><a href="#">服饰内衣、鞋靴运动</a></h2>
   <div class="list_nav">
    <ul>
     <li>3333</li>
     <li>3333</li>
     <li>3333</li>
     <li>3333</li>
    </ul>
   </div>
  </li>
  <li class="list">
   <h2><a href="#">服饰内衣、鞋靴运动</a></h2>
   <div class="list_nav">
    <ul>
     <li>1</li>
     <li>1</li>
     <li>1</li>
     <li>1</li>
    </ul>
   </div>
  </li>
 </ul>
</div>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">      
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>向右伸出的多级菜单</title>
<style type="text/css">
*{
padding:0;
margin:0;
}
li{
list-style:none;
}
ul{
background:rgb(200,13,34);
width:250px;
float:left;
}
b{
display:block;
width:500px;
height:40px;
background:rgb(24,122,173);
}
ul li{
height:32px;
}
ul li:hover{
height:32px;
background:orange;
}
#nav1{
position:absolute;
}
#nav3{
position:relative;
left:0;
background:green;
visibility:hidden;
} 
</style>
</head>
<body>
  <div id="nav1">
   <ul id="nav2">
    <li>文学</li>
    <li>艺术</li>
    <li>摄影</li>
   </ul>
   <ul id="nav3">
    <li>1-1</li>
    <li>2-1</li>
    <li>3-1</li>
   </ul>
  </div>
<script type="text/javascript">
 var focus=false;
 var showdiv=document.getElementById("nav3");
 showdiv.onmouseover=function(){
  focus=true;
   this.style.visibility="visible";
 }
  showdiv.onmouseout=function(){
  focus=false;
  this.style.visibility="hidden";
 }
function bindToggle(index,flag){
  var showdiv= document.getElementById("nav3");
  var delayshow= function(){
  if(flag ==1 ){
   showdiv.style.visibility="visible";
   showdiv.style.top=index*32+"px";
  }else {
  if(!focus){
   showdiv.style.visibility="hidden";
  }  
  }
 }
 return function(){ 
 setTimeout(delayshow,150);
 } 
}
 var menu=document.getElementById("nav2").childNodes;
 var index=0;
 for(var i=0;i<menu.length;i++){
 if(1==menu[i].nodeType){
  menu[i].onmouseover= bindToggle.call(menu[i],index,1);
  menu[i].onmouseout= bindToggle.call(menu[i],index,0);
   index++;
 }  
 } 
</script>
</body>
</html>

指望本文所述对大家的javascript程序设计具备援救。

期待本文所述对我们的javascript程序设计具备帮忙。

您也许感兴趣的小说:

  • JavaScript兑现的舒张减少型菜单代码
  • JavaScript完结横向滑出的体系菜单功能
  • Javascript贯彻的简约右键菜单类
  • JavaScript轻便下拉菜单实例代码
  • JavaScript贯彻特别轻易实用的下拉菜单效果
  • JavaScript兑现带箭头标记的成千上万下拉菜单效果
  • JavaScript完成向右伸出的多如牛毛网页菜单功效
  • Javascript仿博客园娱乐频道鼠标悬停显示子菜单成效
  • javascript兑今后下拉列表中突显多级树形菜单的法子
  • javascript完毕多栏闭合展开式广告位菜单成效实例
  • JavaScript+CSS完结仿Mootools竖排弹性动画菜单功效

您或然感兴趣的篇章:

  • JavaScript完毕的伸展裁减型菜单代码
  • JavaScript贯彻横向滑出的文山会龙须菜单作用
  • Javascript兑现的简约右键菜单类
  • JavaScript简单下拉菜单实例代码
  • JavaScript兑现特别轻便实用的下拉菜单效果
  • JavaScript完结带箭头标记的数不完下拉菜单效果
  • JavaScript+CSS达成仿天猫市廛侧面网页菜单成效
  • Javascript仿乐乎娱乐频道鼠标悬停显示子菜单功效
  • javascript完成在下拉列表中展现多级树形菜单的格局
  • javascript落到实处多栏闭合展开式广告位菜单效率实例
  • JavaScript+CSS达成仿Mootools竖排弹性动画菜单作用

本文由六合联盟网发布于计算机网络,转载请注明出处:CSS达成仿天猫左边网页菜单效用,JavaScript落成向

关键词: