在前端開發(fā)中,我們常常需要利用CSS3 media queries + jQuery來實現(xiàn)響應(yīng)式導(dǎo)航,那它的具體實現(xiàn)步驟和方法到底是怎樣的呢?一起來看看吧,希望可以幫助大家更好地學(xué)習(xí)CSS3。
目的:
實現(xiàn)一個響應(yīng)式導(dǎo)航,當(dāng)屏幕寬度大于700px時,效果如下:
當(dāng)屏幕寬度小于700px時,導(dǎo)航變成一個小按鈕,點擊之后有一個菜單慢慢拉下來:
思路:
1.為了之后在菜單上綁定事件,并且不向DOM中添加多余的節(jié)點,在大屏幕中出現(xiàn)的導(dǎo)航和小屏幕中的下拉導(dǎo)航必須是一個。
所以我選擇了將導(dǎo)航絕對定位。
2.默認導(dǎo)航列表是出現(xiàn)的,當(dāng)屏幕寬度小于700px時它隱藏,并且設(shè)置position,當(dāng)屏幕寬度大于700px時,它出現(xiàn)。或者,默認導(dǎo)航列表是隱藏的,當(dāng)屏幕寬度大于700px時它出現(xiàn)在右側(cè),小于時隱藏。
問題:
開始的時候,我選擇了默認他出現(xiàn),然后出現(xiàn)了一個問題—— 只要按過了按鈕,屏幕放大之后導(dǎo)航列表就再也不會出現(xiàn)了 。
代碼如下:
<div>
<ul>
<li><a href="javascript:void(0);" class="toHome active">Home</a></li>
<li><a href="javascript:void(0);">Portfolio</a></li>
<li><a href="javascript:void(0);">Contact</a></li>
</ul>
<a href="javascript:void(0);">...</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);
});
}
于是我以為是我的思路出現(xiàn)了問題,我換成了默認他隱藏的方式。結(jié)果還是一樣,只要按過了按鈕,他就再也不會出現(xiàn)了。于是我開始懷疑jQuery。
解決:
然后我在F12中發(fā)現(xiàn),我按過按鈕之后,他會出現(xiàn)這樣一個樣式:
原來這一切都是slideToggle搞的鬼,他是通過設(shè)置元素的內(nèi)聯(lián)樣式讓元素隱藏,這種方法設(shè)置的樣式的優(yōu)先級是三種方式中最高的,所以在CSS中設(shè)置的block根本沒有用了。
要解決這個問題,可以使用js,也可以用一個優(yōu)先級更高的方式:!important.
如果選擇用!important的話,就需要設(shè)置導(dǎo)航列表是默認隱藏的,不然他永遠都無法隱藏了。
最后的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;
}
}
總結(jié):
不真正理解一個框架的原理就去用,是很危險的。
我之后試了一個jQuery的.css()方法,他同樣是用內(nèi)聯(lián)的方式改變的元素的樣式。
看樣子需要研究一個jQuery是如何工作的了,這樣應(yīng)用的時候才能理解他的行為。
文章來源:博客園