1. Python技术站首页
  2. css

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

• css

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

一、基本思路

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

  1. 使用HTML实现页面结构，包括页头和页脚、左侧导航菜单和主内容区域等。

  2. 使用CSS实现页面布局效果，包括三栏布局和导航菜单的样式等。

  3. 使用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，分别用于展示菜单列表和实现左侧菜单区域的拖拽效果。具体实现过程如下：

  1. 设置body和.container元素的height为100%，让网页占据整个浏览器客户端区域。

  2. 使用flex布局使得.container元素的子元素div.nav和div.main各占据整个可用空间（即左侧导航菜单和主内容区域的宽度比为1:2）。

  3. 对于左侧导航菜单div.nav，首先设置宽度为120px，其次将内部菜单列表div.menu absolute定位，并设置top为50%使其在导航菜单区域垂直居中，其余样式的设置均为对内部菜单列表div.menu中的每个菜单项a元素进行的。

  4. 主内容区域div.main中的元素布局比较简单，只有头部div.header和内容区域div.content，其中头部设置了相应的样式来实现下边框的虚线效果。

  5. 左侧导航菜单区域的拖拽效果实现是通过绑定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元素被点击时，通过判断子元素的显示状态来进行动态切换。具体实现过程如下：

  1. 左侧导航菜单栏的样式使用了阿里图标库中的图标，通过对一些css样式的调整，使得整个菜单区域更加美观。

  2. 对于左侧导航菜单栏中的每个菜单项，通过设置一个arrow元素，可以在事件触发时动态切换其方向。

  3. 在左侧导航菜单栏中添加了一个resize元素，通过对resize元素绑定鼠标拖拽事件，来实现左侧导航菜单栏动态拉伸和收缩的展现效果。

  4. 在左侧导航菜单栏的悬浮菜单区域的动态展示效果中，我们使用了jQuery中的show()和hide()函数，动态切换子元素的显示状态，并通过addClass()和removeClass()函数来动态切换图标方向。

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

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年6月9日
下一篇 2023年6月9日

相关文章

  • UL里的LI元素左浮动层一行显示时使其居中的方法

    首先，需要注意到UL元素是有默认的内边距（padding）和外边距（margin）的，因此需要先将它们设置为0，以便更好地控制LI元素的位置和样式。 然后，我们可以使用CSS的flexbox布局来实现居中。具体操作步骤如下： 给UL元素设置display：flex属性，将其转化为flex容器。 设置justify-content属性为center，将其中的元…

    css 2023年6月10日
    00

  • 使用Java和WebSocket实现网页聊天室实例代码

    下面我为你详细讲解如何使用Java和WebSocket实现网页聊天室的攻略。整个过程分为以下步骤： 步骤一：准备工作 在开始操作之前，我们需要确定需求和相关技术组件。首先，需要了解WebSockets和Java有关的技术组件，包括： JavaSE 8及以上 Maven或Gradle构建工具 WebSocket API和相关实现（Tomcat或Glassfis…

    css 2023年6月10日
    00

  • js实现有过渡渐变效果的图片轮播相册（兼容IE,ff）

    实现有过渡渐变效果的图片轮播相册需要使用CSS3的transition属性和JavaScript实现。下面是完整的攻略： 步骤一：HTML结构 首先，需要在HTML中写出轮播相册的结构。这里以一个简单的轮播相册为例，代码如下： <div class="slider"> <ul> <li><img …

    css 2023年6月10日
    00

  • 深入分析element ScrollBar滚动组件源码

    以下是深入分析 element ScrollBar 滚动组件源码的完整攻略： 1. 确认研究对象 Element 是一个基于 Vue.js 的后台前端组件库，其中的 ScrollBar 组件是用于实现滚动条功能的组件，我们的研究对象即为这个组件的源码。 2. 查阅官方文档 在深入研究 ScrollBar 组件源码之前，我们需要查看 Element 官方文档中…

    css 2023年6月10日
    00

  • js+css实现的仿office2003界面

    下面是针对“js+css实现的仿office2003界面”的完整攻略： 1. 需要的技术 HTML CSS JavaScript 2. 功能实现 仿Office 2003界面主要包括两个部分：导航栏和主体部分。其中，导航栏实现左侧选项卡和右侧工具栏交互；主体部分采用面板方式实现，并且也包含相应的工具栏。 2.1 导航栏实现 左侧选项卡部分可以采用HTML的u…

    css 2023年6月10日
    00

  • JS实现侧悬浮浮动实例代码

    JS实现侧悬浮浮动是一种常见的网页侧边栏布局方式，下面是实现这种效果的完整攻略： HTML结构 首先，我们需要在HTML中定义容器，侧边栏内容和主体内容。例如，我们可以定义一个名为container的div作为整个容器，定义两个名为sidebar和mainContent的div存放侧边栏和主体内容。 <div class="container…

    css 2023年6月10日
    00

  • CSS实现鼠标移动到图片或按钮上改变大小的方法示例

    CSS实现鼠标移动到图片或按钮上改变大小的方法可以通过CSS属性transform实现。transform属性可以实现元素的缩放、旋转、平移和倾斜等效果，而对于本问题的实现，我们利用transform的scale功能来实现鼠标移动到图片或按钮上改变大小的需求。 具体实现方法如下： 利用:hover伪类和transform属性的scale功能实现 我们可以通过…

    css 2023年6月10日
    00

  • IE浏览器专有css属性之zoom详解

    IE浏览器专有CSS属性之zoom详解 对于一些老版浏览器，如 IE6、IE7 等，常常渲染网页会出现问题，此时常常可以采用一些浏览器专有的 CSS 属性来解决问题，其中 zoom 属性就是其中之一。 zoom 属性的作用 zoom 属性可以设置元素及元素中的文本按照比例进行缩放。对于 IE 浏览器，它是一项非常有用的属性，可以解决一些 IE 渲染问题。 基…

    css 2023年6月10日
    00
合作推广
合作推广
分享本页
返回顶部