JS抽屉式三级菜单应用鼠标移动时显示

最新推荐文章于 2022-05-27 18:52:25 发布
最新推荐文章于 2022-05-27 18:52:25 发布
阅读量281 收藏
点赞数
文章标签： 应用服务器 CSS Flash jQuery XML ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chensijie/article/details/83771737
版权
功能实现，但要应用到项目中还是要修改些的，样式最少要修改
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script src="./js/jquery-1.4.2.js" type=text/javascript></script>

<style type="text/css">
ul {
padding: 0;
margin: 0;
list-style: none;
}
li {
float: left;
width: 160px;
}
li ul {
display: none;
top: 20px;
}
li:hover ul, li.over ul {
display: block;


}
.two ul{

overflow: visible;
display: block;
height: 66px;
z-index: 128;
opacity: 1;


}
.two ul li{
overflow: hidden;
display: block;
height: 0px;
z-index: 60;
opacity: 0.0151515;
display:none;
}
ul li a{
display:block;
font-size:12px;
border: 1px solid #ccc;
padding:3px;
text-decoration: none;
color: #777;
}
ul li a:hover{
background-color:#f4f4f4;
}
.level3
{
margin:0;padding:0;position:absolute;
top:37px;
left:170px;
display:none;
}
.level3 li
{
margin:0;
padding:0;
display:block;
border:solid 1px red;
}
</style>
<script type="text/javascript">
$(document).ready(function ()
{
//二级菜单和三级菜单隐藏，并且加上isopen 为false的属性
$('.level2').attr('isopen','false');
$('.level3').attr('isopen','false');

//一级菜单鼠标经过时
$('.level1>li').mouseover(
function ()
{ //如果该一级菜单下的二级菜单的isopen为false
if($(this).children(".level2").attr('isopen')=='false')
{
//所有该一级菜单下”之外“的二级菜单隐藏，加上isopen为false
$(".level2:not($(this).children('.level2'))").attr('isopen','false').slideUp("fast");
//所有三级菜单隐藏，加上isopen为false
$(".level3").attr('isopen','false').slideUp("fast");

//该一级菜单下的二级菜单弹出，加上isopen为true
$(this).children(".level2").attr('isopen','true').slideDown("fast");
}
})

//二级菜单鼠标经过时
$('.level2>li').mouseover(
function ()
{ //如果该二级菜单下的三级菜单的isopen为false
var offse=$(this).offset();
$(this).children(".level3").css('left',offse.left+161+'px');
$(this).children(".level3").css('top',offse.top+'px');
if($(this).children(".level3").attr('isopen')=='false')
{
//所有该二级菜单下”之外“的三级菜单隐藏，加上isopen为false
$(".level3:not($(this).children('.level3'))").attr('isopen','false').slideUp("fast");


//该二级菜单下的三级菜单弹出，加上isopen为true
$(this).children(".level3").attr('isopen','true').slideDown("fast");

}
})
//无下级菜单鼠标经过时
$('.levelno').mouseover(
function ()
{
//二级菜单和三级菜单隐藏，并且加上isopen 为false的属性
$(".level2").attr('isopen','false').slideUp("fast");
$(".level3").attr('isopen','false').slideUp("fast");
})
})
//function show(obj){
//$("#"+obj).css('display','block'); //显示
//}
//function hide(obj){
//$("#"+obj).css('display','none'); //隐藏
//}
//function select(obj){
// if (obj!='false') {
// $("#" + obj).css('display', 'none');
// return obj= 'false';
// }else{
// $("#"+obj).css('display','block');
// return obj='true';
// }
//}
//$(document).ready(function(){
// //alert('111');
//
$.each(navroot,function(){

$(this).mouseover(function(e){
$(this).nextAll().slideDown("normal");
})
$(this).mouseout(function(){

var twonavroot =$(".two");

$.each(twonavroot,function(){

$(this).mouseover(function(e){

$(this).nextAll().slideDown("normal");
})
$(this).mouseout(function(){


var threenavroot =$(this).nextAll();
$.each(threenavroot,function(){
$(this).mouseover(function(e){

$(this).parent().slideDown("normal");
})
$(this).mouseout(function(){
$(this).slideUp("normal");
});
});
// navroot.nextAll().slideUp("normal");
// $(this).nextAll().slideUp("normal");

});
});

});

});
//
//
// var navroot = $(".first");
// $.each(navroot,function(){
//
// $(this).hover(function(){
// $(this).nextAll().slideDown("normal");
//
//
//
// //鼠标滑过查找li下面的第一个ul然后显示；
// },function(){
// var navrootnext=$(this).nextAll();
//
// $.each(navrootnext,function(){
// $(this).show();
// $(this).hover(function(){
// $(this).nextAll().slideDown("normal");},
// function(){
// $(this).nextAll().slideUp("normal");//鼠标离开隐藏li下面d的ul；
// $(this).slideUp("normal");
// });
//
// });
// //鼠标离开隐藏li下面d的ul；
// });
//
// });
// var twonavroot = $(".two");
//
// $.each(twonavroot,function(){
//
// $(this).hover(function(){
// $(this).nextAll().slideDown("normal");
//
//
//
// //鼠标滑过查找li下面的第一个ul然后显示；
// },function(){
// var navrootnext=$(this).nextAll();
//
// $.each(navrootnext,function(){
// $(this).show();
// $(this).hover(function(){
// $(this).nextAll().slideDown("normal");},
// function(){
// $(this).nextAll().slideUp("normal");//鼠标离开隐藏li下面d的ul；
// $(this).slideUp("normal");
// });
//
// });
// //鼠标离开隐藏li下面d的ul；
// });
//
// });
//
//});
</script>
</head>
<body>
<ul id="nav" class="level1">
<li class="levelno"><a href="" >首页 </a></li>
<li>
<a href="#" class="first" >产品介绍</a>
<ul class="level2">
<li><a href="" class="two" >CSS产品介绍>></a>
<ul class="level3">
<li><a href="#">导航菜单</a></li>
<li><a href="#">浏览器</a></li>
<li><a href="#">层与布局</a></li>
<li><a href="#">jquery</a></li>
<li><a href="#">mootools</a></li>
<li><a href="#">prototype</a></li></ul>
</li>

