Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码

以下是详细讲解“Html+Css+Jquery实现左侧滑动拉伸导航菜单栏”的完整攻略：

一、基本思路

实现左侧滑动拉伸导航菜单栏的基本思路是：使用HTML、CSS和jQuery等技术实现页面布局和交互效果，具体步骤如下：

使用HTML实现页面结构，包括页头和页脚、左侧导航菜单和主内容区域等。
使用CSS实现页面布局效果，包括三栏布局和导航菜单的样式等。
使用jQuery实现导航菜单的交互效果，包括导航菜单的滑动展开和收缩、主内容区域的宽度变化等。

二、示例说明

下面我们分别介绍两个示例，帮助读者更好地理解“Html+Css+Jquery实现左侧滑动拉伸导航菜单栏”的实现过程。

示例一

这是一个较为简单的示例，实现了左侧导航菜单的展开和收缩、主内容区域的宽度变化等效果。示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>左侧滑动拉伸导航菜单栏示例</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            height:100%;
            overflow:hidden;
            font-family: "Microsoft YaHei", sans-serif;
        }
        .container{
            height:100%;
            display:flex;
        }
        .nav{
            width:120px;
            height:100%;
            background-color: #f4f4f4;
            overflow:hidden;
            position:relative;
        }
        .nav .menu{
            position:absolute;
            top:50%;
            width:120px;
            margin-top:-75px;
        }
        .nav .menu a{
            display:block;
            width:120px;
            height:50px;
            padding:10px;
            border-bottom:1px solid #e1e1e1;
            color:#4d4d4d;
            font-size:16px;
            line-height:30px;
            text-align:center;
            text-decoration:none;
            background-color:#f4f4f4;
        }
        .nav .menu a.active{
            background-color:#ffffff;
            font-weight:bold;
            color:#29a3a3;
        }
        .main{
            height:100%;
            flex:1;
            background-color:#ffffff;
            overflow:hidden;
            position:relative;
        }
        .main .header{
            height:50px;
            line-height:50px;
            background-color:#f4f4f4;
            text-align:center;
            font-size:16px;
            border-bottom:1px dashed #e1e1e1;
        }
        .main .content{
            height:100%;
            padding:20px;
            text-align:center;
            font-size:50px;
        }
        .main .resize{
            width:5px;
            height:100%;
            background-color:#f4f4f4;
            position:absolute;
            top:0;
            right:-2px;
            cursor:col-resize;
            z-index:1;
        }
    </style>
    <script src="jquery.min.js"></script>
    <script>
        $(function () {
            $(".menu a").click(function () {
                $(".menu a").removeClass("active");
                $(this).addClass("active");
            });
            var flag=true;
            $(".resize").mousedown(function () {
                flag=false;
                $(document).mousemove(function (event) {
                    if(flag==false){
                        var x=event.pageX;
                        $(".nav").css("width",x);
                        $(".main").css("left",x);
                    }
                })
            });
            $(document).mouseup(function () {
                flag=true;
                $(document).unbind("mousemove");
            })
        });
    </script>
</head>
<body>
<div class="container">
    <div class="nav">
        <div class="menu">
            <a href="#" class="active">菜单一</a>
            <a href="#">菜单二</a>
            <a href="#">菜单三</a>
            <a href="#">菜单四</a>
            <a href="#">菜单五</a>
            <a href="#">菜单六</a>
            <a href="#">菜单七</a>
            <a href="#">菜单八</a>
            <a href="#">菜单九</a>
            <a href="#">菜单十</a>
        </div>
        <div class="resize"></div>
    </div>
    <div class="main">
        <div class="header">左侧滑动拉伸导航菜单栏示例</div>
        <div class="content">这是主要内容区域</div>
    </div>
</div>
</body>
</html>

在这个示例中，我们使用flex布局实现了三栏布局（容器div.container包含左侧导航菜单div.nav和主内容区域div.main），其中左侧导航菜单div.nav中包含一个div.menu和一个div.resize，分别用于展示菜单列表和实现左侧菜单区域的拖拽效果。具体实现过程如下：

