左侧可拖动导航栏网页设计 - 财务、人力分类，图标展示 - 常规

<!DOCTYPE html>
<html>
<head>
	<title>左侧可拖动导航栏网页设计</title>
	<style>
		body {
			margin: 0;
			padding: 0;
			font-family: Arial, sans-serif;
		}
<pre><code>	.navbar {
		height: 100%;
		background-color: #202020;
		color: white;
		position: fixed;
		top: 0;
		left: 0;
		overflow-x: hidden;
	}

	.navbar .logo {
		font-size: 24px;
		font-weight: bold;
		padding: 10px;
	}

	.navbar .menu {
		padding: 10px;
	}

	.navbar .menu .item {
		display: flex;
		align-items: center;
		margin-bottom: 10px;
		cursor: pointer;
		transition: background-color 0.3s ease;
		padding: 10px;
		border-radius: 5px;
	}

	.navbar .menu .item:hover {
		background-color: #404040;
	}

	.navbar .menu .item .icon {
		margin-right: 10px;
		font-size: 20px;
	}

	.navbar .menu .item .text {
		font-size: 16px;
	}

	.navbar .menu .item .sub-menu {
		display: none;
		margin-left: 30px;
		padding: 10px;
	}

	.navbar .menu .item.active .sub-menu {
		display: block;
	}

	.navbar .menu .slider {
		position: absolute;
		top: 0;
		right: -10px;
		height: 100%;
		width: 10px;
		background-color: #404040;
		cursor: col-resize;
	}

	.content {
		margin-left: 200px;
		padding: 20px;
		box-sizing: border-box;
	}

	@media (max-width: 768px) {
		.navbar {
			width: 100%;
			height: auto;
			position: relative;
		}

		.navbar .menu {
			display: none;
		}

		.navbar .menu .item {
			margin-bottom: 0;
		}

		.navbar .menu .item .sub-menu {
			margin-left: 0;
		}

		.navbar .menu .slider {
			display: none;
		}

		.content {
			margin-left: 0;
		}
	}
&lt;/style&gt;
</code></pre>
</head>
<body>
	<div class="navbar">
		<div class="logo">
			导航栏
		</div>
		<div class="menu">
			<div class="item active">
				<div class="icon">💰</div>
				<div class="text">财务</div>
				<div class="sub-menu">
					<div class="item">
						<div class="icon">💰</div>
						<div class="text">收入</div>
					</div>
					<div class="item">
						<div class="icon">💸</div>
						<div class="text">费用</div>
					</div>
				</div>
			</div>
			<div class="item">
				<div class="icon">👨‍💼</div>
				<div class="text">人力</div>
				<div class="sub-menu">
					<div class="item">
						<div class="icon">👨‍💼</div>
						<div class="text">人员构成</div>
					</div>
					<div class="item">
						<div class="icon">💰</div>
						<div class="text">薪酬</div>
					</div>
				</div>
			</div>
			<div class="slider"></div>
		</div>
	</div>
	<div class="content">
		<h1>欢迎来到导航栏的世界</h1>
		<p>这是一个美观实用的导航栏网页，导航栏在左侧，导航栏有一个拖动条，可以通过鼠标左右拉动拖动条调整导航栏宽度，导航栏内的内容分为两类 '财务' 和 '人力' 并配置相应的图标, '财务' 下又可以展开 '收入' 和 '费用' 两个子项，'人力' 下可以展开 '人员构成' 和 '薪酬' 两个子项。</p>
	</div>
	<script>
		var slider = document.querySelector('.slider');
		var navbar = document.querySelector('.navbar');
		var startX, startWidth;
<pre><code>	function startDrag(e) {
		startX = e.clientX;
		startWidth = parseFloat(document.defaultView.getComputedStyle(navbar).width, 10);
		document.documentElement.addEventListener('mousemove', onDrag);
		document.documentElement.addEventListener('mouseup', stopDrag);
	}

	function onDrag(e) {
		var width = startWidth + (e.clientX - startX);
		navbar.style.width = width + 'px';
	}

	function stopDrag(e) {
		document.documentElement.removeEventListener('mousemove', onDrag);
		document.documentElement.removeEventListener('mouseup', stopDrag);
	}

	slider.addEventListener('mousedown', startDrag);
&lt;/script&gt;
</code></pre>
</body>
</html>