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日

相关文章

  • vue页面切换过渡transition效果

    下面将详细讲解怎样实现vue页面切换过渡transition效果。 简介： Vue提供了多种切换过渡效果，通过以下两种方式实现： 在<transition>包裹下的元素，添加过渡类名 设置命名的名称作为组件的立场 第一种方式： html代码： <transition name="fade"> <p v-if=…

    css 2023年6月10日
    00

  • js实现背景图自适应窗口大小

    下面是“js实现背景图自适应窗口大小”的完整攻略： 1. 确定背景图的样式 在实现背景图自适应窗口大小的过程中，我们需要先给背景图指定一些样式。最常用的方法是将背景图作为页面的一部分，利用CSS中的background属性进行样式设置。 body { background: url("bg.jpg") no-repeat center c…

    css 2023年6月9日
    00

  • 详解CSS-opacity子元素继承父元素透明度的解决方法

    下面是详解 “CSS-opacity子元素继承父元素透明度的解决方法” 的攻略。 什么是 CSS-opacity？ 在 CSS 中，opacity 属性指定元素的透明度，即元素的不透明度程度。该属性的值介于 0（完全透明） 和 1（完全不透明）之间。例如，设置一个元素的 opacity 为 0.5，那么这个元素会半透明显示。 想象一个问题 当一个元素设置了 …

    css 2023年6月10日
    00

  • 详解如何解决position:fixed固定定位偏移问题

    下面将详细讲解如何解决position:fixed固定定位偏移问题的完整攻略。 问题描述 使用position: fixed可以使元素相对于浏览器窗口固定在某一位置，不随页面滚动而移动。但是，有时候会发现position: fixed定位的元素位置偏移了预期位置，出现了莫名其妙的位移情况。 这是由于使用position: fixed时，元素生成的”新层级”比…

    css 2023年6月9日
    00

  • 值得分享的最全面Bootstrap快速人门案例

    我来为你讲解一下“值得分享的最全面Bootstrap快速人门案例”的完整攻略。 一、背景介绍 Bootstrap是一款流行的前端开发框架，通过使用Bootstrap，你可以快速构建出美观且响应式的网页。而“值得分享的最全面Bootstrap快速人门案例”则是一篇详细介绍Bootstrap的文章，通过一个完整的人们门案例，讲解了Bootstrap的常用组件和布…

    css 2023年6月10日
    00

  • 10分钟入门CSS3 Animation

    下面是针对“10分钟入门CSS3 Animation”的完整攻略： CSS3 Animation是什么 CSS3 Animation是CSS3中的一个模块，其主要作用是创建动态效果，使网页更加生动、活泼。通过CSS3 Animation，可以实现各种复杂的动画效果，如旋转、放大、缩小、褪色等。 CSS3 Animation的语法 CSS3 Animation…

    css 2023年6月9日
    00

  • jQuery的图片轮播插件PgwSlideshow使用详解

    让我来详细讲解一下“jQuery的图片轮播插件PgwSlideshow使用详解”。 什么是PgwSlideshow PgwSlideshow是一款基于 jQuery 的图片轮播插件。它可以用来展示图片，同时支持缩略图显示、分页功能等。在网页开发中使用 PgwSlideshow 可以让页面更加美观和动态。 如何使用PgwSlideshow 下载PgwSlide…

    css 2023年6月9日
    00

  • 纯CSS打造的导航菜单(附jquery版)

    好的。在这里，我将为您详细讲解“纯CSS打造的导航菜单(附jquery版)”的完整攻略。该攻略包含了该导航菜单的制作过程以及如何将其转化成jquery版的导航菜单。 制作纯CSS导航菜单 第一步：HTML结构 首先，我们需要创建一个含有ul和li元素的HTML结构。 代码如下： <nav> <ul> <li><a h…

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