다음과 같이 응답 버튼이 필요합니다. 메뉴에 15 개의 버튼이 있습니다. 브라우저 크기를 조정하면, 일부 버튼은 다음과 같이 <select>
에 추가 : 응답 메뉴의 크기 조정
을 내가 문제를 보여 this jsFiddle 있습니다
다음과 같이 응답 버튼이 필요합니다. 메뉴에 15 개의 버튼이 있습니다. 브라우저 크기를 조정하면, 일부 버튼은 다음과 같이 <select>
에 추가 : 응답 메뉴의 크기 조정
을 내가 문제를 보여 this jsFiddle 있습니다
이것은 창 크기를 조정할 때 너무 많은 조작입니다. 이것이 CSS로 할 수 있는지 나는 모른다. 당신은 그것을 선호해야합니다 ..
하지만 여기에 작동하지만 더러운 fiddle with Javascript/jQuery입니다. resize
이벤트를 청취해야합니다.
$(document).ready(function (event) {
buildMenu();
$(window).resize(function (event) {
buildMenu();
});
});
정말 고마워요 :) 당신은 정말로 나를 도왔습니다;) – mghhgm
코드가 불완전합니다. 내가
나는 단지 당신에게 논리를 보여주기 위해서 .. 완전한 응용 프로그램이 아닙니다. –
이 더 유연, 다른 방법으로 주위를 수행을하므로, 기본 상황입니다 드롭 다운 메뉴.
자바 스크립트에서 크기 조정 이벤트, 크기 조정, 사용 가능한 너비 측정, 메뉴에서 드롭 다운의 옵션 시작, 화면보다 넓어 질 때까지 마지막 항목 제거, 완료.
$(window).on('resize', function() { ... });
을 사용하면 넓이의 개미 변화를 감지하고 그에 따라 행동 할 수 있습니다.
여기
$(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();
});
});
당신은 각 버튼과 중복 옵션 클래스를 줄 수있는 다음 최소로 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;
}
}
지금까지 무엇을 했습니까? – Sourabh
데모보기 : http://css-tricks.com/examples/ConvertMenuToDropdown/ – Sourabh
'$ (window) .resize()'함수를 추가해 보았습니까? – ntgCleaner