CSS3 media queries + jQuery完成回应式导航栏

2021-03-18 15:31 jianzhan

目地:

完成1个回应式导航栏,当显示屏宽度超过700px时,实际效果以下:

当显示屏宽度小于700px时,导航栏变为1个小按钮,点一下以后有1个菜单渐渐地拉下来:

思路:

1.以便以后在菜单上关联恶性事件,而且不向DOM中加上过剩的连接点,在大显示屏中出現的导航栏和小显示屏中的往下拉导航栏务必是1个。

   因此我挑选了将导航栏肯定精准定位。

2.默认设置导航栏目录是出現的,当显示屏宽度小于700px时它掩藏,而且设定position,当显示屏宽度超过700px时,它出現。或,默认设置导航栏目录是掩藏的,当显示屏宽度超过700px时它出現在右边,小于时掩藏。

难题:

刚开始的情况下,我挑选了默认设置他出現,随后出現了1个难题——要是按过了按钮,显示屏变大以后导航栏目录就不再会出現了。

编码以下:

CSS Code拷贝內容到剪贴板
  1. <div class="nav-box">   
  2.         <ul class="nav">   
  3.           <li><a href="javascript:void(0);" class="toHome active">Home</a></li>   
  4.           <li><a href="javascript:void(0);" class="toPort">Portfolio</a></li>   
  5.           <li><a href="javascript:void(0);" class="toCont">Contact</a></li>   
  6.         </ul>   
  7.         <a href="javascript:void(0);" class="nav-btn">...</a>   
  8. </div>   
  9. .nav-box {   
  10.     positionrelative;   
  11. }   
  12. .nav-btn {   
  13.     displaynone;   
  14.     color#DE6B73;   
  15.     floatrightright;   
  16.     line-height20px;   
  17.     margin35px 0;   
  18. }   
  19. .nav {   
  20.     displayblock ;   
  21.     border-topnone;   
  22.     positionabsolute;   
  23.     rightright: 0;   
  24. }   
  25. @media(max-width:700px){   
  26.     .nav-btn{   
  27.         displayinline-block;   
  28.     }   
  29. }   
  30. @media(max-width:700px){   
  31.   .nav {   
  32.     displaynone;   
  33.     top80px;   
  34.     background-color#F79C9C;   
  35.     border-top1px solid #FFF;   
  36.     line-height60px;   
  37.   }      
  38. }   
  39. window.onload=function(){   
  40.     $(".nav-btn").click(function(){   
  41.         $(".nav").slideToggle(500);   
  42.     });   
  43. }  

因而我认为是我的思路出現了难题,我换为了默认设置他掩藏的方法。結果還是1样,要是按过了按钮,他就不再会出現了。因而我刚开始怀疑jQuery。

处理:

随后我在F12中发现,我按过按钮以后,他会出現这样1个款式:

原先这1切全是slideToggle搞的鬼,他是根据设定元素的内联款式让元素掩藏,这类方式设定的款式的优先选择级是3种方法中最高的,因此在CSS中设定的block压根沒有用了。

要处理这个难题,可使用js,还可以用1个优先选择级更高的方法:!important.

假如挑选用!important的话,就必须设定导航栏目录是默认设置掩藏的,要不然他始终都没法掩藏了。

最终的CSS编码以下:

CSS Code拷贝內容到剪贴板
  1. .nav {   
  2.     displaynone;   
  3.     positionabsolute;   
  4.     rightright: 10%;   
  5.     top80px;   
  6.     background-color#F79C9C;   
  7.     border-top1px solid #FFF;   
  8.     line-height60px;   
  9. }   
  10. .nav-btn {   
  11.     displaynone;   
  12.     color#DE6B73;   
  13.     floatrightright;   
  14.     line-height20px;   
  15.     margin35px 0;   
  16. }   
  17. @media(max-width:700px){   
  18.     .nav-btn{   
  19.         displayinline-block;   
  20.     }   
  21. }   
  22. @media(min-width:700px){   
  23.     .nav {   
  24.         displayblock !important;   
  25.         border-topnone;   
  26.         top15px;   
  27.         rightright: 0;   
  28.     }   
  29. }  

总结:

不真实了解1个架构的基本原理就去用,是很风险的。

我以后试了1个jQuery的.css()方式,他一样是用内联的方法更改的元素的款式。

看模样必须科学研究1个jQuery是怎样工作中的了,这样运用的情况下才可以了解他的个人行为。

以上所述是网编给大伙儿详细介绍的CSS3 media queries + jQuery完成回应式导航栏,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!