您现在的位置是：首页 > 学无止境> CSS3|HTML5网站首页学无止境CSS3|HTML5

点击弹出导航效果

导航   css3  
简介点击弹出导航效果

html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>导航弹出层</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>

</head>
<body>
<div class="index_con">
    <div class="head"><div class="mobile-inner-header-icon mobile-inner-header-icon-out"><span></span><span></span></div><i><a href="/"></a></i></div>
    <div class="mobile-inner-nav">
      <a href="">公司简介</a>
      <a href="">公司项目</a>
      <a href="">案例展示</a>
      <a href="">加盟我们</a>
      <a href="">联系我们</a>
    </div>    
    
</div>
<script type="text/javascript">
    $(window).load(function () {
      $(".mobile-inner-header-icon").click(function(){
          $(this).toggleClass("mobile-inner-header-icon-click mobile-inner-header-icon-out");
          $(".mobile-inner-nav").slideToggle(250);
      });
      $(".mobile-inner-nav a").each(function( index ) {
          $( this ).css({'animation-delay': (index/10)+'s'});
      });
    });
</script>
</body>
</html>

style.css:

@charset "utf-8";
/*CSS重置样式*/
html { font-family:"微软雅黑", "Helvetica Neue", Helvetica, STHeiTi, Arial, sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; font-size: 62.5%;
    tap-highlight-color: transparent;
    -webkit-tap-highlight-color: transparent;
    -ms-tap-highlight-color: transparent;}
body { margin: 0; font-size:0.22rem; line-height: 0.36rem; color: #404040; height: 100%; overflow-x: hidden; -webkit-overflow-scrolling: touch; text-align:justify;}

.index_con{width:6rem;height:auto;margin:0 auto;overflow:hidden;box-shadow:0 0 20px #5D5C61; padding-top:1.06rem; box-sizing:border-box; -moz-box-sizing:border-box; }

.head{width:6rem; height:1.06rem; background:#9e0a2d; background-size:1.58rem;  position:fixed; top:0;left:50%; margin-left:-3rem;z-index: 9999999;}
.head i{width:0.29rem;height:0.29rem; display:inline-block; background:url(../images/tel_06.png) no-repeat; background-size:0.29rem; position:absolute;right:0.42rem; top:0.4rem;}
.head i a{width:0.29rem;height:0.29rem; display:block}

.mobile-inner-header-icon{color:#fff;height:0.26rem;font-size:0.25rem;text-align:center;float:left;width:0.36rem;position:relative;top:0.42rem;left:0.42rem;-webkit-transition:background .5s;-moz-transition:background .5s;-o-transition:background .5s;transition:background .5s; cursor:pointer}
.mobile-inner-header-icon span{position:absolute;left:calc((100% - 0.25rem)/ 2);top:calc((100% - 1px)/ 2);width:0.25rem;height:1px;background-color:rgba(255,255,255,.6);opacity:0}
.mobile-inner-header-icon span:nth-child(1){transform:translateY(4px) rotate(0)}
.mobile-inner-header-icon span:nth-child(2){transform:translateY(-4px) rotate(0)}
.mobile-inner-header-icon-click span:nth-child(1){animation-duration:.5s;animation-fill-mode:both;animation-name:clickfirst;opacity:1}
.mobile-inner-header-icon-click span:nth-child(2){animation-duration:.5s;animation-fill-mode:both;animation-name:clicksecond;opacity:1}
@keyframes clickfirst{0%{transform:translateY(4px) rotate(0)}
100%{transform:translateY(0) rotate(45deg)}
}
@keyframes clicksecond{0%{transform:translateY(-4px) rotate(0)}
100%{transform:translateY(0) rotate(-45deg)}
}
.mobile-inner-header-icon-out{background:url(../images/nav_06.png) no-repeat;background-size:0.36rem;animation-fill-mode:both;animation-duration:1s;animation-name:infirst}
@keyframes infirst{0%{opacity:0}
100%{opacity:1}
}
.mobile-inner-header-icon-out span:nth-child(1){animation-duration:.5s;animation-fill-mode:both;animation-name:outfirst}
.mobile-inner-header-icon-out span:nth-child(2){animation-duration:.5s;animation-fill-mode:both;animation-name:outsecond}
@keyframes outfirst{0%{transform:translateY(0) rotate(-45deg)}
100%{transform:translateY(-4px) rotate(0)}
}
@keyframes outsecond{0%{transform:translateY(0) rotate(45deg)}
100%{transform:translateY(4px) rotate(0)}
}
.mobile-inner-nav{background-color:rgba(0,0,0,.6);width:6rem;height:100%;position:fixed;top:1.06rem;left:50%;margin-left:-3rem;padding-top:0.3rem;padding-bottom:0.8rem;display:none; z-index: 999999999999;}
.mobile-inner-nav a{display:inline-block;line-height:0.5rem;text-decoration:none;width:80%;margin-left:10%;color:#fff;border-bottom:solid 1px rgba(255,255,255,.3);-webkit-transition:all .5s;-moz-transition:all .5s;-o-transition:all .5s;transition:all .5s;font-weight:300}
.mobile-inner-nav a:hover{color:#027368;border-bottom:solid 1px rgba(255,255,255,.2)}


上一篇：返回列表

下一篇：表单提交tips提示

相关文章

特别推荐

  • 层叠卡片幻灯片切换效果 阅读

  • css光泽一闪而过的效果 阅读

  • 幻灯片效果 阅读

推荐文章

点击排行

标签云

友情链接

Top