小贝子编程

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



首先，非常感谢所有试图帮助这里的人，一些答案已经为我节省了很多头痛。第二，请假定我几乎不懂任何语言。

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

一切看起来很好，然而，子菜单不工作。这是一张图片https://i.stack.imgur.com/zC6ox.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:在appearance>菜单处创建一个菜单，命名为"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的答案没有帮助。感谢您的宝贵时间。

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使<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>';
  }

可能不是一个好的解决方案，但现在我可以从appearance>菜单中创建子菜单和子菜单。

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

如果有任何帮助，我将不胜感激。

谢谢

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium