html simple component (1): the simplest right navigation bar
I have been unable to find the simplest code to achieve the effect of the right navigation bar on Baidu, so I simply made a simple demo by myself.
The simplest rendering
Don't talk nonsense, just go to the code
html main code
<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>
jquery code
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");
}
}
CSS code
The css code uses a separate setting file and is rendered in a way that is introduced in 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 integration code
<!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>
The complete resource download address is: https://download.csdn.net/download/qq_26666947/13990477