您现在的位置是:首页 > 学无止境> CSS3|HTML5网站首页学无止境CSS3|HTML5
点击弹出导航效果
- CSS3|HTML5
- 2020-08-10
- 3983已阅读
简介点击弹出导航效果
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提示