目的:

CSS3 media queries结合jQuery实现响应式导航,css3jquery

目的:

福寿绵绵二个响应式导航,当荧屏宽度大于700px时,效果如下:

永利开户送38元体验金 1

当显示器宽度小于700px时,导航变成二个小按键,点击之后有二个菜谱慢慢拉下来:

 永利开户送38元体验金 2

思路:

1.为了以后在菜单上绑定事件,并且不向DOM中丰硕多余的节点,在大屏幕中出现的领航和小荧屏中的下拉领航必须是三个。

   所以小编选拔了将导航相对定位。

2.暗许导航列表是出新的,当显示屏宽度小于700px时它隐藏,并且安装position,当显示屏宽度超越700px时,它现身。也许,暗许导航列表是隐形的,当显示器宽度超越700px时它出现在右边手,小于时隐藏。

问题:

起来的时候,笔者采取了默许他出现,然后出现了叁个主题素材——只要按过了按键,荧屏放大之后导航列表就再也不会出现了。

代码如下:

<div class="nav-box">
    <ul class="nav">
     <li><a href="javascript:void(0);" class="toHome active">Home</a></li>
     <li><a href="javascript:void(0);" class="toPort">Portfolio</a></li>
     <li><a href="javascript:void(0);" class="toCont">Contact</a></li>
    </ul>
    <a href="javascript:void(0);" class="nav-btn">...</a>
</div>

.nav-box {
  position: relative;
}
.nav-btn {
  display: none;
  color: #DE6B73;
  float: right;
  line-height: 20px;
  margin: 35px 0;
}
.nav {
  display: block ;
  border-top: none;
  position: absolute;
  right: 0;
}
@media(max-width:700px){
  .nav-btn{
    display: inline-block;
  }
}
@media(max-width:700px){
 .nav {
  display: none;
  top: 80px;
  background-color: #F79C9C;
  border-top: 1px solid #FFF;
  line-height: 60px;
 }  
}

window.onload=function(){
  $(".nav-btn").click(function(){
    $(".nav").slideToggle(500);
  });
}

于是乎我觉着是自己的笔触出现了难题,我换来了暗中认可他潜伏的点子。结果依旧同样,只要按过了按键,他就再也不会出现了。于是我起来出乎意料jQuery。

解决:

下一场笔者在F12中发觉,小编按过按键之后,他会产出这么一个体制:

永利开户送38元体验金 3

本来这一切都以slideToggle搞的鬼,他是经过设置成分的内联样式让要素隐藏,这种办法设置的体制的先行级是三种方式中最高的,所以在CSS中安装的block根本未曾用了。

要消除那些题目,能够应用js,也足以用贰个优先级越来越高的办法:!important.

若果选拔用!important的话,就须求设置导航列表是暗中认可隐藏的,否则她长久都力不胜任藏身了。

末段的CSS代码如下:

.nav {
  display: none;
  position: absolute;
  right: 10%;
  top: 80px;
  background-color: #F79C9C;
  border-top: 1px solid #FFF;
  line-height: 60px;
}
.nav-btn {
  display: none;
  color: #DE6B73;
  float: right;
  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;
    right: 0;
  }
}

总结:

不确实明白三个框架的规律就去用,是很凶险的。

本人然后试了三个jQuery的.css()方法,他一样是用内联的艺术改造的成分的体裁。

探望要求切磋贰个jQuery是何等工作的了,那样应用的时候才干驾驭她的一言一行。

如上便是本文的全体内容,希望对大家的学习抱有帮忙,也希望大家多多协理帮客之家。

media
queries结合jQuery达成响应式导航,css3jquery 目标:
完毕叁个响应式导航,当荧屏宽度大于700px时,效果如下:
当显示器宽度小于700px时…

达成二个响应式导航,当显示屏宽度大于700px时,效果如下:

永利开户送38元体验金 4

当显示器宽度小于700px时,导航造成一个小开关,点击之后有四个食谱稳步拉下来:

 永利开户送38元体验金 5

