加入收藏 | 设为首页 | 会员中心 | 我要投稿 核心网 (https://www.hxwgxz.com/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 电商 > 正文

CSS3 media queries + jQuery实现响应式导航

发布时间:2020-03-16 09:24:30 所属栏目:电商 来源:站长网
导读:副标题#e# 实现一个响应式导航,当屏幕宽度大于700px时,效果如下: 当屏幕宽度小于700px时,导航变成一个小按钮,点击之后有一个菜单慢慢拉下来: 思路: 1.为了之后在菜单上绑定事件,并且不向DOM中添加多余的节点,在大屏幕中出现的导航和小屏幕中的下拉

    border-top: 1px solid #FFF;   

    line-height: 60px;   

}   

.nav-btn {   

    display: none;   

    color: #DE6B73;   

    float: rightright;   

    line-height: 20px;   

    margin: 35px 0;   

}   

@media(max-width:700px){   

    .nav-btn{   

        display: inline-block;   

    }   

}   

@media(min-width:700px){   

    .nav {   

        display: block !important;   

        border-top: none;   

        top: 15px;   

        rightright: 0;   

    }   

}  

总结:

不真正理解一个框架的原理就去用,是很危险的。

我之后试了一个jQuery的.css()方法,他同样是用内联的方式改变的元素的样式。

看样子需要研究一个jQuery是如何工作的了,这样应用的时候才能理解他的行为。

以上所述是小编给大家介绍的CSS3 media queries + jQuery实现响应式导航,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

(编辑:核心网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

热点阅读