Q
與調整
2
A
回答
3
窗口大小調整時,這太多了。我不知道這是否可以用CSS來完成。你應該更喜歡..
但這裏是一個工作,但髒fiddle with Javascript/jQuery。 您應該聽resize
事件。
$(document).ready(function (event) {
buildMenu();
$(window).resize(function (event) {
buildMenu();
});
});
1
做它周圍的其他方法,它更靈活,所以,默認情況一個下拉菜單。
在javascript中聽窗口resize事件,在調整大小,可用測量寬度,開始把選擇從下拉菜單中,直到它比屏幕寬,去掉最後一個項目,完成。
3
您可以使用$(window).on('resize', function() { ... });
檢測寬度螞蟻變化並採取相應行動。
這裏是一個jQuery代碼工作
$(function() {
$("<select />").appendTo($("nav"));
var $select = $('nav select');
$select.hide();
$("<option />", {
"selected": "selected",
"value" : "",
"text" : "Go to..."
}).appendTo($select);
$("nav a").each(function() {
var el = $(this);
$("<option />", {
"value" : el.attr("href"),
"text" : el.text()
}).appendTo($select);
});
$(window).on('resize', function() {
console.log($(window).width());
if($(window).width() < 960) {
$($select).show();
$('nav ul').hide();
}
else if($(window).width() > 960) {
$($select).hide();
$('nav ul').show();
}
});
$select.change(function() {
window.location = $(this).find("option:selected").val();
});
});
1
你可以給每個按鈕和重複的選項類,然後使用媒體查詢顯示和隱藏你希望顯示的,保持邏輯的JS到最低限度:
@media (max-width: SIZE-1) {
li.about-us,
li.support-1,
li.support-2,
li.support-3,
li.etc {
display: none;
}
option.about-us,
option.support-1,
option.support-2,
option.support-3,
option.etc {
display: none;
}
}
相關問題
- 1. 調整與CSS
- 2. 與調整
- 3. 與調整大小
- 4. 與Java調整JSplitPane
- 5. 與屏幕調整
- 6. DIV調整與jQuery
- 7. 調整基於與整個網格
- 8. 上傳和調整/與Ember
- 9. 可調整的div與iframe
- 10. 調整與上海華
- 11. 的iframe調整與JavaScript
- 12. Node.js與socket.io一起調整
- 13. 調整大小與ObjectHandles
- 14. 調整的MySQL與10,000臺
- 15. 調整DIV寬度與JS
- 16. 圖像調整與css onhover
- 17. 調整與JList的問題?
- 18. LwjglCanvas與JFrame調整大小
- 19. C#調整ListView與「滯後」
- 20. DIV與邊界調整dragend
- 21. Cubism.js與窗口調整
- 22. 導出CSV調整與ToTitleCase
- 23. iPad與iPhone - 調整CSS/HTML?
- 24. 圖像調整與jquery
- 25. Div的調整與jQuery
- 26. Xcode:UIScrollView與分頁調整
- 27. 居中調整後的div與均勻空間調整大小?
- 28. 在IE瀏覽器調整大小與文檔大小調整
- 29. ListBox自動調整與caliburn.micro不正確地調整
- 30. 撤銷預先調整與jQuery窗口調整大小
你有什麼迄今所做? – Sourabh
的演示看到這個:http://css-tricks.com/examples/ConvertMenuToDropdown/ – Sourabh
您是否嘗試過加入'$(窗口).resize()'函數? – ntgCleaner