js实现多级菜单

最新推荐文章于 2023-05-13 21:13:58 发布
最新推荐文章于 2023-05-13 21:13:58 发布
阅读量4.7k 收藏 1
点赞数
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012637258/article/details/78321049
版权

html:

<ul class="nav">
  <li><h3>我的网站</h3>
    <ul>
        <li><h3>2级分类</h3>
          <ul>
            <li><h3>3级分类</h3>
              <ul>
                <li><h3>4级分类</h3>
                  <ul>
                    <li><h3>5级分类</h3></li>
                    <li><h3>5级分类</h3></li>
                    <li><h3>5级分类</h3></li>
                    <li><h3>5级分类</h3></li>
                  </ul>
                </li>
                <li><h3>4级分类</h3></li>
                <li><h3>4级分类</h3></li>
                <li><h3>4级分类</h3></li>
              </ul>
            </li>
            <li><h3>3级分类</h3></li>
            <li><h3>3级分类</h3></li>
            <li><h3>3级分类</h3></li>
          </ul>
        </li>
        <li><h3>2级分类</h3>
          <ul>
            <li><h3>3级分类</h3></li>
            <li><h3>3级分类</h3></li>
            <li><h3>3级分类</h3></li>
            <li><h3>3级分类</h3></li>
          </ul>
        </li>
        <li><h3>2级分类</h3>
          <ul>
            <li><h3>3级分类</h3></li>
            <li><h3>3级分类</h3></li>
            <li><h3>3级分类</h3></li>
            <li><h3>3级分类</h3></li>
          </ul>
        </li>
        <li><h3>2级分类</h3>
          <ul>
            <li><h3>3级分类</h3></li>
            <li><h3>3级分类</h3></li>
            <li><h3>3级分类</h3></li>
            <li><h3>3级分类</h3></li>
          </ul>
        </li>
    </ul>
  </li>
  <li><h3>我的网站</h3>
    <ul>
        <li><h3>2级分类</h3>
          <ul>
            <li><h3>3级分类</h3></li>
            <li><h3>3级分类</h3></li>
            <li><h3>3级分类</h3></li>
            <li><h3>3级分类</h3></li>
          </ul>
        </li>
        <li><h3>2级分类</h3>
          <ul>
            <li><h3>3级分类</h3></li>
            <li><h3>3级分类</h3></li>
            <li><h3>3级分类</h3></li>
            <li><h3>3级分类</h3></li>
          </ul>
        </li>
        <li><h3>2级分类</h3>
          <ul>
            <li><h3>3级分类</h3></li>
            <li><h3>3级分类</h3></li>
            <li><h3>3级分类</h3></li>
            <li><h3>3级分类</h3></li>
          </ul>
        </li>
        <li><h3>2级分类</h3>
          <ul>
            <li><h3>3级分类</h3></li>
            <li><h3>3级分类</h3></li>
            <li><h3>3级分类</h3></li>
            <li><h3>3级分类</h3></li>
          </ul>
        </li>
    </ul>
  </li>
  <li><h3>我的网站</h3>
    <ul>
        <li><h3>2级分类</h3>
          <ul>
            <li><h3>3站长素材</h3></li>
            <li><h3>3级分类</h3></li>
            <li><h3>3级分类</h3></li>
            <li><h3>3级分类</h3></li>
          </ul>
        </li>
        <li><h3>2级分类</h3>
          <ul>
            <li><h3>3级分类</h3></li>
            <li><h3>3级分类</h3></li>
            <li><h3>3级分类</h3></li>
            <li><h3>3级分类</h3></li>
          </ul>
        </li>
        <li><h3>2级分类</h3>
          <ul>
            <li><h3>3级分类</h3></li>
            <li><h3>3级分类</h3></li>
            <li><h3>3级分类</h3></li>
            <li><h3>3级分类</h3></li>
          </ul>
        </li>
        <li><h3>2级分类</h3>
          <ul>
            <li><h3>3级分类</h3></li>
            <li><h3>3级分类</h3></li>
            <li><h3>3级分类</h3></li>
            <li><h3>3级分类</h3></li>
          </ul>
        </li>
    </ul>
  </li>
  <li><h3>我的网站</h3>
    <ul>
        <li><h3>2级分类</h3>
          <ul>
            <li><h3>3级分类</h3></li>
            <li><h3>3级分类</h3></li>
            <li><h3>3级分类</h3></li>
            <li><h3>3级分类</h3></li>
          </ul>
        </li>
        <li><h3>2级分类</h3>
          <ul>
            <li><h3>3级分类</h3></li>
            <li><h3>3级分类</h3></li>
            <li><h3>3级分类</h3></li>
            <li><h3>3级分类</h3></li>
          </ul>
        </li>
        <li><h3>2级分类</h3>
          <ul>
            <li><h3>3级分类</h3></li>
            <li><h3>3级分类</h3></li>
            <li><h3>3级分类</h3></li>
            <li><h3>3级分类</h3></li>
          </ul>
        </li>
        <li><h3>2级分类</h3>
          <ul>
            <li><h3>3级分类</h3></li>
            <li><h3>3级分类</h3></li>
            <li><h3>3级分类</h3></li>
            <li><h3>3级分类</h3></li>
          </ul>
        </li>
    </ul>
  </li>