<li><a href="" class="two">DOM产品介绍>></a>
<ul class="level3"><li><a href="">DOM产品介绍1</a></li>
<li><a href="">DOM产品介绍2</a></li>
<li><a href="">DOM产品介绍3</a></li>
<li><a href="">DOM产品介绍4</a></li>
<li><a href="">DOM产品介绍5</a></li>
<li><a href="">DOM产品介绍6</a></li></ul>
</li>
<li><a href="" class="two">XML产品介绍>></a>
<ul class="level3"><li><a href="">XML产品介绍1</a></li>
<li><a href="">XML产品介绍2</a></li>
<li><a href="">XML产品介绍3</a></li>
<li><a href="">XML产品介绍4</a></li>
<li><a href="">XML产品介绍5</a></li></ul>
</li>
<li><a href="" class="two" >Flash产品介绍>></a>
<ul class="level3">
<li><a href="">Flash产品介绍1</a></li>
<li><a href="">Flash产品介绍2</a></li>
<li><a href="">Flash产品介绍3</a></li>
<li><a href="">Flash产品介绍4</a></li>
<li><a href="">Flash产品介绍5</a></li>
<li><a href="">Flash产品介绍6</a></li></ul>
</li>
</ul>
</li>
<li><a href="#" class="first">样式</a>

<ul class="level2">
<li><a href="" class="two">XHTML样式>></a>
<ul class="level3">
<li><a href="">XHTML样式1</a></li>
<li><a href="">XHTML样式2</a></li>
<li><a href="">XHTML样式3</a></li>
<li><a href="">XHTML样式4</a></li>
<li><a href="">XHTML样式5</a></li>
</ul>
</li>
<li><a href="" class="two">XML样式>></a>
<ul class="level3">
<li><a href="">XML样式1</a></li>
<li><a href="">XML样式2</a></li></ul>
</li>
<li><a href="" class="two">CSS样式>></a>
<ul class="level3">
<li><a href="">CSS样式1</a></li>
<li><a href="">CSS样式2</a></li>
<li><a href="">CSS样式3</a></li></ul>
</li>
<li><a href="" class="two">jquery样式>></a></li>
<ul class="level3">
<li><a href="" class="two">tree样式</a></li>
<li><a href="" class="two">dome样式</a></li>
<li><a href="" class="two">stytle样式</a></li>
<li><a href="" class="two">coclor样式</a></li>
<li><a href="" class="two">abbr样式</a></li></ul>
</ul>
</li>
<li><a href="#" class="first">服务</a>
<ul class="level2">
<li><a href="" class="two">前台在线服务>></a>
<ul class="level3">
<li><a href="">前台在线服务1</a></li>
<li><a href="">前台在线服务2</a></li>
<li><a href="">前台在线服务3</a></li></ul>
</li>
<li ><a href="" class="two">网页技术服务>></a>
<ul class="level3">
<li ><a href="">网页技术服务1</a></li>
<li ><a href="">网页技术服务2</a></li>
<li ><a href="">网页技术服务3</a></li>
<li ><a href="">网页技术服务4</a></li></ul>
</li>
<li ><a href="" class="two">UI技术服务</a></li>
<li ><a href="" class="two">FLASH技术服务</a></li>
</ul>
<li class="levelno"><a href="" >交流 </a></li>
</li>
</ul>


