侧边菜单导航(JS+CSS)

最新推荐文章于 2025-07-08 08:26:54 发布

原创

最新推荐文章于 2025-07-08 08:26:54 发布 · 8.9k 阅读

42 ·

CC 4.0 BY-SA版权

文章标签：

#导航 #javascript #CSS #简单实用 #菜单

本文介绍如何利用JavaScript和CSS创建一个简单实用的侧边菜单导航。包括效果展示，强调需引入jQuery库，并注意调整CSS和JS文件路径。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果展示：

（1）

（2）

（3）

注：（1）Javascript库文件 jquery-1.8.3.min.js请自行下载引入

（2）注意修改引入的css和JS文件的路径

HTML

<!DOCTYPE html>
<html>
<head>
	<title>SideBar Nav</title>
	<script type="text/javascript" src="./js/jquery-1.8.3.min.js"></script>
	<link rel="stylesheet" type="text/css" href="./css/sidenav.css">
</head>
<body>
	<div id="sideBox">
		<h3 class="sideHead">Problems</h3>
		<div class="sideLi">
			<h5 class="sideLih">A Problems</h5>
			<ul class="sideLiUl">
				<l