如何让用户手动调整左侧边栏菜单的宽度

我用这个方法构建了一个菜单：https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sidenav_push

我需要让用户手动调整它的大小。

我在CSS中将resize: horizontal;添加到menu类中，但是：

用户只能抓住菜单右下角的面板，这个面板很小，如果鼠标可以抓住并拖动菜单右垂直边界的任何位置，那就更好了
打开菜单的动画现在污染了手动调整大小，就像我们必须在菜单上用力拉动才能更改其大小：(如果菜单可以调整大小，我必须完全删除动画吗

function openMenu() {
document.getElementById("menu").style.width = "500px";
document.getElementById("main").style.marginLeft = "500px";
}
function closeMenu() {
document.getElementById("menu").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
}
openMenu();

body {
margin-top: 0;
}
.header {
position: fixed;
top: 0;
padding: 5px;
background-color: white;
}
.middle {
padding-top: 100px;
}
.menu {
height: calc(100% - 110px);
width: 0;
position: fixed;
z-index: 1;
left: 0;
background-color: #d3d3d3;
overflow-x: hidden;
transition: 0.5s;
padding-top: 10px;
margin-bottom: 30px;
margin-top: 0;
resize: horizontal;
}
#main {
transition: margin-left .5s;
padding: 16px;
}

/* ----- MENU CONTENT ----- */
.closebtn {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;

position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
.closebtn:hover {
color: black;
}
.menuContent {
padding-left: 10px;
height: 100%;
}
h1 {
font-family: 'Rouge Script', cursive;font-family: 'Princess Sofia', cursive;
font-size: 50px;
margin: 0;
}
h2 {
margin-bottom: 3px;
}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>

</style>
</head>
<body>
<div class="header">
<a href="javascript:void(0)" onclick="openMenu()">LOGO IMAGE</a>
</div>
<div class="middle">
<div id="menu" class="menu">
<div class="menuContent">
<h1>Title h1</h1>
<a href="javascript:void(0)" class="closebtn" onclick="closeMenu()">&times;</a>

<h2>Title h2 - 1</h2>
<p>Hello</p>
<h2>Title h2 - 2</h2>
<p>Hello</p>
<h2>Title h2 - 3</h2>
<p>Hello</p>
<h2>Title h2 - 4</h2>
<p>Hello</p>
<h2>Title h2 - 5</h2>
<p>Hello</p>
<h2>Title h2 - 6</h2>
<p>Hello</p>
</div>
</div>
<div id="main">
<span style="font-size:30px;cursor:pointer" onclick="openMenu()">&#9776; menu</span>
<div id="mapBody"></div>
</div>
</div>
</body>

<script>
</script>
</html>

您可以添加一些javascript代码，并调整项目的一些设计，使栏的大小更容易调整。

HTML 中的代码

var i = 0;
var dragging = false;
$('#dragbar').mousedown(function(e){
e.preventDefault();

dragging = true;
var main = $('#main');
var ghostbar = $('<div>',
{id:'ghostbar',
css: {
height: main.outerHeight(),
top: main.offset().top,
left: main.offset().left
}
}).appendTo('body');

$(document).mousemove(function(e){
ghostbar.css("left",e.pageX+2);
});
});
$(document).mouseup(function(e){
if (dragging) 
{
$('#sidebar').css("width",e.pageX+2);
$('#main').css("left",e.pageX+2);
$('#ghostbar').remove();
$(document).unbind('mousemove');
dragging = false;
}
});

body,html{width:100%;height:100%;padding:0;margin:0;}
#main{
background-color: BurlyWood;
float: right;
position: absolute;
height:200px;
right: 0;
left:200px;
margin-top:10px;

}
#sidebar{
background-color: IndianRed;

margin-top:10px;
width:200px;
float: left;
position: absolute;
height:200px;
overflow-y: hidden;
}
#dragbar{
background-color:black;
height:100%;
float: right;
width: 3px;
cursor: col-resize;
}
#ghostbar{
width:3px;
background-color:#000;
opacity:0.5;
position:absolute;
cursor: col-resize;
z-index:999}

<div id="sidebar">
<span id="position"></span>
<div id="dragbar"></div>
sidebar
</div>
<div id="main">
main
</div>

HTML的css代码：

body,html{width:100%;height:100%;padding:0;margin:0;}
#main{
background-color: BurlyWood;
float: right;
position: absolute;
height:200px;
right: 0;
left:200px;
margin-top:10px;

}
#sidebar{
background-color: IndianRed;

margin-top:10px;
width:200px;
float: left;
position: absolute;
height:200px;
overflow-y: hidden;
}
#dragbar{
background-color:black;
height:100%;
float: right;
width: 3px;
cursor: col-resize;
}
#ghostbar{
width:3px;
background-color:#000;
opacity:0.5;
position:absolute;
cursor: col-resize;
z-index:999}

Javascript：

var i = 0;
var dragging = false;
$('#dragbar').mousedown(function(e){
e.preventDefault();

dragging = true;
var main = $('#main');
var ghostbar = $('<div>',
{id:'ghostbar',
css: {
height: main.outerHeight(),
top: main.offset().top,
left: main.offset().left
}
}).appendTo('body');

$(document).mousemove(function(e){
ghostbar.css("left",e.pageX+2);
});
});
$(document).mouseup(function(e){
if (dragging) 
{
$('#sidebar').css("width",e.pageX+2);
$('#main').css("left",e.pageX+2);
$('#ghostbar').remove();
$(document).unbind('mousemove');
dragging = false;
}
});

希望这能让你知道你想做什么。

相关内容

最新更新

热门标签：