使用jquery響應導航欄

我有一個導航欄，我想作出響應...當用戶調整窗口大小小於特定值時，<a>標記的填充應相應更改以適應所有<li>當前窗口寬度內的元素...這裏是我的jsfiddle 在我的例子中，如果我們使widow的寬度小於390px，最後一個元素下來了...我想這樣做，當用戶去調整窗口的寬度時，比390px，元素應該開始變小，可能是通過改變它們的左側和右側填充.... ，以便它會變得響應...我正在使用jQuery .... 我該如何實現這一目標？使用jquery響應導航欄

來源

2013-04-04 vikas devde

請張貼您的問題代碼，jsfiddle鏈接將得到downvoted：http://meta.stackexchange.com/questions/84342/answer-that-only-contains-a-link-to-jsfiddle – Lowkase 2013-04-04 18:36:14

我只有html標籤和CSS ...並使用jsfiddle我可以告訴你我在做什麼 – 2013-04-04 18:38:36

@vikasdevde我們希望你在你的帖子中發佈代碼的原因是這樣很容易看到，未來的訪問者將能夠訪問它。您仍然可以將JSFiddle作爲補充發布。 – 2013-04-04 18:40:19

在你的CSS使用媒體查詢，jQuery是沒有必要在這種情況下：

http://jsfiddle.net/5kNgy/2/

@media only screen and (min-width:0px) and (max-width:390px) {   
    .hor-menu ul li a {padding:2px;} 
}

來源

2013-04-04 18:40:05 Lowkase

謝謝... Lowkase ...但有沒有一種方法使用jQuery，我們可以做一個平滑的轉換 – 2013-04-04 18:41:45

Vikas，你應該看看Twitter Boostrap。 http://twitter.github.com/bootstrap/scaffolding.html#responsive你可能最終在這裏重新發明輪子......只是一個想法。 – 2013-04-04 18:47:41

謝謝@ Moby'sStuntDouble – 2013-04-04 18:49:06

@media (max-width: 390px) 
{ 
    .hor-menu ul li a { padding: 0 0 0 0 !important; } 
}

我覺得這是你試圖做什麼？

來源

2013-04-04 18:41:30

使用jquery響應導航欄

回答

相關問題