我需要做一個下拉菜單並且像下面這個例子一樣下降

Question

我需要創建一個下拉導航欄（右上角）和一個下拉按鈕/鏈接（在左上角）。一旦屏幕下降達到某個像素寬度，將顯示下拉菜單。如果不能看到下拉（NAV），請將瀏覽器調整爲較小。

他們需要響應瀏覽器的大小。這是一個移動網站（iPhone和Android）。請儘可能包括小提琴。或詳細說明。我不想使用引導帶或任何其他平臺只是Html5 css3和JavaScript/jQuery。請包括動畫。

例： http://treadsack.com/

我如何呢？

非常感謝！

Answer 1

那麼你可以使用CSS media queries應用不同的風格，當viewport/screen調整大小：

@media (max-width:600px) { 
/* if the viewport is less than or equal to 600px hide the div */ 
    div { display:none; } 
} 

如果你有這樣的標記結構：

<nav> 
<span>NAV</span> 
<ul> 
    <li>Home</li> 
    <li>About</li> 
    <li>News</li> 
</ul> 
</nav> 

然後CSS將是：

ul { 
    display:block; 
} 
li { 
    display:inline-block; 
    height:30px; 
    line-height:30px; 
} 
span { 
    display:none; 
    height:30px; 
    line-height:30px; 
    cursor:pointer; 
} 
@media (max-width:600px) { 
    ul { 
     display:none; 
    } 
    li { 
     display:block; 
    } 
    span { 
     display:inline; 
    } 
} 

然後當您點擊NAV時顯示/隱藏下拉菜單：

$('span').click(function() { 
    $(this).siblings('ul').slideToggle('slow'); 
}); 

看到這個jsfiddle。

---

現在，當你再次點擊<span>隱藏下拉列表，然後你調整視口寬度大於600 的內嵌菜單列表中沒有顯示。這是由於.slideToggle(),js/jQuery將其樣式設置爲元素上的內聯屬性<ul style="">，並覆蓋了CSS樣式。你可以通過在你的CSS上聲明!important來避免jQuery樣式，但是在這種情況下它不會有幫助，因爲我們使用jQuery來滑動下拉菜單。

解決方案也是通過jQuery處理viewport/window調整大小。 CSS媒體查詢偵聽window.innerWidth，但這可能會在跨瀏覽器（特別是較老的IE）上返回不同的值。因此，我們需要創建一個返回viewport-width功能：

function viewportWidth() { 
    var e = window, 
     a = 'inner'; 
    if (!('innerWidth' in window)) { 
     a = 'client'; 
     e = document.documentElement || document.body; 
    } 
    return e[a + 'Width']; 
} 

然後用它在窗口resize事件：

$(window).resize(function() { 
    if (viewportWidth() <= 600) { 
     $('span').show(); 
     $('ul').hide(); 
    } else { 
     $('ul').show(); 
     $('span').hide(); 
    } 
}); 

檢查這個jsfiddle。

Answer 2

這會幫助你在正確的方向得到：

我做了一個jsFiddle，用下面的jQuery的代碼與菜單做實際的工作：

var links_are_showing = false; 
$("#links").click(function() { 
    if (!links_are_showing) { // Link menu is not visible, show 
     $("#links_container").slideDown(400); 
     $("#main_container").animate({'top':'320px'},400); // Change 400 to any time in ms you want 
     links_are_showing = true; 
    } // Link menu is not visible, show 
    else { // Link menu is visible, hide 
     $("#links_container").slideUp(400); 
     $("#main_container").animate({'top':'0'},400); // Change 400 to any time in ms you want 
     links_are_showing = false; 
    } // Link menu is visible, hide 
}); 


var nav_is_showing = false; 
$("#nav").click(function(){ 
    if (!nav_is_showing) { // Nav menu is not visible, show 
     $("#nav_container").slideDown(400); // Change 400 to any time in ms you want 
     nav_is_showing = true; 
    } // Nav menu is not visible, show 
    else { // Nav menu is visible, hide 
     $("#nav_container").slideUp(400); // Change 400 to any time in ms you want 
     nav_is_showing = false; 
    } // Nav menu is visible, hide 
}); 

希望它能幫助！