设置body和.container元素的height为100%，让网页占据整个浏览器客户端区域。
使用flex布局使得.container元素的子元素div.nav和div.main各占据整个可用空间（即左侧导航菜单和主内容区域的宽度比为1:2）。
对于左侧导航菜单div.nav，首先设置宽度为120px，其次将内部菜单列表div.menu absolute定位，并设置top为50%使其在导航菜单区域垂直居中，其余样式的设置均为对内部菜单列表div.menu中的每个菜单项a元素进行的。
主内容区域div.main中的元素布局比较简单，只有头部div.header和内容区域div.content，其中头部设置了相应的样式来实现下边框的虚线效果。
左侧导航菜单区域的拖拽效果实现是通过绑定mousemove事件来对左侧导航菜单和主内容区域的宽度进行调整的，具体实现过程中，我们使用了一个flag变量来判断当前是否处于拖拽状态，以及利用unbind函数来解除鼠标松开事件的绑定。

示例二

这是一个稍微复杂一些的示例，主要增加了左侧导航菜单栏中悬浮菜单区域的动态展示效果。示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>左侧滑动拉伸导航菜单栏示例</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="jquery.min.js"></script>
    <script>
        $(function () {
            $(".menu-list>li>a").click(function () {
                var submenu=$(this).siblings(".submenu");
                if(submenu.is(":visible")){
                    submenu.hide(300);
                    $(this).removeClass("open");
                }else{
                    submenu.show(300);
                    $(this).addClass("open");
                }
            });
            var flag=true;
            $(".resize").mousedown(function () {
                flag=false;
                $(document).mousemove(function (event) {
                    if(flag==false){
                        var x=event.pageX;
                        $(".nav").css("width",x);
                        $(".main").css("left",x);
                    }
                })
            });
            $(document).mouseup(function () {
                flag=true;
                $(document).unbind("mousemove");
            })
        });
    </script>
</head>
<body>
<div class="container">
    <div class="nav">
        <div class="menu-list">
            <li>
                <a class="menu-item" href="#">
                    <i class="iconfont">&#xe60a;</i><span>模板</span>
                    <span class="arrow"></span>
                </a>
                <div class="submenu">
                    <a href="#">模板一</a>
                    <a href="#">模板二</a>
                    <a href="#">模板三</a>
                    <a href="#">模板四</a>
                </div>
            </li>
            <li>
                <a class="menu-item" href="#">
                    <i class="iconfont">&#xe60a;</i><span>组件</span>
                    <span class="arrow"></span>
                </a>
                <div class="submenu">
                    <a href="#">组件一</a>
                    <a href="#">组件二</a>
                    <a href="#">组件三</a>
                    <a href="#">组件四</a>
                </div>
            </li>
            <li>
                <a class="menu-item" href="#">
                    <i class="iconfont">&#xe60a;</i><span>插件</span>
                    <span class="arrow"></span>
                </a>
                <div class="submenu">
                    <a href="#">插件一</a>
                    <a href="#">插件二</a>
                    <a href="#">插件三</a>
                    <a href="#">插件四</a>
                </div>
            </li>
        </div>
        <div class="resize"></div>
    </div>
    <div class="main">
        <div class="header">左侧滑动拉伸导航菜单栏示例</div>
        <div class="content">这是主要内容区域</div>
    </div>
</div>
</body>
</html>

在这个示例中，我们仍然使用flex布局实现了三栏布局，其中左侧导航菜单div.nav中包含了一个ul元素和一个div.resize，ul中的每个li元素是一个悬浮菜单项，其下方包含了一个隐藏的div子元素.submenu，当li元素被点击时，通过判断子元素的显示状态来进行动态切换。具体实现过程如下：

左侧导航菜单栏的样式使用了阿里图标库中的图标，通过对一些css样式的调整，使得整个菜单区域更加美观。
对于左侧导航菜单栏中的每个菜单项，通过设置一个arrow元素，可以在事件触发时动态切换其方向。
在左侧导航菜单栏中添加了一个resize元素，通过对resize元素绑定鼠标拖拽事件，来实现左侧导航菜单栏动态拉伸和收缩的展现效果。
在左侧导航菜单栏的悬浮菜单区域的动态展示效果中，我们使用了jQuery中的show()和hide()函数，动态切换子元素的显示状态，并通过addClass()和removeClass()函数来动态切换图标方向。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码 - Python技术站