wordpress - 静态 Jquery HTML 菜单到动态 Wordpress 菜单

Question

首先，非常感谢所有在这里尝试提供帮助的人，其中一些答案让我很头疼。其次，请假设我几乎没有任何语言知识。

我正在尝试使用apycom.com/menus/12-forest-green.html菜单作为 wordpress 动态菜单，使用此处解释的方法cssmenumaker.com/blog/wordpress-3-drop-down-menu-tutorial。

一切看起来都很棒，但是子菜单不起作用。这是一张图片http://i.imgur.com/LHGhYyn.jpg。

编辑
也许我不是很清楚。让我详细解释一下

第 1 步：我将此自定义 walker 类添加到我的 functions.php

class CSS_Menu_Maker_Walker extends Walker {

  var $db_fields = array( 'parent' => 'menu_item_parent', 'id' => 'db_id' );

  function start_lvl( &$output, $depth = 0, $args = array() ) {
    $indent = str_repeat("\t", $depth);
    $output .= "\n$indent<ul>\n";
  }

  function end_lvl( &$output, $depth = 0, $args = array() ) {
    $indent = str_repeat("\t", $depth);
    $output .= "$indent</ul>\n";
  }

  function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {

    global $wp_query;
    $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
    $class_names = $value = ''; 
    $classes = empty( $item->classes ) ? array() : (array) $item->classes;

    /* Add active class */
    if(in_array('current-menu-item', $classes)) {
      $classes[] = 'active';
      unset($classes['current-menu-item']);
    }

    /* Check for children */
    $children = get_posts(array('post_type' => 'nav_menu_item', 'nopaging' => true, 'numberposts' => 1, 'meta_key' => '_menu_item_menu_item_parent', 'meta_value' => $item->ID));
    if (!empty($children)) {
      $classes[] = 'has-sub';
    }

    $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );
    $class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';

    $id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
    $id = $id ? ' id="' . esc_attr( $id ) . '"' : '';

    $output .= $indent . '<li' . $id . $value . $class_names .'>';

    $attributes  = ! empty( $item->attr_title ) ? ' title="'  . esc_attr( $item->attr_title ) .'"' : '';
    $attributes .= ! empty( $item->target )     ? ' target="' . esc_attr( $item->target     ) .'"' : '';
    $attributes .= ! empty( $item->xfn )        ? ' rel="'    . esc_attr( $item->xfn        ) .'"' : '';
    $attributes .= ! empty( $item->url )        ? ' href="'   . esc_attr( $item->url        ) .'"' : '';

    $item_output = $args->before;
    $item_output .= '<a'. $attributes .'>';
    $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
    $item_output .= '</a>';
    $item_output .= $args->after;

    $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
  }

  function end_el( &$output, $item, $depth = 0, $args = array() ) {
    $output .= "</li>\n";
  }
}

第 2 步：将图像文件夹、menu.js 和 jquery.js 添加到我的主题文件夹中。还将以下菜单 css 添加到我的主题样式表中。

/**
 *********************************************
 * Prototype of styles for horizontal CSS-menu
 * @data 30.06.2009
 *********************************************
 * (X)HTML-scheme:
 *  <div id="menu">
 *      <ul class="menu">
 *          <li><a href="#" class="parent"><span>level 1</span></a>
 *              <ul>
 *                  <li><a href="#" class="parent"><span>level 2</span></a>
 *                      <ul><li><a href="#"><span>level 3</span></a></li></ul>
 *                  </li>
 *              </ul>
 *          </li>
 *          <li class="last"><a href="#"><span>level 1</span></a></li>
 *      </ul>
 *  </div>
 *********************************************
 */

/* menu::base */
div#menu {
    height: 46px;
    padding-left: 24px;
    background: url(images/left.png) no-repeat;
    _background: url(images/left.gif) no-repeat;
    width:auto;
}

div#menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
}
div#menu ul.menu {
    padding-right: 24px;
    background: url(images/right.png) no-repeat right 0;
    _background: url(images/right.gif) no-repeat right 0;    
}

