1. 首页
  2. 问答
  3. 静态jquery HTML动态菜单的菜单

静态jquery HTML动态菜单的菜单

2013-04-21 51 views
1

首先，非常感谢所有在这里尝试提供帮助的人，其中一些答案为我节省了很多头痛。其次，请假设我几乎不知道任何语言。静态jquery HTML动态菜单的菜单

我想使用apycom.com/menus/12-forest-green.html菜单，使用该方法的WordPress的动态菜单这里cssmenumaker.com/blog/wordpress-3-drop-down-解释菜单教程。

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

编辑
也许我不是很清楚。让我详细

第1步解释：我加入这个自定义学步车类我的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的答案并没有帮助。 谢谢你的时间。

来源

2013-04-21 shubhra

回答

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

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

但是，现在我的箭头图像的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或将其删除时，会中断子菜单。

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

谢谢

来源

2013-04-22 23:36:42 shubhra

0

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

  • 创建+标签
  • 名称的菜单
  • 点击 “保存”，从左边的列

2.Adding菜单项上一个新的自定义菜单点击

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

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代码中像menu.css .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

来源

2013-04-21 11:45:15 5wpthemes

相关问题

 相关问题