1. A simple secondary drop-down navigation bar on the tab head of the mobile terminal, which pops down and hides upward
<html lang="en">
<head >
<meta charset="UTF-8">
<meta name='viewport' content='width=device-width,minimum-scale=1.0 maximum-scale=1.0 user-scalable=no' />
<title >YanGotitle>
<script type="text/javascript" src="http://www.xxiaoyuan.top/jquery-1.9.1.js">< span style="color: #800000;">script>
<style >
*{
padding: 0;
margin: 0 auto;
}
li{
list-style-type: none;
}
.box{
margin: auto;
}
.bar{
position: relative;
float: left;
width: 33.33%;
text-align: center;
}
.bar p{
background-color: #08c;
color: #fff;
height: 40px;
line-height: 40px;
}
.bar ul{
display: none;
margin-top: 10px;
position: relative;
top: 0;
background: #29a7e6;
color: #fff;
width: 80%;
position: relative;
border-radius: 10px;
}
.bar ul:before{
position: absolute;
content: "";
top: -8px;
background: #29a7e6;
width: 15px;
height: 15px;
left: 46%;
transform:rotate(45deg);
z-index: -1;
}
.bar ul li{
height: 35px;
line-height: 35px;
}
.box li:active{
background: rgba(255,255,255,.3);
}
style>
head>
<body >
<div class="box">
<ul class="ul1">
<li class="bar">
<p >Breakfastp>
<ul >
<li >Pastryli>
<li >Porridgeli>
<li >Nutritionli>
ul>
li>
<li class="bar">
<p >Lunchp>
<ul >
<li >Xiao Chaoli>
<li >cold saladli>
<li >Dessertli>
ul>
li>
<li class="bar">
<p >Dinnerp>
<ul >
<li >Soupsli>
<li >Meatli>
<li >Lightli>
ul>
li>
<div style="clear: both;">div>
ul>
div>
body>
<script >
$(".bar").click(function(){
if($(this).children("ul" ).css("display") == "< /span>block"){
$(this).children("ul").slideUp(300);
}
else{
$(this).children("ul").slideDown(300);
}
});
script>
html>
<html lang="en">
<head >
<meta charset="UTF-8">
<meta name='viewport' content='width=device-width,minimum-scale=1.0 maximum-scale=1.0 user-scalable=no' />
<title >YanGotitle>
<script type="text/javascript" src="http://www.xxiaoyuan.top/jquery-1.9.1.js">< span style="color: #800000;">script>
<style >
*{
padding: 0;
margin: 0 auto;
}
li{
list-style-type: none;
}
.box{
margin: auto;
}
.bar{
position: relative;
float: left;
width: 33.33%;
text-align: center;
}
.bar p{
background-color: #08c;
color: #fff;
height: 40px;
line-height: 40px;
}
.bar ul{
display: none;
margin-top: 10px;
position: relative;
top: 0;
background: #29a7e6;
color: #fff;
width: 80%;
position: relative;
border-radius: 10px;
}
.bar ul:before{
position: absolute;
content: "";
top: -8px;
background: #29a7e6;
width: 15px;
height: 15px;
left: 46%;
transform:rotate(45deg);
z-index: -1;
}
.bar ul li{
height: 35px;
line-height: 35px;
}
.box li:active{
background: rgba(255,255,255,.3);
}
style>
head>
<body>
<div class="box">
<ul class="ul1">
<li class="bar">
<p>早餐p>
<ul>
<li>糕点li>
<li>稀粥li>
<li>营养li>
ul>
li>
<li class="bar">
<p>午餐p>
<ul>
<li>小炒li>
<li>凉拌li>
<li>甜点li>
ul>
li>
<li class="bar">
<p>晚餐p>
<ul>
<li>汤类li>
<li>肉类li>
<li>清淡li>
ul>
li>
<div style="clear: both;">div>
ul>
div>
body>
<script>
$(".bar").click(function(){
if($(this).children("ul").css("display") == "block"){
$(this).children("ul").slideUp(300);
}
else{
$(this).children("ul").slideDown(300);
}
});
script>
html>