思路:

1.为了以往在菜单上绑定事件,并且不向DOM中充裕多余的节点,在大显示器中出现的领航和小显示屏中的下拉领航必须是一个。

   所以小编采纳了将导航相对定位。

2.暗中认可导航列表是现身的,当显示屏宽度小于700px时它隐藏,并且安装position,当显示屏宽度超过700px时,它出现。或然,暗许导航列表是隐蔽的,当荧屏宽度超越700px时它出未来左臂,小于时隐藏。

问题:

始发的时候,笔者选择了暗中同意他出现,然后出现了二个主题材料——只要按过了开关,荧屏放大之后导航列表就再也不会出现了。

代码如下:

<div class="nav-box">
    <ul class="nav">
     <li><a href="javascript:void(0);" class="toHome active">Home</a></li>
     <li><a href="javascript:void(0);" class="toPort">Portfolio</a></li>
     <li><a href="javascript:void(0);" class="toCont">Contact</a></li>
    </ul>
    <a href="javascript:void(0);" class="nav-btn">...</a>
</div>


.nav-box {
  position: relative;
}
.nav-btn {
  display: none;
  color: #DE6B73;
  float: right;
  line-height: 20px;
  margin: 35px 0;
}
.nav {
  display: block ;
  border-top: none;
  position: absolute;
  right: 0;
}
@media(max-width:700px){
  .nav-btn{
    display: inline-block;
  }
}
@media(max-width:700px){
 .nav {
  display: none;
  top: 80px;
  background-color: #F79C9C;
  border-top: 1px solid #FFF;
  line-height: 60px;
 }  
}



window.onload=function(){
  $(".nav-btn").click(function(){
    $(".nav").slideToggle(500);
  });
}

于是乎笔者觉着是自个儿的笔触出现了难题,笔者换来了暗中认可他潜伏的方法。结果恐怕一直以来,只要按过了开关,他就再也不会出现了。于是小编起来不敢相信 无法相信jQuery。

解决:

然后自身在F12中发觉,作者按过按键之后,他会冒出这么贰个样式:

永利开户送38元体验金 6

本来这一切都以slideToggle搞的鬼,他是经过设置成分的内联样式让要素隐藏,这种艺术设置的体制的优先级是二种方法中最高的,所以在CSS中装置的block根本未曾用了。

要缓和那一个难题,能够应用js,也能够用三个预先级更加高的方法:!important.

假诺选用用永利开户送38元体验金,!important的话,就必要安装导航列表是默许隐藏的,否则她恒久都无所适从隐藏了。

说起底的CSS代码如下:

.nav {
  display: none;
  position: absolute;
  right: 10%;
  top: 80px;
  background-color: #F79C9C;
  border-top: 1px solid #FFF;
  line-height: 60px;
}
.nav-btn {
  display: none;
  color: #DE6B73;
  float: right;
  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;
    right: 0;
  }
}

总结:

不真的精晓一个框架的准绳就去用,是很危险的。

本身然后试了二个jQuery的.css()方法,他一致是用内联的章程退换的要素的样式。

看看要求讨论三个jQuery是如何是好事的了,那样应用的时候技能领略他的行为。

上述正是本文的全体内容,希望对大家的上学抱有扶助,也冀望大家多多援助脚本之家。

您恐怕感兴趣的稿子:

  • jQuery+CSS3达成仿花瓣网固定顶端地点带悬浮效果的导航菜单
  • 各式各样标导航条效果css3整合jquery代码落成
  • jQuery+CSS3贯彻种种接纳普遍的导航条制作实例详解
  • 行使jquery+CSS3兑现仿windows10开首菜单的下拉领航菜单特效
  • jquery和css3完毕的炫彩风尚的美食指南导航
  • 7款风格新颖的jQuery/CSS3菜单导航分享
  • jquery+css3兑现大花熊tv导航代码分享

相关文章