WordPress 类似管理员的菜单

Posted 2023-03-06

【中文标题】WordPress 类似管理员的菜单

【英文标题】：Wordpress Admin-Like Menu

【发布时间】：2011-07-08 23:06:50

【问题描述】：

谁能给我一个教程或插件的链接，最好是在 jQuery 中，这将允许我创建一个不仅可以垂直折叠（jQueryUI 的 Accordian）而且还可以水平折叠的菜单？不管我用谷歌搜索什么，我能找到的都是垂直的，据我所知，Wordpress 的核心是超级集成的。

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

【问题讨论】：

对不起，你问的是什么？你想要一个垂直和水平折叠的菜单？？？好困惑，有例子吗？

我认为他的意思是。菜单链接垂直折叠，整个菜单本身向左滑动？但这可能是任何人的猜测哈哈:)

@Neurofluxation：为清晰起见添加了截图:)

@Val：为清楚起见添加了截图:)

@josh 你有很多方法可以做到这一点

【参考方案1】：

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

【参考方案2】：

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

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

【参考方案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 那样工作，或者可能根本无法工作，但你明白了 :) 我希望

【讨论】：

顺便说一句，你可以确保当#menu 很小时你需要overflow:hidden;，然后在最大化时需要overflow:visible :)（在 css 中）

【参考方案4】：

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

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

);

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

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

【讨论】：

您将维护图标和 CSS 属性。就像在 Wordpress 管理菜单中一样。

【参考方案5】：

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

您可以使用 CSS 媒体查询：

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

http://mediaqueri.es/