目录
1.2 响应式 JavaScript 侧边栏下拉菜单 可折叠隐藏
1.下拉列表
1.1 简单下拉菜单
效果图:
说明:使用css中的hover属性就可以实现,关键代码在
.downorder:hover a{
display: block;/*鼠标移入菜单盒子时显示a标签内容*/
}
.downtext a {
display: none;/*隐藏a标签内容*/
}
源码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>简单下拉菜单</title>
<style type="text/css">
.downorder {
width: 100px;
height: auto;
position: relative;
}
.downorder:hover a{
display: block;/*鼠标移入菜单显示a标签内容*/
}
.order {
position: relative;
text-align: center;
display: inline-block;
font-size: 16px;
padding: 15px;
background-color: dodgerblue;
}
.order:hover {
background-color: aqua;
color: #FFFF00;
}
.downtext {
position: relative;
text-align: center;
display: inline-block;
font-size: 16px;
background-color: #7FFF00;
}
.downtext a {
display: none;/*隐藏a标签内容*/
text-decoration: none;
color: red;
padding: 15px;
}
.downtext a:hover {
background-color: aqua;
color: #FFFF00;
}
</style>
</head>
<body>
<div class="downorder">
<button class="order">
下拉菜单
</button>
<div class="downtext">
<a href="javascript:;">内容1</a>
<a href="javascript:;">内容2</a>
<a href="javascript:;">内容3</a>
<a href="javascript:;">内容4</a>
</div>
</div>
</body>
</html>
1.2 输入框的下拉列表
效果图:
说明:用datalist标签就可以实现,
源码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>数据列表</title>
</head>
<body>
<form action="" method="get">
<label for="item">选择你想要的内容:</label>
<input type="text" list="items" name="item" id="item"/>
<datalist id="items">
<option value="会玩手机的猫"></option>
<option value="最爱鱼的!猫"></option>
<option value="来自星星的猫"></option>
<option value="天猫国际会玩猫"></option>
<option value="咪了个猫"></option>
</datalist>
<input type="submit" value="提交"/>
</form>
</body>
</html>
1.2 响应式 JavaScript 侧边栏下拉菜单 可折叠隐藏
这是一款基于纯JavaScript实现的侧边栏菜单,因为整个菜单并没有使用jQuery等第三方插件,因此菜单比较轻量级的。这款JS侧边栏菜单的特点是点击按钮可以展开和隐藏,并且在隐藏时自动显示提示文字,展开后又隐藏提示文字,很好地做到了自适应效果。
效果:
HTML代码
非常简单,用一个<ul>
元素构建了一个景点列表,同时用二级标题显示城市名称。
<div id="menu">
<!--隐藏菜单-->
<div id="ensconce">
<h2>
<img src="images/show.png" alt="">
国内各地景点
</h2>
</div>
<!--显示菜单-->
<div id="open">
<div class="navH">
国内各地景点
<span><img class="obscure" src="images/obscure.png" alt=""></span>
</div>
<div class="navBox">
<ul>
<li>
<h2 class="obtain">北京景点<i></i></h2>
<div class="secondary">
<h3>故宫</h3>
<h3>十三陵</h3>
<h3>圆明园</h3>
<h3>长城</h3>
<h3>雍和宫</h3>
<h3>天坛公园</h3>
</div>
</li>
<li>
<h2 class="obtain">南京景点<i></i></h2>
<div class="secondary">
<h3>栖霞寺</h3>
<h3>夫子庙</h3>
<h3>海底世界</h3>
<h3>中山陵</h3>
<h3>乌衣巷</h3>
<h3>音乐台</h3>
</div>
</li>
<li>
<h2 class="obtain">上海景点<i></i></h2>
<div class="secondary">
<h3>东方明珠</h3>
<h3>外滩</h3>
<h3>豫园</h3>
<h3>文庙</h3>
<h3>世博园</h3>
<h3>田子坊</h3>
</div>
</li>
<li>
<h2 class="obtain">深圳景点<i></i></h2>
<div class="secondary">
<h3>华侨城</h3>
<h3>观澜湖</h3>
<h3>世界之窗</h3>
<h3>东门老街</h3>
<h3>七娘山</h3>
<h3>光明农场</h3>
</div>
</li>
<li>
<h2 class="obtain">广州景点<i></i></h2>
<div class="secondary">
<h3>白云山</h3>
<h3>长隆</h3>
<h3>黄花岗公园</h3>
<h3>中山纪念堂</h3>
<h3>华南植物园</h3>
<h3>南沙湿地公园</h3>
</div>
</li>
</ul>
</div>
</div>
</div>
CSS代码
CSS代码也并不复杂,主要渲染了鼠标滑过菜单项时的背景颜色渐变动画,同时定义了菜单展开时的折叠动画效果。
#menu {
overflow: hidden;
height: 100%;
float: left;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#menu #ensconce {
/*éšè—èœå•æ ·å¼*/
width: 0.35rem;
height: 100%;
background-color: #20343c;
float: left;
text-align: center;
position: relative;
display: none;
}
#menu #ensconce h2 {
cursor: pointer;
color: #fff;
font-size: 0.24rem;
line-height: 0.5rem;
width: 100%;
position: absolute;
top: 35%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(0%, -50%);
}
#menu #ensconce h2 img {
width: 52%;
}
#menu #open {
/*显示èœå•æ ·å¼*/
width: 2.6rem;
height: 100%;
background-color: #363a45;
padding-bottom: 0.1rem;
box-sizing: border-box;
-webkit-transition: all 0.8s ease;
-moz-transition: all 0.8s ease;
-o-transition: all 0.8s ease;
-ms-transition: all 0.8s ease;
}
#menu #open .navH {
height: 0.6rem;
background-color: #44495a;
line-height: 0.6rem;
text-align: center;
font-size: 0.2rem;
color: #fff;
position: relative;
box-sizing: border-box;
}
#menu #open .navH span {
position: absolute;
top: 49%;
right: 0;
padding: 0 0.15rem;
cursor: pointer;
-webkit-transform: translate(0, -50%);
-moz-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
-o-transform: translate(0, -50%);
transform: translate(0, -50%);
display: inline-block;
}
#menu #open .navH span .obscure {
width: 0.24rem;
}
#menu #open .navBox {
height: 100%;
overflow-y: auto;
padding-left: 0.05rem;
padding-right: 0.07rem;
margin-top: 0.1rem;
}
#menu #open .navBox ul li {
background-color: #393c4a;
cursor: pointer;
margin-bottom: 4px;
}
#menu #open .navBox ul li .obtain {
background-color: #3889D4;
}
#menu #open .navBox ul li .obtain:hover {
background-color: #3D8332;
}
#menu #open .navBox ul li h2 {
position: relative;
width: 100%;
height: 100%;
text-align: center;
color: #fff;
font-size: 0.15rem;
padding: 0.15rem 0;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
-ms-transition: all 0.6s ease;
}
#menu #open .navBox ul li h2 i {
position: absolute