</body>
</html>
chensijie
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【开发】抽屉式菜单jQuery.mmenu
小拾一的博客
06-01 770
【软件名称】 jQuery.mmenu【软件描述】 jQuery.mmenu 实现了类似手机上经常使用的抽屉式菜单 【下载链接】 链接：https://pan.baidu.com/s/1gNhpgH0Bj9_m-Ii9iJcFrw 密码：rjff 在学习中有不懂迷茫的童鞋们可以加我一起交流学习（联系方式看主页个签），无论你是大牛还是小白，是想转行还是想入行都可以来...
JavaScript实现鼠标滑过高亮显示纵向3级浅绿色的导航菜单源码
05-18
JavaScript实现鼠标滑过高亮显示纵向3级浅绿色的导航菜单源码
jquery做的抽屉式，左边导航菜单，
06-22
jquery做的抽屉式，左边导航菜单，兼容Firefox，IE和2345王牌浏览器，其他的应该也都支持
网站抽屉菜单（jquery实现）
09-08
网站抽屉菜单（jquery实现）。JS 网站 抽屉菜单 jquery 导航。javascript
jQuery抽屉式菜单列表代码.zip
07-11
jQuery抽屉式菜单列表代码是一款蓝色的抽屉式分类导航点击下拉展开菜单列表。
winform 左侧抽屉式菜单
06-04
"winform 左侧抽屉式菜单"是一个典型的应用场景，它模仿了移动应用中的抽屉式导航，使得用户可以在不占据主窗口空间的情况下访问多个功能选项。下面我们将深入探讨如何利用C#语言和WinForm控件实现这一设计。 首先...
抽屉式菜单
01-09
抽屉式菜单是一种常见的UI设计模式，尤其在移动应用和响应式网页设计中广泛使用。它通常隐藏在屏幕边缘，用户可以通过滑动或点击特定按钮来展开，展示更多的功能选项或者内容。抽屉式菜单的设计理念是节省屏幕空间，...
Qt 实现抽屉式菜单
10-26
抽屉式菜单，也称为侧滑菜单或滑出式菜单，常见于移动应用设计中，允许用户从屏幕边缘滑动以显示附加的操作选项。 首先，理解Qt的窗口系统是至关重要的。Qt中的窗口部件（QWidgets）构成了UI的基础，而抽屉式菜单...
css3抽屉式菜单按钮鼠标悬停动画特效
06-05
这种效果通常用于创建响应式的导航菜单，当用户鼠标悬停或点击时，菜单会如同抽屉一样滑出，提供更多的链接选项。在“css3抽屉式菜单按钮鼠标悬停动画特效”这个项目中，我们将深入探讨这一特效的实现方法。 首先，...
jQuery左侧栏抽屉式导航菜单代码
06-05
基于jQuery+css3制作的左侧栏抽屉式导航菜单代码，非常漂亮的网站左侧展开收缩导航栏特效，展开时还有好看的滑出动画过程。
jQuery抽屉式收缩展开下拉菜单列表代码
11-08
下拉式菜单，jq和js实现，直接下载解压打开即可。。。。。
鼠标悬停抽屉效果
09-14
鼠标悬停抽屉效果
三级菜单的实现
dsh的博客
05-24 3143
三级菜单的实现 三级菜单的实现与二级菜单相类似 实现方法有 jQuery js css  html代码布局如下   首页   课程大厅   学习中心 +                 前端开发 +                    javascript            css            jquery                  
jq实现多层级抽屉菜单栏
qq_44472790的博客
09-19 483
html部分 <div class="middle"> <div class="leftMenu"> <div class="topMenu"> <p class="menuTitle">中国美食榜单</p> </div> <div class="menu_list"> <ul></ul> </div> </div> </div>
jquery纵向抽屉式导航栏
weixin_30656145的博客
12-03 207
<!DOCTYPE html> <html> <head> <script src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"> </script> <script> $(document).ready(function(){ $("....
关于js实现二级导航栏的总结
蓝猫爱睡觉
02-23 2748
标题 关于js实现二级导航栏的总结 此篇为个人实现后的个人总结 1.所谓二级导航栏，就是在ul li 标签中嵌套一个ul li标签 但是THML+CSS实现不了导航的隐藏与显示，因此要靠js来实现 当我点击的时候，二级导航才显示出来，当我点击另一个的时候，隐藏其他的，再把当前我点击的显示出来 因此用JavaScript中的onclick属性放在第一级的li标签中 然后通过js获取下一级ul的 id...
jQuery实现下拉菜单、折叠菜单、淡入淡出等特效的方法
weixin_43889695的博客
11-08 685
show()/hide() 显示/隐藏，可以接收两个参数，一是持续时间 ，而是回调函数 slide() 滑动 slideUp(,); //收起 slideDowm(,) //展开 slideToggle(,) //切换，有则 slide( , )可以接收两个参数，第一个参数为滑出的时间，类似定时器，第二个参数是一个回调函数，当动画执行完毕之后，会执行该函数 slideDowm(,); //向...
用jquery编写折叠菜单
m0_53911328的博客
05-27 1376
折叠菜单 编写网页，设置CSS完成折叠菜单的结构和样式设置。 通过层级选择器、基本过滤选择器以及查找的方法获取指定的元素对象。 CSS页面代码： <style> *{ margin: 0; padding: 0; } ul li{ list-style: none; } .menu{ width: 150px; margin: 30px 500px; bo.
html左侧三级下拉列表抽屉式
最新发布
08-12
然后，为每个二级菜单项添加一个hover伪类的样式，当鼠标悬停在二级菜单项上时，显示相应的三级菜单。三级菜单的样式可以通过嵌套的ul和li元素来实现。 例如，HTML代码可以是这样的： ```html 一级菜单1 二级...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值