Static Jquery HTML Menu to Dynamic Wordpress Menu in WordPress

Firstly, Thank You very much to all who try to help around here, some of the answers have saved me a lot of headache.
Secondly, please assume that I have almost no knowledge of any language.

I am trying to use apycom.com/menus/12-forest-green.html menu as a wordpress dynamic menu using the method explained here cssmenumaker.com/blog/wordpress-3-drop-down-menu-tutorial.

Everything Looks great however, the sub menus are not working. Here is an image http://i.imgur.com/LHGhYyn.jpg.

Edit
Maybe I wasn’t very clear. Let me explain in detail

Step 1: I added this custom walker class to my 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";
  }
}

Step 2: added images folder, menu.js & jquery.js to my theme folder. Also added the below menu css to my theme stylesheet.

/**
 *********************************************
 * 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;
}

Step 3: made a menu at appearance > menus and named it ‘menu’ and added this code to my template to print the menu

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

Now as you can see from the image above, the sub menus are stuck on top of the menu and are always visible. However, if there are no submenus, the menu works perfectly including the lavalamp effect.

I hope I am clear enough now. Unfortunalety the answer by @5wordpressthemes doesn’t help.
Thank you for your time.

Post Views: 2

I have found a solution that works for me. I am posting it here incase anyone else is looking for it. Since I am not at all familiar with codes, had to really struggle for it.

I noticed that for submenus, wordpress makes <ul class="sub-menu"> so I changed my walker from

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

might not be a good solution but now i can make submenus and subsubmenus from appearance>menus.

However, now my css for arrow images don’t work anymore, but I guess I can live with that.

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

Quick Question
my dropdown is hidden behind my content. I have tried increasing the z-index, but it doesn’t work and when I change position: absolute to position: relative or remove it, it breaks the submenus.

Any help on this would be highly appreciated.

Thanks

2 comments

1.In your Worpress Dashboard, go to *Appearance – Menu screen and start creating the menu.*

Create a new custom menu clicking on + tab
Name your menu
Click “Save”

2.Adding menu items from the left column

Select the desired item
Click “Add to Menu”
Click and drag to rearrange items on the Menu
Save Menu

3. Add this code to your page to display the menu

<?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. Save the css code in a .css file like menu.css and link this file in your header.php

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

All the files must be inside of your theme folder

More info about WordPress Menus: http://codex.wordpress.org/Appearance_Menus_Screen

Static Jquery HTML Menu to Dynamic WordPress Menu

Leave a Reply Cancel reply

2 comments

Social Network

Related posts

Leave a Reply Cancel reply

2 comments

Social Network