以下是详细讲解“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"></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"></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"></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技术站
微信扫一扫 
支付宝扫一扫 