最适合新⼿的抽屉式导航实现（JQ、CSS动画，炒鸡详细简单的哦！）
最适合新⼿的抽屉式导航实现（zeptoJS、CSS动画，炒鸡详细简单的哦！）
作为⼀个刚⼊前端的⼩姑娘，学完HTML5、CSS就开始接触JS了。相信⼤部分⼈基本选择看基础书籍或者教学视频，但是！但是！但是！看完⼀本书或者⼀套视频之后，⾃⼰去写⼀些⼩的动画demo还是有点点困难，⽹上的插件⽂章也很多，基础不够也看不懂。很好，现在请看以下分析（以移动端的抽屉式导航为例，我蛮推荐zepto.js的emmmm，你⾃⼰可以选择）：可能有些注释很啰嗦，语⾔组织能⼒⽋佳，望谅解
tp1:HTML
<!DOCTYPE html>
<html>
<head>
<meta chart="UTF-8">
<!--媒体查询-->
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,ur-scalable=0,width=device-width,initial-scale=1.0"/>
<!-- 请求或指令遵循缓存机制 -->
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"/>
<!-- 禁⽌将数字识别为号码 -->
<meta content="telephone=no" name="format-detection"/>
<!-- 页⾯关键词 keywords -->
<meta name="keywords" content="your keywords">
<!-- 页⾯描述内容 description -->
<meta name="description" content="your description">
<title>抽屉式导航（⼆级菜单）</title>
<link rel="stylesheet" type="text/css" href="../css/ret.css" />
herstockings
<link rel="stylesheet" type="text/css" href="../css/animation.css">
<link rel="stylesheet" type="text/css" href="../css/index.css">
</head>
<body>
<!--Zepto.js和CSS动画实现-->
<div class="center-box"> <!--这个DIV必填项，类名已定义，不能在外层嵌套DIV，所有内容写在⾥⾯-->
<div class="left-nav">
<dt class='list_dt list_item' ><p>主页</p></dt>
<dt class='list_dt list_item' ><p>产品</p></dt>
<dd class="list_dd">
<ul >
<li class="list_li" ><a href="#"> UltraEM</a></li>
<li class="list_li "><a href="#">SuperEM</a> </li>
</ul>
</dd>
<dt class='list_dt list_item' ><p>购买</p></dt>
<dd class="list_dd">
<ul >
<li class="list_li" ><a href="#"> UltraEM</a></li>
<li class="list_li "><a href="#">SuperEM</a> </li>
</ul>
</dd>
<dt class='list_dt list_item' ><p>加⼊</p></dt>
<dd class="list_dd">
<ul >
<li class="list_li" ><a href="#"> UltraEM</a></li>
<li class="list_li "><a href="#">SuperEM</a> </li>
</ul>
</dd>
<dt class='list_dt list_item ' ><p>下载</p></dt>
</div>
<div class="hind-box"></div>
<button class="navBtn" type="button">点击显⽰</button>
</div>
</body>
</html>
<script type="application/javascript" src="../js/zepto.js"></script>
<script type="application/javascript" src="../js/zepto.js"></script>
<script type="application/javascript" src="../js/fit.js"></script>
<script type="application/ecmascript">
$(function(){
// 导航上下拉框
$('.list_item').click(function(){ //选择class名为list_item的，点击时会有⼀个事件，这个事件就是（function()函数）
/
/这是⼀句⽀持平稳退化的语句，意思是如果当前元素（就是.list_item）的下⼀个元素没有class这个类，辣么就返回fal，后⾯的语句就不执⾏了。 if(!($(this).next().attr('class'))) return fal ;
//如果当前元素的下⼀个class名检索到了list_dt这个字符串，则返回fal，下⾯语句不执⾏，indexOf()⽅法等于-1是不存在的意思。
if($(this).next().attr('class').indexOf('list_dt')!==-1)
{
return fal;
}同传翻译培训
//否则执⾏el语句块中的代码。
el{
// 根据不同需要设定判断条件及修改css⽂件
// 因上述css设定为display none，但css3动画中⾼度为0，所以下⽅判断加了个或
if($(this).next().css('display') == 'none' || $(this).next().css('height') == '0px')
{
//如果上述语句成⽴，则给当前元素的下⼀个元素（list_dd）添加名为add-move-bottom的类，然后删除add-move-up类。这⾥两个类都是动画 $(this).next().addClass('add-move-bottom').removeClass('add-move-up')免费在线学习
}
el
//反之
{
$(this).next().removeClass('add-move-bottom').addClass('add-move-up')
}
}
});
// 这⾥写需要的业务逻辑，导航左右弹出JS
$('.navBtn').click(function(event){
if (event.target == this) { //阻⽌冒泡排序，使⽤event.target
$('.left-nav').addClass('nav-out');
$('.hind-box').show(500);
return fal
}
});
$('.hind-box').click(function(event){
if (event.target == this) {
$('.left-nav').removeClass('nav-out').addClass('nav-into');
$('.hind-box').hide(500);
return fal
}
})
})
</script>
step2:CSS
.nav-into {
/*前⾯是绑定到选择器的关键帧的名称，后⾯是时间*/
animation: moveRight .5s;
英国餐桌礼仪-
ms-animation: moveRight .5s;
-o-animation: moveRight .5s;
-webkit-animation: moveRight .5s;
-moz-animation: moveRight .5s;
/*!*在动画结束后（由 animation-iteration-count 决定），动画将应⽤该属性值。*!把物体动画地从⼀个地⽅移动到另⼀个地⽅，并让它停留在那⾥：*/ -ms-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.nav-out {
animation: moveLeft .5s;
brookstone-ms-animation: moveLeft .5s;
-o-animation: moveLeft .5s;
-webkit-animation: moveLeft .5s;
-moz-animation: moveLeft .5s;
-ms-animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
/*0% 是动画的开始时间，100% 动画的结束时间。*/ @keyframes moveLeft {
0% {
left: -300px;
}
100% {
left: 0px;
}
}
@-ms-keyframes moveLeft {
0% {
left: -300px;
}
100% {
left: 0px;
}
}
@-webkit-keyframes moveLeft {
0% {
left: -300px;
libote}
100% {
left: 0px;
}
}
@-moz-keyframes moveLeft {
0% {
left: -300px;
}
100% {
left: 0px;
}
}
@keyframes moveRight {
0% {
left:0px;
}
100% {
left: -300px;
}
}
@-ms-keyframes moveRight {
0% {
left: 0px;
}
}
100% {
left: -300px;
}
}
@-webkit-keyframes moveRight { 0% {
left: 0px;当然英文怎么说
}
100% {
left: -300px;
}
}
@-moz-keyframes moveRight {
0% {
left: 0px;
}
100% {
left: -300px;
}
}
.list_dd {
display: none;
奥巴马夫妇overflow: hidden;
}
.add-move-up {
display: block;
animation: moveTop .5s;
animation-fill-mode: forwards; }
.add-move-bottom {
display: block;
animation: moveBottom .5s;
animation-fill-mode: forwards; }
/
*控制⾼度上下拉动*/
@-webkit-keyframes moveTop {
from {
height: 80px;
}
to {
height: 0px;
}
}
@-webkit-keyframes moveBottom { from {
height: 0px;
历年考研英语分数线}滞育
to {
height: 80px;
}
}
效果图
