使用html和jquery实现左侧可收缩导航栏

最新推荐文章于 2024-07-23 16:23:26 发布
最新推荐文章于 2024-07-23 16:23:26 发布
阅读量7.3k 收藏 4
点赞数 1
分类专栏： 前端 文章标签： jquery实现左侧导航栏收缩
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/matengbing/article/details/78599166
版权

实现效果如下：

html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="../static/bootstrap-3.3.7-dist/css/bootstrap.css" >
    <link rel="stylesheet" type="text/css" href="../static/css/nav-left.css" >
    <script src="../static/js/jquery-3.2.1.min.js"></script>
    <script src="../static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

</head>
<body>
    <div class="nav_left">
        <div class="nav_left_main one_level_div">
            <div class="one_div">
                 主页
            <img src=../static/images/arrow.png>
            </div>

        </div>
        <div class="nav_left_about one_level_div">
            <div class="one_div">
                 关于
            <img src=../static/images/arrow.png>
            </div>
        </div>
        <div class="nav_left_about one_level_div">
            <div class="one_div">
                计费
                <img src=../static/images/arrow.png>
            </div>
            <div class="nav_left_about one_leve2_div">
                <div class="two_div" >
                     计费方式1
                    <img src=../static/images/arrow.png>
                </div>
            </div>
            <div class="nav_left_about one_leve2_div">
                <div class="two_div">
                     计费方式2
                    <img src=../static/images/arrow.png>
                </div>
            </div>
            <div class="nav_left_about one_leve2_div">
                <div class="two_div">
                     计费方式3
                    <img src=../static/images/arrow.png>
                </div>
                <div class="nav_left_about one_leve3_div">
                   <div class="three_div">
                     计费方式3AA
                    <!--<img src=../static/images/arrow.png>-->
                    </div>
                </div>
                <div class="nav_left_about one_leve3_div">
                   <div class="three_div">
                     计费方式3BB
                    <!--<img src=../static/images/arrow.png>-->
                    </div>
                </div>
            </div>

        </div>
        <div class="nav_left_about one_level_div">
            <div class="one_div">
                查账
                <img src=../static/images/arrow.png>
            </div>
            <div class="nav_left_about one_leve2_div">
                <div class="two_div">
                     查账方式
                    <img src=../static/images/arrow.png>
                </div>
                <div class="nav_left_about one_leve3_div">
                    <div class="three_div">
                     查账方式AA
                    <!--<img src=../static/images/arrow.png>-->
                </div>
                </div>
                <div class="nav_left_about one_leve3_div">
                    <div class="three_div">
                     查账方式BB
                    <!--<img src=../static/images/arrow.png>-->
                </div>
                </div>
            </div>
            <div class="nav_left_about one_leve2_div">
                <div class="two_div">
                     查账方式2
                    <img src=../static/images/arrow.png>
                </div>
            </div>
        </div>
         <div class="nav_left_main one_level_div">
            <div class="one_div">
                 主页2
            <img src=../static/images/arrow.png>
            </div>

        </div>
    </div>
</body>
<script language="JavaScript">
    $(document).ready(function () {
        $('.one_leve2_div').hide();
    });
    $('.one_div').click(function () {
        $(this).parents().children('.one_leve2_div').toggle(300);
        $(this).parents().siblings().children('.one_leve2_div').hide();
    });
    $('.two_div').click(function () {
        $(this).parents().children('.one_leve3_div').toggle(300);
        $(this).parents().siblings().children('.one_leve3_div').hide();
    });
</script>
</html>
css： 

        .nav_left{
            width: 180px;
            height: 600px;
            overflow: auto;
            background-color: #f7f7f7;
            box-sizing: border-box;
        }
        .one_level_div,.one_leve2_div,.one_leve3_div{
            box-sizing: border-box;
            width: 180px;
            background-color:white;
            color: #0f0f0f;
            line-height: 40px;
            cursor: pointer;
        }
        .one_div{
            padding-left: 5px;
            border-radius: 5px;
        }
        .two_div{
            padding-left: 10px;
            border-radius: 5px;
        }
        .three_div{
            padding-left: 15px;
            border-radius: 5px;
        }
        .one_div:hover{
            background-color: #eee;
        }
        .two_div:hover{
            background-color: #eee;
        }
        .three_div:hover{
            background-color: #eee;
        }
        .nav_left img{
            width: 10px;
            height: 10px;
        }
注意包含导航栏的文字的div不要设置hight，使用jquery的toggle()切换显示与隐藏。

