Wordpress管理员菜单

Question

任何人都可以为我提供指向教程或插件的链接，最好是在jQuery中允许我创建一个菜单，不仅可以垂直折叠（jQueryUI的Accordian），还可以水平折叠？无论我谷歌是什么，我所能找到的只是垂直的，而且据我所知，Wordpress的超级集成到它的核心。

编辑：这是一些截图。第一个是正常的，第二个是垂直展开/折叠，第三个是水平折叠。

Answer 1

你可以使用像Accordion这样的插件或Collapsible Menu（有点像wordpress）来进行垂直折叠，然后将该菜单放在一个可以使用TabSlideOut等插件水平折叠的div中。或者只需使用.animate（）更改菜单DIV的宽度。

另请注意wordpress如何从菜单中删除文本但保留图标。

Answer 2

尝试jQuery UI我认为这是WP使用的 http://jqueryui.com/

Answer 3

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
})

现在当然上面的内容不会像wordpress一样工作或根本不起作用，但你明白了:)我希望

Answer 4

我将切换一个班级，因为你可以看到有一个箭头可以切换到水平。所以，只需添加或删除类，使用CSS即可完成效果，如下所示：

$(mi-button).click(function(e){
     $(mi-menu-selector).toggleClass(your-class);
     e.preventDefault;

});

使用Css显示或隐藏菜单中每个li的文本。

.hide-horizontal{
text-indent:-999em;
}

Answer 5

您需要使用响应式设计来实现这一目标。

您可以使用CSS媒体查询：

http://en.wikipedia.org/wiki/Responsive_Web_Design

http://mediaqueri.es/