交互式导航页：HTML、CSS 和 JavaScript 实现可拖拽调整宽度的导航栏

本文将使用 HTML、CSS 和 JavaScript 创建一个交互式导航页，导航栏位于左侧，可通过鼠标拖拽调整宽度，并提供按钮隐藏/显示内容。

效果展示：

交互式导航页

代码实现：

HTML 代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset='UTF-8'>
	<title>Interactive Navigation Page</title>
	<link rel='stylesheet' type='text/css' href='style.css'>
</head>
<body>
	<div class='wrapper'>
		<div class='navbar'>
			<div class='navbar-header'>
				<h2>Navigation</h2>
				<button id='toggle-btn'>Hide</button>
			</div>
			<ul class='nav-links'>
				<li><a href='#'>Link 1</a></li>
				<li><a href='#'>Link 2</a></li>
				<li><a href='#'>Link 3</a></li>
				<li><a href='#'>Link 4</a></li>
				<li><a href='#'>Link 5</a></li>
			</ul>
		</div>
		<div class='content'>
			<h1>Welcome to my website</h1>
			<p>This is the content area.</p>
		</div>
	</div>
	<script src='script.js'></script>
</body>
</html>

CSS 代码：

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: Arial, sans-serif;
}

.wrapper {
	display: flex;
	height: 100vh;
}

.navbar {
	background-color: #333;
	color: #fff;
	width: 250px;
	transition: width 0.3s ease-in-out;
}

.navbar-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px;
}

.nav-links {
	list-style: none;
	padding: 0;
}

.nav-links li {
	padding: 10px;
}

.nav-links li a {
	color: #fff;
	text-decoration: none;
}

.content {
	flex: 1;
	background-color: #f0f0f0;
	padding: 20px;
}

.hide {
	width: 0;
}

#toggle-btn {
	background-color: transparent;
	border: none;
	color: #fff;
	cursor: pointer;
}

#toggle-btn:hover {
	text-decoration: underline;
}

JavaScript 代码：

const navbar = document.querySelector('.navbar');
const toggleBtn = document.querySelector('#toggle-btn');
let isHidden = false;

toggleBtn.addEventListener('click', () => {
	isHidden = !isHidden;
	if (isHidden) {
		navbar.classList.add('hide');
		toggleBtn.textContent = 'Show';
	} else {
		navbar.classList.remove('hide');
		toggleBtn.textContent = 'Hide';
	}
});

let isResizing = false;
let lastX = 0;

navbar.addEventListener('mousedown', (e) => {
	if (e.offsetX > navbar.offsetWidth - 10) {
		isResizing = true;
		lastX = e.clientX;
	}
});

document.addEventListener('mousemove', (e) => {
	if (!isResizing) return;
	const diffX = e.clientX - lastX;
	const newWidth = navbar.offsetWidth + diffX;
	if (newWidth >= 100 && newWidth <= 400) {
		navbar.style.width = newWidth + 'px';
		lastX = e.clientX;
	}
});

document.addEventListener('mouseup', () => {
	isResizing = false;
});

代码解析：

HTML 代码： 创建基本结构，包括 wrapper、navbar、navbar-header、nav-links 和 content 等元素。
CSS 代码： 设置基本样式，包括布局、颜色、字体、过渡效果等。hide 类用于隐藏导航栏。
JavaScript 代码：
- 使用 toggleBtn 的 click 事件控制导航栏的隐藏/显示。
- 使用 mousedown、mousemove 和 mouseup 事件实现导航栏的拖拽功能。

总结：

以上代码实现了可交互的导航页，包括以下功能：

导航栏位于左侧。
可通过鼠标拖拽调整导航栏宽度。
可点击按钮隐藏/显示导航栏。

希望本文能够帮助您了解如何使用 HTML、CSS 和 JavaScript 创建交互式导航页。

交互式导航页：HTML、CSS 和 JavaScript 实现可拖拽调整宽度的导航栏