【问题标题】:Wordpress Admin-Like MenuWordPress 类似管理员的菜单
【发布时间】:2011-07-08 23:06:50
【问题描述】:

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

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

【问题讨论】:

  • 对不起,你问的是什么?你想要一个垂直和水平折叠的菜单???好困惑,有例子吗?
  • 我认为他的意思是。菜单链接垂直折叠,整个菜单本身向左滑动?但这可能是任何人的猜测哈哈:)
  • @Neurofluxation:为清晰起见添加了截图:)
  • @Val:为清楚起见添加了截图:)
  • @josh 你有很多方法可以做到这一点

标签: javascript jquery css wordpress menu


【解决方案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/

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多