div#menu li {
    position: relative;
    margin: 0;
    padding: 0;
    display: block;
    float: left;
    z-index: 9;
    width: auto;
}
div#menu ul ul li {
    z-index: 9;
}
div#menu li div {
    list-style: none;
    float: left;
    position: absolute;
    z-index: 11;
    top: 39px;
    left: -18px;
    -left: 4px;
    visibility: hidden;
    width: 180px;
      margin: 0px 0 0 -4px;
    padding: 0; 
    background: url(images/submenu-top.png) no-repeat 0px 0;
    -background: url(images/submenu-top.gif) no-repeat 0px 0; 
}
div#menu ul ul {
      z-index: 12;
      width: 180px;
    padding: 0px 0px 12px 0px;
    -padding: 0px 0px 3px 0px;    
    background: url(images/submenu-bottom.png) no-repeat 0px bottom;
    -background: #E4E4E2 none;        
    margin: 14px 0 0 0;   
    -margin: 5px 0 0 0;      
}
div#menu li:hover>div {
    visibility: visible;
}

div#menu a {
    position: relative;
    z-index: 10;
    height: 38px;
    display: block;
    float: left;
    line-height: 38px;
    text-decoration: none;
    margin-top: 1px;
    white-space: nowrap;
    width: auto;
    padding-right:5px;
    text-align:center;
}
div#menu span {
    margin-top: 2px;
    padding-left: 15px;
    color: #fff;
    font: normal 13px Tahoma;
    background: none;
    line-height: 38px;  
    display: block;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: 95% 0;
    text-align: center;
}

/* menu::level1 */
div#menu a {
    padding: 0 15px 0 0;
    line-height: 38px;
    height: 46px;
    _margin-right: 1px;
    background: none;
    font-weight:bold;    

}
div#menu span {
    font-weight:bold; 
}
div#menu a:hover{
    background-image: url(images/selected-sub.png);
    background-repeat: repeat-x;
    background-position: right -1px;    
    -background: url(images/selected-sub.gif) repeat-x right -1px; 
}
div#menu li.current a,
div#menu ul.menu>li:hover>a {
    background-image: url(images/selected-sub.png);
    background-repeat: repeat-x;
    background-position: right -1px;  
    -background: url(images/selected-sub.gif)  repeat-x right -1px; 
}
div#menu a:hover span{
      color: #000000;
}   
div#menu ul.menu>li:hover>a span {
      color: #000000;
}
div#menu li {}
div#menu li.last { background: none; }


/* menu::level2 */
div#menu ul ul li {
    background-image: url(images/sep-sub.png);
    background-repeat: repeat-x;
    background-position: left bottom;
    margin: 0;
    padding: 0;
}
div#menu ul ul li:hover {
    background-image: url(images/sub-item-hover.gif);
    background-color: #717171;
    background-repeat: repeat-x;
    background-position: left top;
}
div#menu ul ul a {
      color: #000000;   
    height: auto;
    float: none;
    display: block;
    line-height: 25px;
    font-size: 13px;
    z-index: -1;
    padding: 6px 0 6px 0px;
    white-space: normal;
    width: 166px;
    margin: 0 0px 0 13px;
    background: none;
}

div#menu ul ul a span {
    color: #000000; 
      padding: 0 3px;
    line-height: 25px;
    font-size: 13px;
    font-weight: normal;
    margin:0;    
}
div#menu li.current ul a,
div#menu li.current ul a span {
    background: none;
}
div#menu ul ul a:hover {
    background: none;
  color: #fff;
}
div#menu ul ul a:hover span {
  background: none;
  color: #fff;
}
div#menu ul ul a.parent {
  background: url(images/submenu-pointer.png) no-repeat right top;
  -background: url(images/submenu-pointer.gif) no-repeat right top;  
  margin-right: -1px;
}
div#menu ul ul a.parent span {
  padding-right: 26px;
}
div#menu ul ul a.parent:hover {
  background: url(images/submenu-pointer-hover.gif) no-repeat right top;
  -background: url(images/submenu-pointer.gif) no-repeat right top;  
}
div#menu ul ul a.parent:hover span {
}
div#menu ul ul span {

    margin-top: 0;
    text-align: left;
}
div#menu ul ul li.last { background: none; }
div#menu ul ul li {
    width: 100%;
}

/* menu::level3 */

div#menu ul ul div {
      width: 180px;
      padding: 0;
    background: url(images/subsubmenu-top.png) no-repeat 0px 0;
    -background: url(images/subsubmenu-top.gif) no-repeat 0px 0;      
    margin: -32px 0 0 198px !important;
    margin: -32px 0 0 176px;
}
div#menu ul ul ul {
    padding: 11px 0px 9px 0px;  
    margin: 20px 0 0 0; 
}
div#menu ul ul div li {
    position:relative;
    top:-10px;
}

/* lava lamp */
div#menu li.back {
    background: url(images/selected-sub.png) no-repeat 0 0;
    -background: url(images/selected-sub.gif) no-repeat 0 0;    
    width: 5px;
    height: 46px;
    z-index: 8;
    position: absolute;
    padding: 0;
    margin: 0px 0 0 0;
}


