JavaScript实现向右伸出的多级网页菜单效果


Posted in Javascript onAugust 25, 2015

本文实例讲述了JavaScript实现向右伸出的多级网页菜单效果。分享给大家供大家参考。具体如下:

这里使用JavaScript实现向右伸出的多级网页菜单效果,鼠标放在左侧的主菜单上,右侧就伸展出二级菜单,基本没有美化,新手所写,欢迎指正,需要完善的地方还挺多。

运行效果截图如下:

JavaScript实现向右伸出的多级网页菜单效果

在线演示地址如下:

具体代码如下:

<!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 相关文章推荐
ExtJS 下拉多选框lovcombo
May 19 Javascript
jquery遍历checkbox的注意事项说明
Feb 21 Javascript
jquery实现从数组移除指定的值
Jun 24 Javascript
jQuery模拟黑客帝国矩阵效果实例
Jun 28 Javascript
JavaScript文本框脚本编写的注意事项
Jan 25 Javascript
Jquery $when done then的用法详解
May 20 Javascript
浅谈JavaScript的全局变量与局部变量
Jun 10 Javascript
关于JS变量和作用域详解
Jul 28 Javascript
解读ES6中class关键字
Nov 20 Javascript
通过实例讲解JS如何防抖动
Jun 15 Javascript
layui递归实现动态左侧菜单
Jul 26 Javascript
解决vue项目获取dom元素宽高总是不准确问题
Jul 29 Javascript
jquery+html5时钟特效代码分享(可设置闹钟并且语音提醒)
Mar 30 #Javascript
jquery实现动画菜单的左右滚动、渐变及图形背景滚动等效果
Aug 25 #Javascript
jquery实现的淡入淡出下拉菜单效果
Aug 25 #Javascript
iframe中子父类窗口调用JS的方法及注意事项
Aug 25 #Javascript
JavaScript+CSS实现仿天猫侧边网页菜单效果
Aug 25 #Javascript
14款经典网页图片和文字特效的jQuery插件-前端开发必备
Aug 25 #Javascript
jquery实现向下滑出的二级导航下滑菜单效果
Aug 25 #Javascript
You might like
ASP和PHP都是可以删除自身的
2007/04/09 PHP
thinkPHP框架动态配置用法实例分析
2018/06/14 PHP
使用Laravel中的查询构造器实现增删改查功能
2019/09/03 PHP
PHP连接MySQL数据库操作代码实例解析
2020/07/11 PHP
jQuery选择没有colspan属性的td的代码
2010/07/06 Javascript
js判断字符长度及中英文数字等
2014/03/19 Javascript
Linux下为Node.js程序配置MySQL或Oracle数据库的方法
2016/03/19 Javascript
BootStrap创建响应式导航条实例代码
2016/05/31 Javascript
JavaScript中的Array 对象(数组对象)
2016/06/02 Javascript
JavaScript中push(),join() 函数 实例详解
2016/09/06 Javascript
js实现随机点名小功能
2017/08/17 Javascript
js实现旋转的星空效果
2019/11/01 Javascript
JS中FormData类实现文件上传
2020/03/27 Javascript
JavaScript实现HSL拾色器
2020/05/21 Javascript
python中列表元素连接方法join用法实例
2015/04/07 Python
浅谈Python处理PDF的方法
2017/11/10 Python
Python多进程库multiprocessing中进程池Pool类的使用详解
2017/11/24 Python
Python中的Django基本命令实例详解
2018/07/15 Python
Python操作word常见方法示例【win32com与docx模块】
2018/07/17 Python
python程序变成软件的实操方法
2019/06/24 Python
Python爬虫动态ip代理防止被封的方法
2019/07/07 Python
python实现生成Word、docx文件的方法分析
2019/08/30 Python
postman和python mock测试过程图解
2020/02/22 Python
学习python需要有编程基础吗
2020/06/02 Python
Python图像识别+KNN求解数独的实现
2020/11/13 Python
如何在vscode中安装python库的方法步骤
2021/01/06 Python
amazeui模态框弹出后立马消失并刷新页面
2020/08/19 HTML / CSS
全球最大化妆品零售网站:SkinStore
2020/10/24 全球购物
文秘专业自荐信
2013/10/14 职场文书
家长评语和期望
2014/02/10 职场文书
办理房产证委托书
2014/09/18 职场文书
2015年爱国卫生工作总结
2015/04/22 职场文书
你会写请假条吗?
2019/06/26 职场文书
Apache压力测试工具的安装使用
2021/03/31 Servers
JavaScript+HTML实现学生信息管理系统
2021/04/20 Javascript
Go 语言下基于Redis分布式锁的实现方式
2021/06/28 Golang