js 无限下拉导航

最新推荐文章于 2022-05-29 20:58:24 发布
最新推荐文章于 2022-05-29 20:58:24 发布
阅读量1.4k 收藏 1
点赞数
分类专栏： javascript 文章标签： class border function menu stylesheet xhtml
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/YHC23/article/details/3962230
版权

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=gb2312" />
<meta http-equiv="content-language" content="zh-cn" />
<meta name="robots" content="all" />
<meta name="keywords" content="关键字描述" />
<meta name="description" content="站点描述" />
<meta name="author" content="顾振宇,zy.e@163.com" />
<meta name="copyright" content="版权所有" />
<link rel="stylesheet" type="text/css" title="通用样式" href="***.css" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="bookmark" href="/favicon.ico" type="image/x-icon" />
<title>css+js无限级菜单-w3css.com</title>
<style type="text/css">
<!--
*{ margin:0; padding:0; border:0;}
body{font:12px/130% verdana,geneva,arial,helvetica,sans-serif,宋体;}li{list-style:none;}
.clearfix:after{content:"&nbsp;";display:block;height:0;clear:both;visibility:hidden;}.clearfix{display:inline-block;}
a:link{ color:#000; text-decoration:none; }
a:visited{ color:#000; text-decoration:none; }
a:hover{ color:#000; text-decoration:none; }
.menu{ width:778px; height:26px; background:#eee; margin:0 auto;}
.menusel{ float:left;width:100px; position:relative; height:25px; background:#ddd; line-height: 25px; margin-left: 1px; *margin-left: 0px;_margin-left: -1px;}
.menusel h2{ font-size:12px; }
.menusel a{ display: block;text-align:center; width:100px;border:1px solid #a4a4a4; height:25px; border-bottom:1px solid #a4a4a4; position:relative; z-index:2;}
.menusel a:hover{ border:1px solid #a4a4a4; border-bottom:1px dashed #eeeeee; position:relative; z-index:2; height:25px;}
.ahover a{border-bottom:1px dashed #eeeeee; background:#eeeeee; }
.position{ position:absolute; z-index:1;}
.menusel ul{width:125px; background:#eee; border:1px solid #a4a4a4; margin-top: -1px; position:relative; z-index:1; display:none;}
.menusel .block{ display:block;}
.typeul li{border-bottom:1px dashed #a4a4a4;width:125px; position:relative; float:left; }
.typeul li a{ border:none;width:125px; }
.typeul li a:hover{ border:none; background:#ddd;}
.typeul{  margin-left:0;  }
.typeul ul{left:125px; top:0; position:absolute;}
.fli{ margin-left: -1px; border-left:#eeeeee solid 1px;}
.menusel .lli{ border:none; }
-->
</style>
<script type="text/javascript">document.execCommand("BackgroundImageCache", false, true);</script><!-- IE6背景图片闪烁问题  -->
</head>
<body>
<div class="menu">
<div id="menu1" class="menusel">
<h2><a href="">我是菜单1</a></h2>
<div class="position">
<ul class="clearfix typeul">
<li><a href="">我是菜单选项1-2</a></li>
<li><a href="">我是菜单选项1-2</a>
<ul>
<li class="fli"><a href="">我是菜单选项1-2-1</a></li>
<li class="lli"><a href="">我是菜单选项1-2-2</a>
</li>
</ul>
</li>
<li><a href="">我是菜单选项1-2</a></li>
<li class="lli"><a href="">我是菜单选项1-2</a></li>
</ul>
</div><!-- position -->
</div><!-- menusel -->
<div id="menu2" class="menusel">
<h2><a href="">我是菜单2</a></h2>
<div class="position">
<ul class="clearfix typeul">
<li><a href="">我是菜单选项2-2</a></li>
<li><a href="">我是菜单选项2-2</a>
<ul>
<li class="fli"><a href="">我是菜单选项2-2-1</a></li>
<li class="lli"><a href="">我是菜单选项2-2-2</a>
<ul>
<li class="fli"><a href="">我是菜单选项2-2-1</a></li>
<li class="lli"><a href="">我是菜单选项2-2-2</a>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="">我是菜单选项2-2</a></li>
<li class="lli"><a href="">我是菜单选项2-2</a></li>
</ul>
</div><!-- position -->
</div><!-- menusel -->
<div id="menu3" class="menusel">
<h2><a href="">我是菜单3</a></h2>
<div class="position">
<ul class="clearfix typeul">
<li><a href="">我是菜单选项3-2</a></li>
<li><a href="">我是菜单选项3-2</a>
<ul>
<li class="fli"><a href="">我是菜单选项3-2-1</a></li>
<li class="lli"><a href="">我是菜单选项3-2-2</a>
<ul>
<li class="fli"><a href="">我是菜单选项3-2-1</a></li>
<li class="lli"><a href="">我是菜单选项3-2-2</a>
<ul>
<li class="fli"><a href="">我是菜单选项3-2-1</a></li>
<li class="lli"><a href="">我是菜单选项3-2-2</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="">我是菜单选项3-2</a></li>
<li class="lli"><a href="">我是菜单选项3-2</a></li>
</ul>
</div><!-- position -->
</div><!-- menusel -->
</div><!-- menu -->
<script type="text/javascript">
for(var x = 1; x < 4; x++)
{
var menuid = document.getElementById("menu"+x);
menuid.num = x;
type();
}
function type()
{
var menuh2 = menuid.getElementsByTagName("h2");
var menuul = menuid.getElementsByTagName("ul");
var menuli = menuul[0].getElementsByTagName("li");
menuh2[0].onmouseover = show;
menuh2[0].onmouseout = unshow;
menuul[0].onmouseover = show;
menuul[0].onmouseout = unshow;
function show()
{
menuul[0].className = "clearfix typeul block"
}
function unshow()
{
menuul[0].className = "typeul"
}
for(var i = 0; i < menuli.length; i++)
 {
 menuli[i].num = i;
 var liul = menuli[i].getElementsByTagName("ul")[0];
  if(liul)
  {
  typeshow()
  }
 }
function typeshow()
{
menuli[i].onmouseover = showul;
menuli[i].onmouseout = unshowul;
}
function showul()
{
menuli[this.num].getElementsByTagName("ul")[0].className = "block";
}
function unshowul()
{
menuli[this.num].getElementsByTagName("ul")[0].className = "";
}
}
</script>
</body>
</html>

YHC23
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS 无限下拉菜单（JS 无限下拉菜单）
08-27
JS 无限下拉菜单 JS 无限下拉菜单 JS 无限下拉菜单 js下拉菜单 无限下拉菜单 JS 无限下拉菜单
使用Js实现一个简单的无限下拉功能
weixin_53405445的博客
10-26 1032
简单实现一个无限下拉功能
js实现无限下拉效果+判断当前可视窗口切换url
weixin_44409748的博客
05-29 545
我这个功能点是：文章页面用户下拉到底部之后，再重新往后面显示一篇文章，并且修改当前可视窗口（也就是当前页面文章的url）让用户看到更多的文章~ let data = []; //存放每次的新数据 var curPage = 0; //当前页数 let newUrl; //存放当前可视窗口的url let prevY = 0; //判断最后一次下拉的总长度 var request_url = ''; //请求的json地址 let orginal_url = window.location.pathna
javascript实现无限级级联下拉列表
03-17
NULL 博文链接：https://chenjia66804610.iteye.com/blog/576463
web页面通过ajax无限下拉
ximenxiafeng的专栏
06-09 1437
$(function(){                 var i = 0 ;                 $(window).scroll(function(){                     // 当滚动到最底部以上50像素时， 加载新内容                     if ($(document).height() - $(this).scrollTop
jQuery多级无限级导航下拉菜单代码
04-12
jQuery多级无限级导航下拉菜单代码, jQuery多级无限级导航下拉菜单代码是一款可智能判断有没有下级菜单列表的网站下拉菜单特效。 js代码 [removed] $(document).ready(function() { $("ul.nav li").hover...
jQuery多级无限级导航下拉菜单.zip
07-11
jQuery多级无限级导航下拉菜单
jQuery多级无限级导航下拉菜单代码.zip
07-11
js代码 [removed] $(document).ready(function() { $("ul.nav li").hover(function(){ ... $(this).addClass("on");...jQuery多级无限级导航下拉菜单代码是一款可智能判断有没有下级菜单列表的网站下拉菜单特效。
水平垂直无限下拉jQuery导航.zip
11-26
水平垂直无限下拉jQuery导航.zip
水平垂直下拉导航.zip
07-04
水平垂直下拉导航是一款支持无限向下延伸的jQuery导航菜单插件。
CSS+JS实现兼容性很好的无限级下拉菜单
laligela2012的专栏
06-25 203
再发一个关于多级下拉菜单的实例，在IE8下测试没问题，其他没测，请测试后决定是否使用。   CSS+JS实现兼容性很好的无限级下拉菜单 *{ margin:0; padding:0; border:0;} body{font:12px/130% verdana,geneva,arial,helvetica,sans-serif,宋体;}li{list-style:non
JS列表数据无限下拉
Promic的专栏
12-21 426
function getEL(id){return typeof id == "string" ? document.getElementById(id) : id} function getAbsPoint (e){ e = getEL(e); var x = e.offsetLeft; var y = e.offsetTop; while(
利用js实现列表向上无限滚动
杨雪枫的博客
06-19 9045
先来一张效果图 html <div class="transdata1"> <ul class="tody-table-header2"> <li>商品</li> <li>数量（kg）</li> <li>单价（元）</li> ...
js实现html无限下拉菜单,通用无限极下拉菜单的实现代码
weixin_42514709的博客
06-04 716
下拉菜单在我开发中经常遇到，但是没个项目都需要从新编写，改起来虽然简单但是很麻烦，我这个人还是比较懒的，今天有时间把我以前的项目开发中的菜单整理一遍，编写一个通用版本，以后就不需要那么麻烦了。特点今天整理的菜单是由jquery+css开发有如下特点：一、通用性强以前在用的一个下拉菜单有个问题，需要对主导航和子菜单进行单独的设置，比如，二级菜单是class="first_menu",三级菜单是cla...
找到个无限级下拉导航菜单
weixin_34332905的博客
11-08 93
找到个无限级下拉导航菜单 附件：http://down.51cto.com/data/2364026 本文转自许琴 51CTO博客，原文链接：http://blog.51cto.com/xuqin/1354420，如需转载请自行联系原作者 ...
HTML页面实现鼠标无限滚动下拉
就牙白
09-25 7161
做一个日志在线查看的功能，需要无限下拉的功能。 前提条件：页面必须有滚动条 贴一下代码。 前台页面： &lt;!-- 显示内容 --&gt; &lt;div class="container" id="container"&gt;&lt;/div&gt; &lt;!-- 显示提示信息 --&gt; &lt;div class="nodata" id="noda
用JS实现的完美无限级联下拉菜单
热门推荐
haonanhai1688的专栏
05-19 2万+
我曾经用JS实现过自认为挺完美的纯客户端无限及联下拉菜单，今天翻出来是想借个话题交些ASP.NET的朋友，希望有朋友可以给我辛酸的ASP.NET之路一点帮助。 该菜单看上去挺完美的地方 1）通用：支持IE/Mozilla，其他未测试 2）方便：前端调用极其简单，单函数调用，一行代码搞定一个菜单 3）功能丰富的有点BT,可能还有些功能我忘记了，根据需要该JS函数需要2-9个参数： 4）支持无限级联；
js无限下拉滚动（完整版）
zhangzuruiqqq的博客
04-16 789
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> <link rel=
JavaScript 网页导航栏下拉菜单
最新发布
06-07
好的，我可以帮你解答关于 JavaScript 网页导航栏下拉菜单的问题。 首先，你需要在 HTML 中创建一个导航栏，可以使用 `<nav>` 标签来创建。然后，在导航栏中添加一个下拉菜单的按钮，可以使用 `<button>` 标签，并添加一个点击事件。 接下来，你可以使用 JavaScript 来控制下拉菜单的显示和隐藏。你可以使用 `classList` 属性来添加或移除一个元素的 class，从而控制元素的样式。 下面是一个简单的示例代码： HTML 代码： ```html <nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">新闻</a></li> <li><a href="#">产品</a></li> <li> <button id="dropdown-btn">更多</button> <ul id="dropdown-menu"> <li><a href="#">关于我们</a></li> <li><a href="#">联系我们</a></li> </ul> </li> </ul> </nav> ``` JavaScript 代码： ```javascript // 获取下拉菜单按钮和菜单元素 var dropdownBtn = document.getElementById("dropdown-btn"); var dropdownMenu = document.getElementById("dropdown-menu"); // 添加点击事件 dropdownBtn.addEventListener("click", function() { // 切换菜单的显示/隐藏状态 dropdownMenu.classList.toggle("show"); }); // 在文档其他位置点击时，隐藏菜单 window.addEventListener("click", function(event) { if (!event.target.matches("#dropdown-btn")) { dropdownMenu.classList.remove("show"); } }); ``` 在上面的代码中，我们使用 `classList.toggle()` 方法来切换菜单元素的 `show` class，从而控制菜单的显示和隐藏。同时，我们还添加了一个窗口点击事件，当用户在文档的其他位置点击时，隐藏菜单。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值