這篇文章主要為大家詳細介紹了CSS3 media queries結合jQuery實現響應式導航,具有一定的參考價值,感興趣的小伙伴們可以參考一下
目的:
實現一個響應式導航,當屏幕寬度大於700px時,效果如下:
當螢幕寬度小於700px時,導覽變成一個小按鈕,點擊之後有一個選單慢慢拉下來:
之後在選單上綁定事件,並且不向DOM中添加多餘的節點,在大螢幕中出現的導航和小螢幕中的下拉導航必須是一個。
所以我選擇了將導航絕對定位。 2.預設導航清單是出現的,當螢幕寬度小於700px時它隱藏,並且設定position,當螢幕寬度大於700px時,它出現。或者,預設導覽清單是隱藏的,當螢幕寬度大於700px時它出現在右側,小於時隱藏。 問題:開始的時候,我選擇了預設他出現,然後出現了一個問題——只要按過了按鈕,螢幕放大之後導航清單就再也不會出現了。 程式碼如下:<p 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> </p>
.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中發現,我按過按鈕之後,他會出現這樣一個樣式:
原來這一切都是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是如何運作的了,這樣應用的時候才能理解他的行為。