duanjue9296
2014-05-03 10:10
浏览 68
已采纳

如何使用wordpress中的选项选择来制作自定义菜单

I have to make menu for small screen sizes in wordpress template . i want to add some code like below in menu.

<select>
  <option>Home</option>
  <option>About</option>
</select>

wordpress default creating menu through ul li I don't know how to add code in menu. plz anybody can do this?

图片转代码服务由CSDN问答提供 功能建议

我必须为小屏幕 sizes 制作 menu wordpress模板。 我想在菜单中添加如下所示的代码。

 &lt; select&gt; 
&lt; option&gt; Home&lt; / option&gt; 
&lt; option&gt;关于&lt; / option&gt  ; 
&lt; / select&gt; 
   
 
 

wordpress 默认创建菜单,通过 ul li 我不知道如何在 menu 中添加代码。 PLZ任何人都可以这样做吗?

  • 写回答
  • 好问题 提建议
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • down2323 2014-05-04 09:30
    已采纳

    I am assuming you are creating a responsive site?

    If you don't mind some jQuery you can create a select navigation like this:

    jQuery( document ).ready(function( $ ) {
    
      // Create the dropdown base
      $("<select />").appendTo("nav");
    
      // Create default option "Go to..."
      $("<option />", {
       "selected": "selected",
       "value"   : "",
       "text"    : "Menu"
      }).appendTo("nav select");
    
      // Populate dropdown with menu items
      $("nav ul li a").each(function() {
       var el = $(this);
       $("<option />", {
         "value"   : el.attr("href"),
         "text"    : el.text()
       }).appendTo("nav select");
      });
    
      $("nav select").change(function() {
        window.location = $(this).find("option:selected").val();
      });
    
    });
    

    Hide the <select> by default:

    nav select {display:none;}
    

    Hide main nav and show <select> on smaller screens:

    @media screen and (max-width: 568px) {
    
      nav select {display:block;}
      nav ul {display:none;}
    }
    
    已采纳该答案
    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题