Статическое HTML-меню JQuery для динамического меню 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: Я добавил этот обычай ходок класс к моему 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() 
)); 
?> 

Теперь, как вы можете видеть на картинке выше , подменю застряли в верхней части меню и всегда видны. Однако, если нет подменю, меню прекрасно работает, включая эффект лаваля.

Надеюсь, я сейчас достаточно ясен. Несчастливо ответить @ 5wordpressthemes не помогает. Спасибо за ваше время.

Answer 1

Я нашел решение, которое работает для меня. Я размещаю его здесь, если кто-то еще ищет его. Поскольку я совсем не знаком с кодами, мне пришлось действительно бороться за это.

Я заметил, что для вложенных меню, 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, но он не работает, и когда я меняю position: absolute на position: relative или удаляю его, он разбивает подменю.

Любая помощь по этому вопросу была бы высоко оценена.

С благодарностью

Answer 2

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 в файле .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