请输入关键字词

最新搜索
1hbuilder 2 3漫威 4 5人工智能 6 7输入 8
热门搜索
1seo 2hbuilder 3头条号 4网站 5帝国 6cms 7搜索 8公共

用js实现手机导航-优化版

个人博客 2020-11-17 19:17 杨青青博客 68
用js实现手机导航-优化版HTML<divid="mnav"><divclass="logo"><ahref="#">个人博客</a></div><h2id="mnavh"><spanclass="navicon"></span></h2><ulid="starlist"&g...

用js实现手机导航-优化版

HTML

<div id="mnav">
    <div class="logo"><a href="#">个人博客</a></div>
    <h2 id="mnavh"><span class="navicon"></span></h2>
    <ul id="starlist">
        <li><a href="#">网站首页</a></li>
        <li><a href="#">关于我</a></li>
        <li><a href="#">模板分享</a></li>
        <li><a href="#">学无止境</a></li>
        <li><a href="#">慢生活</a></li>
        <li><a href="#">博客导航</a></li>
        <li><a href="#">留言</a></li>
    </ul>
</div>

CSS

/* header */
header{position:fixed;top:0;z-index:100;overflow:hidden;width:100%;background:#333;color:#fff;line-height:40px;}
.logo{float:left;font-size:22px;}
#mnav{margin:auto;width:1200px;}
#mnav a{color:#fff;}
#mnavh{float:right;display:none;padding:0 5px;width:30px;height:40px;text-align:center;}
#starlist{float:right;}
#starlist li{float:left;display:inline-block;padding:0 0 0 40px;font-size:16px;}
.navicon{position:relative;display:block;margin-top:18px;width:30px;height:5px;background-color:#fff;}
.navicon:after,.navicon:before{position:absolute;display:block;width:30px;height:5px;background:#fff;content:'';-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:margin,-webkit-transform;transition-property:margin,-webkit-transform;transition-property:margin,transform;transition-property:margin,transform,-webkit-transform;}
.navicon:before{margin-top:-10px;}
.navicon:after{margin-top:10px;}
.open .navicon{background:0 0;}
.open .navicon:before{margin-top:0;-webkit-transform:rotate(45deg);transform:rotate(45deg);}
.open .navicon:after{margin-top:0;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);}
.open .navicon:after,.open .navicon:before{position:absolute;display:block;width:30px;height:5px;background:#fff;content:'';}
/* for 768px or less */
@media screen and (max-width: 768px) {
    #mnav{overflow:hidden;width:100%;}
    #mnavh{display:block;}
    #starlist{display:none;width:100%;}
    #starlist li{float:none;display:block;padding:0;width:100%;text-align:center;}
}

JS

window.onload = function (){
    var oH2 = document.getElementById("mnavh");
    var oUl = document.getElementById("starlist");
    oH2.onclick = function (){
        var style = oUl.style;
        style.display = style.display == "block" ? "none" : "block";
        oH2.className = style.display == "block" ? "open" : "";
    }
}

本文转载:杨青青博客

特别声明:本文仅供交流学习 , 版权归属原作者,部分文章推送时未能及时与原作者取得联系,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。若本文来源标注错误或无意侵犯到您的知识产权作品或损害了您的利益,烦请发送邮件与我们取得联系4956106#qq.com,我们会及时修改或删除。

手机扫描左侧二维码查看本文信息!

本文标题:用js实现手机导航-优化版

本文地址:https://www.cbing.net/daima/7.html

js   实现   手机   优化  
分享到:
wz1

文章评论

来说两句吧...共有0条评论

celan1