div#menu li.back .left {
    padding:0;
    width:auto;
    background: url(images/selected-sub.png) repeat-x right 0;
    -background: url(images/selected-sub.gif) repeat-x right 0;     
    height: 46px;
    margin: 0 0 0 5px;
    float: none;
    position: relative;
    top: 0;
    left: 0;
    visibility: visible;
}

第 3 步：在外观 > 菜单中创建一个菜单并将其命名为“菜单”并将此代码添加到我的模板中以打印菜单

<?php 
wp_nav_menu(array(
  'menu' => 'menu', 
  'container_id' => 'menu', 
  'link_before' => '<span>',
  'link_after' => '</span>',
  'walker' => new CSS_Menu_Maker_Walker()
)); 
?>

现在从上图可以看出，子菜单卡在菜单顶部并且始终可见。但是，如果没有子菜单，则菜单可以完美运行，包括 lavalamp 效果。

我希望我现在已经足够清楚了。不幸的是，@5wordpressthemes 的回答没有帮助。感谢您的时间。

score 0 · Accepted Answer

我找到了适合我的解决方案。我把它贴在这里，以防其他人正在寻找它。由于我对代码一点也不熟悉，因此不得不为此而奋斗。

我注意到对于子菜单，wordpress 使<ul class="sub-menu">我改变了我的助行器

  function start_lvl( &$output, $depth = 0, $args = array() ) {
    $indent = str_repeat("\t", $depth);
    $output .= "\n$indent<ul>\n";
  }

  function end_lvl( &$output, $depth = 0, $args = array() ) {
    $indent = str_repeat("\t", $depth);
    $output .= "$indent</ul>\n";
  }

至

  function start_lvl( &$output, $depth = 0, $args = array() ) {
    $indent = str_repeat("\t", $depth);
    $output .= '<div><ul class="sub-menu">';
  }

  function end_lvl( &$output, $depth = 0, $args = array() ) {
    $indent = str_repeat("\t", $depth);
    $output .= '</ul></div>';
  }

可能不是一个好的解决方案，但现在我可以从外观>菜单制作子菜单和子子菜单。

但是，现在我的箭头图像 css 不再工作了，但我想我可以忍受。

div#menu ul ul a.parent {
  background: url(images/submenu-pointer.png) no-repeat right top;
  -background: url(images/submenu-pointer.gif) no-repeat right top;  
  margin-right: -1px;
}
div#menu ul ul a.parent span {
  padding-right: 26px;
}
div#menu ul ul a.parent:hover {
  background: url(images/submenu-pointer-hover.gif) no-repeat right top;
  -background: url(images/submenu-pointer.gif) no-repeat right top;  
}

快速提问 我的下拉菜单隐藏在我的内容后面。我尝试增加 z-index，但它不起作用，当我更改position: absolute或position: relative删除它时，它会破坏子菜单。

对此的任何帮助将不胜感激。

谢谢

score 0 · Accepted Answer

1.在您的 Worpress 仪表板中，转到 *外观 - 菜单屏幕并开始创建菜单。*

单击 + 选项卡创建一个新的自定义菜单
命名你的菜单
点击“保存”

2.从左栏添加菜单项

选择所需的项目
点击“添加到菜单”
单击并拖动以重新排列菜单上的项目
保存菜单

3.将此代码添加到您的页面以显示菜单

<?php $defaults = array(
    'theme_location'  => '',
    'menu'            => 'Your menu name', 
    'container'       => 'ul', 
    'container_class' => 'menu-{menu slug}-container', 
    'container_id'    => 'div',
    'menu_class'      => 'menu', 
    'menu_id'         => 'menu-{menu slug}[-{increment}]',
    'echo'            => true,
    'fallback_cb'     => 'wp_page_menu',
    'before'          => '',
    'after'           => '',
    'link_before'     => '',
    'link_after'      => '',
    'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s</ul>',
    'depth'           => 0,
    'walker'          => ''
); ?>
                  <?php wp_nav_menu( $defaults ); ?>

4. 将 css 代码保存在 .css 文件中，如 menu.css 并将此文件链接到 header.php

<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/menu.css" type="text/css" media="screen" />

所有文件都必须在您的主题文件夹中

有关 Wordpress 菜单的更多信息：http: //codex.wordpress.org/Appearance_Menus_Screen

wordpress - 静态 Jquery HTML 菜单到动态 Wordpress 菜单

2 回答 2

Related

Reference