使用主题模板并尝试使菜单具有响应性，以便在特定屏幕分辨率下从水平布局更改为块格式。我曾经尝试过一个教程，但我无法开始工作，代表我来说缺乏经验，但也有点不确定如何在WordPress中实现，因为菜单是动态生成的，并且教程基于固定的HTML结构菜单。现在，我正在尝试第二次，但此时却撞到了墙，这就是我的问题。

我下面的教程位于下面，作者很有帮助，但我不想让他有耐心。我在他的博客上有一些评论，解释了一点，但将在下面重申。

http://www.justinwhall.com/responsive-drop-down-menu-with-css-media-queries-jquery/#comment-8391

我已经将他的Java脚本复制到一个名为mobile menu的文件中。js然后在函数中以正确的方式注册并排队。php

我正在使用测试网站http://www.simples.net23.net

我使用的CSS如下：

/*=========== helper classes =====================*/
p.mobile-nav {
  display: none;
  margin-bottom: .5em;
  font-size: 1.4em !important; }
p.mobile-nav span {
  font-size: 1.3em; }
.mobile li {
  display: block;
  width: 43%;
  border-bottom: 1px solid #ccc;
  float: left;
  padding: 10px 0;
  font-size: 1.2em;
}
@media only screen
and (max-width : 768px) {
  p.mobile-nav {
  display: block; }
}

我没有把所有的Java代码都放在这里，因为它大约有30行，在他的博客上阅读可能更好。

下面是我的header.php 文件，关于菜单：

<header id="header_container" class="group">

<div id="nav">      
<nav class="main-menu">
Menu <span>+</span>
<?php   /* Adding the menu called \'main\' to the header, within HTML5 tag */
wp_nav_menu( array( \'theme_location\' => \'main\' ) );
?>
</nav>
</div>

</header>

我认为我的问题在于我的HTML和CSS，以及如何使用正确的选择器，以便Java脚本能够正常工作，这很神奇。我已经用Firebug查看了生成的菜单，但由于它是由WordPress生成的，因此在理解结构以及要使用的正确选择器方面有点问题。

干杯

蚂蚁

navigation: $(\'#nav ul\'),

wp_nav_menu( array( \'theme_location\' => \'main\', \'container_id\'=>\'nav\' ) );