Java～develop
关注
专栏目录
bootstrap导航栏_bootstrap：创建可折叠的navbar下拉菜单
weixin_39526706的博客
11-22 928
准备bootstrap版本： v4.3以下内容放在.html文件的<head>里：<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34...
bootstrap导航栏折叠
vinc_ent的博客
02-09 2726
在使用bootstrap时发现navbar-header不明确含义，多次搜索后发现可以在页面过小时赋予折叠按钮的东西，虽然还是不是很懂，但是可以使用。 <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#ex...
BootStrap自定义导航栏折叠宽度（默认在屏幕小于768px的时候自动折叠）
CAO11021的博客
01-09 3295
在项目中遇到如图：导航栏实在挤不下，导航条默认是768才折叠，这时候需要自己修改这个值。 查看官网文档：http://v3.bootcss.com/components/#navbar 官网解决办法如下： 下面记录一下，我的解决方法： 一、下载源码。http://v3.bootcss.com/getting-started/#download 二、通过修改\bootstrap-3.3...
js+css侧边导航菜单 可收缩
最新发布
u011626414的专栏
07-23 557
js+css侧边导航菜单 可收缩创建一个可收缩的侧边导航菜单需要使用JavaScript来处理交互，而CSS则用来设置样式和动画效果。以下是一个简单的示例，展示了如何创建一个可收缩的侧边导航菜单。
Bootstrap 5-导航栏-可折叠导航栏
m0_73839298的博客
09-25 1423
可折叠导航栏代码图效果图。
左侧可收缩导航
06-01
左侧可收缩导航，样式十分美观，包你喜欢。
简洁美观的左侧导航,可收缩
威士忌荡出の忧伤的博客
10-30 1007
&lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;简洁美观的左侧导航&lt;/title&gt; &lt;script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"&
使用Boostrap V4，左侧菜单栏可缩进，并根据屏幕宽度自适应大小。
weixin_34288121的博客
01-16 1905
为什么80%的码农都做不了架构师？>>> ...
侧边伸缩导航栏
weixin_52568554的博客
07-03 547
前端侧边伸缩导航栏
HTML+CSS伸缩式导航栏
weixin_45727272的博客
07-25 1191
HTML+CSS伸缩式导航栏
基于jQuery实现左侧菜单栏可折叠功能
10-20
要实现基于jQuery的左侧菜单栏可折叠功能，首先需要了解一些核心知识点，如jQuery选择器的使用、事件处理机制、CSS的display属性控制、DOM操作以及动画效果的实现。 首先，jQuery选择器允许开发者快速地选取页面上...
基于bootstrap实现收缩导航条
12-03
本文实例为大家分享了bootstrap实现收缩导航条的具体代码，供大家参考，具体内容如下 效果图 贴上我的代码 <!DocType html> <html> <head> <meta charset="utf-8"> <!--设置浏览器优先使用什么模式来渲染页面--> <!--告诉IE浏览器，IE8/9及以后的版本都会以最高版本IE来渲染页面。 --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=divice-width,initial-s
HTML jquery实现左侧菜单折叠
01-17
HTML jquery实现左侧菜单折叠，简单易学，适合新手。。。
jQuery左侧下拉三级收缩菜单_jQuery左侧下拉三级收缩菜单_
09-29
总结一下，构建一个jQuery左侧下拉三级收缩菜单涉及以下几个步骤： 1. 设计HTML结构，创建多级`<ul>`和`<li>`元素。 2. 引入jQuery库，设置菜单样式。 3. 使用jQuery处理鼠标悬停事件，实现菜单的展开与收缩动画。 ...
jQuery后台左侧三级导航菜单
11-19
本文将深入探讨jQuery实现的后台左侧三级导航菜单的原理和应用。 首先，jQuery是一个轻量级的JavaScript库，它简化了HTML文档遍历、事件处理、动画效果以及Ajax交互等任务。在构建后台导航菜单时，jQuery提供了丰富...
jquery左侧可伸缩水晶透明导航
06-05
4. **jQuery 动画**：使用 jQuery 的 `.slideToggle()` 或 `.animate()` 方法来实现平滑的伸缩动画效果，改变导航条的宽度或高度，以及可能的可见性。 5. **浏览器兼容性**：考虑到不同浏览器对 CSS3 和 JavaScript...
jQuery可收缩展开左侧流程图菜单列表代码
06-05
在本文中，我们将深入探讨如何使用jQuery来创建一个可收缩展开的左侧流程图菜单列表。这个功能对于构建交互式和用户友好的Web界面至关重要，特别是对于那些需要清晰导航的复杂网站或应用。以下是对该主题的详细分析...
php 侧边栏导航,Bootstrap怎么实现可折叠的侧边导航
weixin_42498003的博客
03-09 724
这次给大家带来Bootstrap怎么实现可折叠的侧边导航，Bootstrap实现可折叠侧边导航的注意事项有哪些，下面就是实战案例，一起来看一下。效果图：源码：表格.panel-group{max-height:770px;overflow: auto;}.leftMenu{margin:10px;margin-top:5px;}.leftMenu .panel-heading{font-size:...
BootStrap实现左侧二级菜单下拉收缩栏(直接引入CDN实现)
MinisterZ的博客
05-03 2749
<!DOCTYPE html> <html lang="zh-CN"> <head> <!-- Bootstrap --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/ht.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值