html简单组件（一）：最简单的右侧导航栏

我就是我 2022-12-31 07:28 150阅读 0赞

## html简单组件（一）：最简单的右侧导航栏 ##

一直在百度上没找到最简单实现右侧导航栏效果的代码，索性自己做一个最简单的demo

### 最简单的效果图 ###

![在这里插入图片描述][20201229094220447.gif]  
废话不多说，直接上代码

#### html主代码 ####

#### jquery代码 ####

#### CSS代码 ####

css代码采用单独设置文件，在html中引入的方式进行渲染

* { 
    	margin: 0;
    	padding: 0;
    }
    
    .mobile-nav{ 
    	width: 220px;
    	height: 100%;
    }
    .nav_menu{ 
    	background-color: royalblue;
    	display: block;
    	font-size: 16px;
    	padding: 1em 5%;
    	border-top: 1px solid #4f4f4f;
    	border-bottom: 1px solid #292929;
    	cursor: pointer;
    	margin-left: -50px;
    	text-align: center;
    }
    .menu{ 
    	background-color: paleturquoise;
    	display: block;
    	font-size: 14px;
    	padding: 1em 5%;
    	border-top: 1px solid #4f4f4f;
    	border-bottom: 1px solid #292929;
    	cursor: pointer;
    	margin-left: -50px;
    	text-align: center;
    }
    li{ 
    	list-style-type:none
    }
    a{ 
    	color: white;
    }
    a:hover, a:focus { 
    	text-decoration: none
    }
    .menu_one, .menu_two{ 
    	display: none;
    }

#### html+jquery+css整合代码 ####

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>右侧导航栏DEMO</title>
    		<link rel="stylesheet" type="text/css" href="css/navbar.css">
    		<script type="text/javascript" src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    	</head>
    	<body>
    		<div class="mobile-nav">
    			<ul>
    				<li class="nav_menu"><a onclick="change(1)">首页</a></li>
    				<li class="menu_one menu"><a onclick="change(1-1)">首页1</a></li>
    				<li class="menu_one menu"><a onclick="change(1-2)">首页2</a></li>
    				<li class="nav_menu"><a onclick="change(2)">项目管理</a></li>
    				<li class="menu_two menu"><a onclick="change(2-1)">项目1</a></li>
    				<li class="menu_two menu"><a onclick="change(2-2)">项目2</a></li>
    			</ul>
    		</div>
    		
    		<script type="text/javascript"> function change(val){ if(val == "1"){ var show = $(".menu_one").css("display"); $(".menu_one").css("display",show =="none"?"block":"none"); }else if(val == "2"){ var show = $(".menu_two").css("display"); $(".menu_two").css("display",show =="none"?"block":"none"); } } </script>
    	</body>
    </html>

完整资源下载地址为：[https://download.csdn.net/download/qq\_26666947/13990477][https_download.csdn.net_download_qq_26666947_13990477]

[20201229094220447.gif]: /images/20221120/06d97eeb324a4cff8e1186f250125240.png
[https_download.csdn.net_download_qq_26666947_13990477]: https://download.csdn.net/download/qq_26666947/13990477