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 相关文章推荐
jquery 单击li防止重复加载的实现代码
Dec 24 Javascript
jQuery修改CSS伪元素属性的方法
Jul 30 Javascript
Bootstrap每天必学之标签与徽章
Nov 27 Javascript
jqGrid用法汇总(全经典)
Jun 28 Javascript
老生常谈ES6中的类
Jul 31 Javascript
微信小程序自定义模态对话框实例详解
Aug 16 Javascript
二维码图片生成器QRCode.js简单介绍
Aug 18 Javascript
vue 组件 全局注册和局部注册的实现
Feb 28 Javascript
Vue数据监听方法watch的使用
Mar 28 Javascript
基于mpvue的小程序项目搭建的步骤
May 22 Javascript
JavaScript接口实现方法实例分析
May 16 Javascript
用云开发Cloudbase实现小程序多图片内容安全监测的代码详解
Jun 07 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
PHP开发文件系统实例讲解
2006/10/09 PHP
PHP中对用户身份认证实现两种方法
2011/06/04 PHP
浅析php中三个等号(===)和两个等号(==)的区别
2013/08/06 PHP
php经典算法集锦
2015/11/14 PHP
提高网站信任度的技巧
2008/10/17 Javascript
JavaScript实现网页图片等比例缩放实现代码及调用方式
2013/02/25 Javascript
为jquery的ajaxfileupload增加附加参数的方法
2014/03/04 Javascript
js中的setInterval和setTimeout使用实例
2014/05/09 Javascript
详解JavaScript中void语句的使用
2015/06/04 Javascript
AngularJS入门教程之ng-class 指令用法
2016/08/01 Javascript
js实现文字超出部分用省略号代替实例代码
2016/09/01 Javascript
在 Angular2 中实现自定义校验指令(确认密码)的方法
2017/01/23 Javascript
详解nodejs中的process进程
2017/03/19 NodeJs
微信小程序 wx.request方法的异步封装实例详解
2017/05/18 Javascript
Angular 4依赖注入学习教程之FactoryProvider配置依赖对象(五)
2017/06/04 Javascript
基于Bootstrap框架菜鸟入门教程(推荐)
2017/09/17 Javascript
解决webpack无法通过IP地址访问localhost的问题
2018/02/22 Javascript
JavaScript实现的简单Tab点击切换功能示例
2018/07/06 Javascript
Vue分页器实现原理详解
2019/06/28 Javascript
layer.alert自定义关闭回调事件的方法
2019/09/27 Javascript
js实现打字小游戏
2019/12/17 Javascript
Javascript原生ajax请求代码实例
2020/02/20 Javascript
详解vue-router的Import异步加载模块问题的解决方案
2020/05/13 Javascript
[02:05]DOTA2完美大师赛趣味视频之看我表演
2017/11/18 DOTA
python的Template使用指南
2014/09/11 Python
介绍Python中的文档测试模块
2015/04/28 Python
Python制作数据导入导出工具
2015/07/31 Python
你眼中的Python大牛 应该都有这份书单
2017/10/31 Python
pytorch实现从本地加载 .pth 格式模型
2020/02/14 Python
车间班组长的职责
2013/12/13 职场文书
本科应届生自荐信
2014/06/29 职场文书
2014年安全管理工作总结
2014/12/01 职场文书
2016公司中秋节寄语
2015/12/07 职场文书
JS异步堆栈追踪之为什么await胜过Promise
2021/04/28 Javascript
Java框架入门之简单介绍SpringBoot框架
2021/06/18 Java/Android
Redis实现一个账号只能登录一个设备
2022/04/19 Redis