튜토리얼이나 플러그인 (jQueryUI의 Accordian)뿐만 아니라 가로로 붕괴하는 메뉴를 만들 수있는 jQuery에서 링크를 제공 할 수 있습니까? 내가 뭘 할지라도 내가 아는 한 수직적 인 것들을 찾을 수 있고, Wordpress는 그 핵심에 수퍼 - 통합되어있다.Wordpress 관리자와 같은 메뉴
편집 : 다음은 일부 스크린 샷입니다. 첫 번째는 정상이며 두 번째는 세로로 확장/축소되고 세 번째는 가로로 축소됩니다.
는 jQuery를 UI를 시도 내가 어떤 WP 그게 전부가 사용하는 생각 http://jqueryui.com/
HTML
<div class="hide-menu">Hide Menu</div>
<ul id="menu">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li>
<ul class="subs"><li><a href="">Subs</a></li></ul>
</li>
</ul>
jQuery를 지금
$('.hide-menu').bind('click',function(){
$('#menu').animate({width:30});//can always extend this.
//u can use the if statement or toggle if u need toggling feature
});
$('#menu').children('li').bind('click',function(){
//here u can hide the subs
})
당연히 위 정확히 워드 프레스처럼 작동하지 않을 또는 전혀 작동하지 않을 수 있습니다하지만 당신은 아이디어 : 내가
이btw u는'# menu'가 작을 때'overflow : hidden; '이 필요하고 최대화 될 때'overflow : visible'가 필요하다는 것을 확인할 수 있습니다 :) (css에서 is) – Val
당신은 아코디언 또는 Collapsible Menu 같은 플러그인을 사용할 수있는 희망을 얻을 수 (조금 더 wordpress처럼) 수직 붕괴를 위해, 그리고 TabSlideOut과 같은 플러그인으로 수평으로 붕괴 될 수있는 div에 그 메뉴를 넣으십시오. 또는 메뉴. DIV의 너비를 .animate()로 변경하십시오.
또한 wordpress가 메뉴에서 텍스트를 제거하지만 아이콘을 남기는 것을 볼 수 있습니다.
클래스를 토글합니다. 가로로 전환되는 화살표가 있습니다. 따라서 CSS를 추가하거나 클래스를 제거하면 다음과 같이 효과가 나타납니다.
$(mi-button).click(function(e){
$(mi-menu-selector).toggleClass(your-class);
e.preventDefault;
});
css는 메뉴의 각 li의 텍스트를 표시하거나 숨 깁니다.
.hide-horizontal{
text-indent:-999em;
}
아이콘과 CSS 속성을 유지 관리합니다. Wordpress Admin Menu에서와 같이. –
이렇게하려면 반응 형 디자인을 사용해야합니다.
당신은 CSS 미디어 쿼리를 사용할 수 있습니다
죄송합니다, 당신이 무엇을 요구하고 있는가? 당신은 수직 및 수평으로 붕괴하는 메뉴를 원하십니까 ??? 혼란 스러워요, 예가 있습니까? –
나는 그가 의미하는 것 같아. 메뉴 링크가 수직으로 접 히고 전체 메뉴 자체가 왼쪽으로 이동합니까? 그러나 이것은 anyones 추측 롤 수 있습니다 :) – Val
@Neurofluxation : 명확성을 위해 스크린 샷을 추가했습니다 :) – Josh