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

时间：2013-04-21 05:49:40

标签： wordpress menu

首先，非常感谢所有试图在这里提供帮助的人，一些答案让我头疼不已。 其次，请假设我几乎不懂任何语言。

我正在尝试使用 cssmenumaker.com/blog/wordpress-中的 apycom.com/menus/12-forest-green.html 菜单作为wordpress动态菜单 cssmenumaker.com/blog/wordpress- 3-下拉菜单教程即可。

一切看起来都不错，但是子菜单不起作用。这是一张图片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＆amp; 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：在外观上制作菜单＆gt;菜单并命名为'menu'并将此代码添加到我的模板中以打印菜单

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

现在您可以从上图中看到，子菜单卡在菜单顶部并始终可见。但是，如果没有子菜单，菜单将完美地工作，包括lavalamp效果。

我希望我现在足够清楚了。不幸的是@ 5wordpressthemes的答案没有帮助。 谢谢你的时间。

2 个答案:

答案 0 :(得分：0)

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

答案 1 :(得分：0)

我找到了一个适合我的解决方案。我在这里张贴它，任何人都在寻找它。由于我对代码一点都不熟悉，所以不得不为它而努力。

我注意到，对于子菜单，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>';
  }

可能不是一个好的解决方案，但现在我可以从外观＆gt;菜单中创建子菜单和子菜单。

然而，现在我的箭头图像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或删除它时，它会破坏子菜单。

对此的任何帮助都将受到高度赞赏。

由于

相关问题
最新问题