</ul>


css:

*{margin: 0; padding: 0;}
body{ font-size: 12px; }
li{ list-style: none;}
ul.nav li{ width: 200px; text-align:center;}
ul.nav > li{ float: left; margin-right:10px;}
ul.nav li h3{height: 40px; line-height: 40px;}
ul.nav > li > h3{ background: #72a7ff;}
ul.nav > li > ul > li h3{ background: #ffd9d9;}
ul.nav > li h3:hover,.choice{ background: #ffc0c0!important;}
ul > li > ul{ display: none;}
ul > li.on > ul{ display: block;}
ul.nav li{ position: relative;}
ul.nav > li > ul > li ul{ position:  absolute; top: 0; right: -200px;}
ul.nav span.sub{ position: absolute; display: block; right:10px; top: 0; width: 10px; height: 40px; background: url(images/arrows.png) no-repeat center center;}


js:

$(document).ready(function() {
        $("ul.nav li").hover(function(){
            $(this).addClass("on");


        },
        function(){
            $(this).removeClass("on");


        })
    });


    $(document).ready(function() {
        $("ul.nav li").hover(function(){
            $(this).parent("ul").siblings("h3").addClass("choice");


        },
        function(){
            $(this).parent("ul").siblings("h3").removeClass("choice");
        })
    });


    $(document).ready(function() {       
            if ($("ul.nav li").find("ul") .html()!="") {
                $("ul.nav li").parent("ul").siblings("h3").append("<span class='sub'></span>");                
            }
    });


安忘
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript案例之多级菜单栏
再中二也会被现实打败
10-10 532
JavaScript案例之多级菜单栏
JS实现多级竖向菜单
12-07
JS实现多级竖向菜单，全部用UI、LI标记实现
多级联动菜单（js）
qq_59517599的博客
07-15 1527
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>多.
js多级菜单样式
fengxinzi_jing的专栏
03-15 2406
-----------------------------------------------------------------------index.html http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd"> http://www.w3.org/1999/xhtml" xml:lang="en"> jquery横向下拉菜单导航
Javascript多级菜单（一）
weixin_33743880的博客
11-07 130
一、开篇 一直都苦于找不到合适的菜单，最近自己做了一个，感觉收获不小，拿出来分享。先看效果： #container{margin:0px auto;height:50px;font-size:14px;font-family:Arial;font-weight:bold;} #container ul,#container ul li{padding:0px;margin:0px...
基于JavaScript实现多级菜单效果
10-19
本篇文章将详细介绍如何使用JavaScript实现一个功能完备的多级菜单。 首先，我们来看HTML结构。在提供的代码片段中，`<ul>`元素被用来构建菜单的基础结构。每个`<li>`元素代表一级菜单项，而二级、三级甚至四级菜单...
纯JS实现多级菜单组件
04-20
做项目时用纯JS写了一个简单的通过配置渲染多级菜单的组件，非常简单
JS实现多级菜单中当前菜单不随页面跳转样式而发生变化
10-19
通过使用jQuery，我们可以轻松地实现多级菜单在页面跳转后保持当前选中状态的效果，提高用户导航的便利性。这种方法不需要服务器端的额外工作，只依赖于客户端的JavaScript，因此对于大多数现代Web应用来说都是一个...
vue+ java 实现多级菜单递归效果
08-25
我们使用 Vue 官方示例代码、Java 封装数据、递归算法、Vue 组件、CSS 样式、JavaScript 代码和 Element-UI 库来实现多级菜单递归效果。我们希望本文能够帮助读者更好地理解 Vue 和 Java 的使用方法，并且能够帮助...
Javascript实现网页上的多级菜单
zgqtxwd的专栏
04-24 740
body { font-family: "Georgia", "Tahoma", "宋体"; font-size: 10.8pt; background-image: url(bground.gif); scrollbar-face-color: #eeeeee; scrollbar-shadow-color: #9F9F9F; scrollbar-highlight-co
实用js+css多级树形展开效果导航菜单
06-15
js+css制作折叠展开的多级树形导航菜单，带多选框效果，经典实用。已经用在程序里了。资源来自：http://www.zzjs.net/html/2105.html
html js树形图多级菜单美观可配置
01-22
html js树形图，美观大方，界面友好，可配置，也可自己重新调整样式，美观的菜单列表，多级列表，三级及三级以上列表，可自行配置
js实现二级菜单
05-31
js实现导航栏二级菜单，极丑，极简单，有详细的中文注释，主要是说明原理供自己备用，感兴趣者、初学者可下载，高手飘过。
js实现网页多级级联菜单代码
10-23
主要介绍了js实现网页多级级联菜单代码,涉及javascript基于数组动态构造多级级联菜单的技巧,非常具有实用价值,需要的朋友可以参考下
漂亮的JS多级树型下拉菜单
01-27
漂亮的JS多级树型下拉菜单。 漂亮的JS多级树型下拉菜单
JavaScript 多级联动浮动菜单 (第二版)
cloudgamer
08-10 184
上一个版本（第一版请看这里）基本实现了多级联动和浮动菜单的功能，但效果不是太好，使用麻烦还有些bug，实用性不高。 这次除了修改已发现的问题外，还对程序做了大幅调整和改进，使程序实用性更高，功能更强大。   详细程序说明和效果预览请看这里 完整实例下载      程序原理程序最关键的地方是多级联动，先大概说明一下：首先第一级的菜单元素整理好后，从他们开始，当某个菜单元素触发显示下级菜单时...
原生js手动实现一个多级树状菜单效果（高度可过渡变化） + 模拟el-menu组件实现（简单版）
pscool的博客
05-13 2381
效果图 代码 要点 需要注意这个dom结构， 过渡动画一定要有开始和结束值才能产生动画，并且在js里面修改的时候，不能连着修改，要把第二次修改放到setTimeout里面 为了让菜单能够不是一次性过渡（让它可以一直产生过渡动画），需要在动画结束后，清理掉设置的高度，这个设置的高度只需要在动画的时候生效。 <style lang="scss" scoped> @import url(//at.alicdn.com/t/c/font_4065865_kb7oyb2wje9.css); ul,
js实现二级菜单和三级菜单
m0_69674158的博客
05-19 510
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/base.css"/> <style type="text/css"> .wrapper{ width: 500px; backgrou..
原生js多级菜单启示录
qq_38384536的博客
06-12 355
二级菜单完整版 *{ margin:0; padding:0; font-size:14px;} ul,li,ol{ list-style:none} a{ text-decoration:none;} .arrow{ border:5px solid transparent; font-size:0px; border-top-color:#fff; position:absolut
vue.js 多级菜单
最新发布
10-23
在Vue.js中实现多级菜单的方法有很多。以下是一种常见的实现方式： 1. 首先，我们需要定义一个包含菜单项的数据结构。可以使用嵌套的数组或对象来表示多级菜单的层次关系。 2. 使用Vue的v-for指令遍历数据结构，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值