Question

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

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

wordpress默认创建菜单ul li 我不知道如何在code中添加menu。 PLZ任何人都可以这样做吗？

Answer 1

我假设您正在创建自适应网站？

如果你不介意一些jQuery，你可以创建一个这样的选择导航：

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

});

默认隐藏<select>：

nav select {display:none;}

隐藏主导航并在较小的屏幕上显示<select>：

@media screen and (max-width: 568px) {

  nav select {display:block;}
  nav ul {display:none;}
}

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

1 个答案: