Question

我正在尝试在ul上显示wordpress导航列表，但它没有显示，如果我在列表项中写下另一个单词，我就无法识别问题!!!

这是我的代码： HTML

  <div class="menu-toggle">
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
  </div>
  <nav class="toggle-navg">
    <ul role="navigation" class="hidden">
        <li> <?php wp_nav_menu( array( 'theme_location' => 'extra-menu', 'container_class' => 'my_extra_menu_class' ) ); ?></li>
    </ul>
  </nav>
</div>

和CSS

.menu-toggle {
  width: 40px;
  height: 30px;
  position: absolute;
  top: 20px;
  left: 25px;
  cursor: pointer;
  z-index:99;
}
.menu-toggle.on .one {
  -moz-transform: rotate(45deg) translate(7px, 7px);
  -ms-transform: rotate(45deg) translate(7px, 7px);
  -webkit-transform: rotate(45deg) translate(7px, 7px);
  transform: rotate(45deg) translate(7px, 7px);
}
.menu-toggle.on .two {
  opacity: 0;
}
.menu-toggle.on .three {
  -moz-transform: rotate(-45deg) translate(8px, -10px);
  -ms-transform: rotate(-45deg) translate(8px, -10px);
  -webkit-transform: rotate(-45deg) translate(8px, -10px);
  transform: rotate(-45deg) translate(8px, -10px);
}

.one,
.two,
.three {
  width: 100%;
  height: 5px;
  background: white;
  margin: 6px auto;
  backface-visibility: hidden;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}

.toggle-navg ul {
  margin: 0;
  padding: 0;
  font-family: Open Sans;
  list-style: none;
  margin: 4em auto;
  text-align: center;
}
.toggle-navg ul.hidden {
  display: none;
}
.toggle-navg ul a {
  -moz-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  text-decoration: none;
  color: black;
  font-size: 3em;
  line-height: 1.5;
  width: 100%;
  display: block;
}
.toggle-navg  ul a:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

.menu-section.on {
  z-index: 10;
  width: 100%;
  height: 100%;
  display: block;
  background-color: rgba(0, 0, 0, 0.8);
  position: absolute;
  opacity: 0.7;
}



.menu-toggle {
  left: 85%;
  }

Answer 1

ul类：.toggle-navg ul.hidden隐藏您的菜单，尝试删除此类：

.toggle-navg ul.hidden {
  display: none;
}

Answer 2

您是否尝试添加子菜单？我的意思是li元素里面的一个菜单？

此代码：

<ul role="navigation" class="hidden">
    <li> <?php wp_nav_menu( array( 'theme_location' => 'extra-menu', 'container_class' => 'my_extra_menu_class' ) ); ?></li>
</ul>

会给你类似的东西：

<ul role="navigation" class="hidden">
  <li>
    <ul>
      <li>Item 1</li>
      <li>Item 2 </li>
    </ul>
  </li>
</ul>

儿童菜单可能被隐藏了吗？

尝试在菜单外部运行wp_nav_menu以查看您的菜单是否出现 - 或使用Inspect Element / Dev Tools / View Source来检查您的wp_nav_menu争论实际上是否输出了HTML。

你也错过了＆＃34;菜单＆＃34;争论wp_nav_menu（）。

尝试将此菜单作为独立输出而不是上述菜单（假设您的菜单名称为＆＃34;额外菜单＆＃34;如果不是 - 请调整以适应）：

 wp_nav_menu( array(
        'menu' => 'extra-menu',
        'theme_location'    => 'extra-menu',
        'menu_class' => 'hidden'
    );

Wordpress导航列表未显示

2 个答案: