WordPress.org

Ready to get started?Download WordPress

Forums

wp_nav_menu: horizontal menu, with children underneath (13 posts)

  1. JulienH
    Member
    Posted 3 years ago #

    Hello all,

    I was just created the new wp_nav_menu in the Apearance panel. When I list it, and style is using CSS I don't get it how I like it.

    I made a image of what I want to accomplish.

    So I have page 1 till 4 and every page has some subpages. When you navigate to my site, I want it to be like in the image above. So page A1 is active. Only the subpages will have content. When you are on a page of A and you mouse over B, C or D their children will become visible instead of A1-A5. Also the background color will then change like it is active.

    Can someone tell me how I can get this result or does someone know where I can find a solution? Thanks in advance.

  2. Chip Bennett
    Theme Review Admin
    Posted 3 years ago #

    You'll need to use a javascript/jQuery solution to create "accordion" menus that expand and collapse on mouseover/mouseout.

  3. JulienH
    Member
    Posted 3 years ago #

    I don't know for sure if I can accomplish this with an accordion menu. The menu I want is a lot like this one.

  4. Chip Bennett
    Theme Review Admin
    Posted 3 years ago #

    Oh, my mistake. You said "horizontal", not "vertical".

    That menu is entirely possible, using nothing but CSS.

  5. JulienH
    Member
    Posted 3 years ago #

    Okay, I have to dive in the code of that particular site then. Or do you know a place where it's explained or does it have some kind of a name? Never heard of an accordion menu either but makes perfect sense to me.

  6. JulienH
    Member
    Posted 3 years ago #

    The code of my example doesn't use any jQuery to do this and is a big mess. The examples I found on Google and in the Codex are all different from what I'm looking for. The examples are menus that only show the subpages on mouseover.

    I will trie to be as specific as possibile and hope someone can help me out.

    If we look at this example the menu "Tv Gids" and subpage "home" are active. In fact the main pages "TV gids, Genres, MijnTVgids.nl etc etc." are not navigating anywhere. Only the submenu-items on these menu-items do have content.
    When you are on TVgids/home and mouse-over "Genres" or "On demand" for example, their subpages become visible. That is exactly what I want. So when you open the page in your browser, it show you by default the subpages under the first menu-item and on mouse-over on the other menu-item it show their submenu-items.
    I hope someone know how to do this or can point me to a tutorial or explanation.

    Thanks in advance.

  7. JulienH
    Member
    Posted 3 years ago #

    Bumper....

  8. JulienH
    Member
    Posted 3 years ago #

    Okay, I found this code and it looks a lot like I would like it to be. I tried to change it so the submenu items of menu 1 were shown by default, without a hover. Didn't got it to work so far. Hope someone can help. this is the code.

    <ul id="nav">
    			<li><a href="#">Menu 1</a>
    				<ul>
    					<li><a href="#">Menu 1 Submenu item 1</a></li>
    					<li><a href="#">Menu 1 Submenu item 2</a></li>
    					<li><a href="#">Menu 1 Submenu item 3</a></li>
    				</ul>
    			</li>
    
    			<li><a href="#">Menu 2</a>
    				<ul>
    					<li><a href="#">Menu 2 Submenu item 1</a></li>
    					<li><a href="#">Menu 2 Submenu item 2</a></li>
    					<li><a href="#">Menu 2 Submenu item 3</a></li>
    				</ul>
    			</li>
    
    			<li><a href="#">Menu 3</a>
    				<ul>
    					<li><a href="#">Menu 3 Submenu item 1</a></li>
    					<li><a href="#">Menu 3 Submenu item 2</a></li>
    					<li><a href="#">Menu 3 Submenu item 3</a></li>
    				</ul>
    			</li>
    		</ul>
    #menu {
      width: 960px;
      height: 40px;
      clear: both;
    }
    
    ul#nav {
      float: left;
      width: 960px;
      margin: 0;
      padding: 0;
      list-style: none;
      background: #dc0000 url(../img/menu-parent.png) repeat-x;
      -moz-border-radius-topright: 10px;
      -webkit-border-top-right-radius: 10px;
      -moz-border-radius-topleft: 10px;
      -webkit-border-top-left-radius: 10px;
    }
    
    ul#nav li {
      display: inline;
    }
    
    ul#nav li a {
      float: left;
      font: bold 1.1em arial,verdana,tahoma,sans-serif;
      line-height: 40px;
      color: #fff;
      text-decoration: none;
      text-shadow: 1px 1px 1px #880000;
      margin: 0;
      padding: 0 30px;
      background: #dc0000 url(../img/menu-parent.png) repeat-x;
      -moz-border-radius-topright: 10px;
      -webkit-border-top-right-radius: 10px;
      -moz-border-radius-topleft: 10px;
      -webkit-border-top-left-radius: 10px;
    }
    
    /* APPLIES THE ACTIVE STATE */
    ul#nav .current a, ul#nav li:hover > a  {
      color: #fff;
      text-decoration: none;
      text-shadow: 1px 1px 1px #330000;
      background: #bb0000;
      -moz-border-radius-topright: 10px;
      -webkit-border-top-right-radius: 10px;
      -moz-border-radius-topleft: 10px;
      -webkit-border-top-left-radius: 10px;
    }
    
    /* THE SUBMENU LIST HIDDEN BY DEFAULT */
    ul#nav  ul {
      display: none;
    }
    
    /* WHEN THE FIRST LEVEL MENU ITEM IS HOVERED, THE CHILD MENU APPEARS */
    ul#nav li:hover > ul {
      position: absolute;
      display: block;
      width: 920px;
      height: 45px;
      position: absolute;
      margin: 40px 0 0 0;
      background: #aa0000 url(../img/menu-child.png) repeat-x;
      -moz-border-radius-bottomright: 10px;
      -webkit-border-bottom-right-radius: 10px;
      -moz-border-radius-bottomleft: 10px;
      -webkit-border-bottom-left-radius: 10px;
    }
    
    ul#nav li:hover > ul li a {
      float: left;
      font: bold 1.1em arial,verdana,tahoma,sans-serif;
      line-height: 45px;
      color: #fff;
      text-decoration: none;
      text-shadow: 1px 1px 1px #110000;
      margin: 0;
      padding: 0 30px 0 0;
      background: #aa0000 url(../img/menu-child.png) repeat-x;
    }
    
    ul#nav li:hover > ul li a:hover {
      color: #120000;
      text-decoration: none;
      text-shadow: none;
    }
  9. JulienH
    Member
    Posted 3 years ago #

    Ok, solved!

    Just look for a CSS dropline menu. Sliding doors as an option. Good luck.!

  10. keyaspects
    Member
    Posted 3 years ago #

    This is what I used to produce a HORIZONTAL wp_nav_menu. (no drop downs though - see my earlier link for drop downs)

    Make sure this is in your functions.php

    if (function_exists('register_nav_menus')) {
       	register_nav_menus(
    		array(
    			'main_nav' => 'Main Navigation Menu'
    			)
    		);
    	}

    place the wp_nav_menu where you want to in your code
    <div id="information"><?php wp_nav_menu(array('menu' => 'Main Nav Menu', 'container' => false, 'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>')); ?></div>

    Add CSS
    http://pastebin.com/SdpvYABV

    One point to add: My menu in the wp admin area was called Main Nav Menu.
    NOTE: <?php wp_nav_menu(array('menu' => 'Main Nav Menu',

  11. stur
    Member
    Posted 2 years ago #

    You can follow any responses to simplify css code dropdovn menu.
    1) Add a class parent for items that have a submenu
    2) add depth class (depth0 , depth1, depth2 ...)

    add to function.php your theme

    class DD_Wolker_Menu extends Walker_Nav_Menu {
    	function display_element( $element, &$children_elements, $max_depth, $depth=0, $args, &$output ){
    	    $GLOBALS['dd_children'] = ( isset($children_elements[$element->ID]) )? 1:0;
            $GLOBALS['dd_depth'] = (int) $depth;
            parent::display_element( $element, $children_elements, $max_depth, $depth, $args, $output );
        }
    }
    add_filter('nav_menu_css_class','add_parent_css',10,2);
    function  add_parent_css($classes, $item){
         global  $dd_depth, $dd_children;
         $classes[] = 'depth'.$dd_depth;
         if($dd_children)
             $classes[] = 'parent';
        return $classes;
    }

    now in header.php

    wp_nav_menu( array( 'container_class' => '','container' => '',  'menu' => 'header-menu', 'walker'=> new DD_Wolker_Menu ) );

    header-menu replaced by the name of your menu

    CSS simplified code may be the
    [CSS moderated as per the Forum Rules. Please just post a link to your site.]

    #menu-header-menu - id the main UL list

  12. and.paz
    Member
    Posted 2 years ago #

    @stur

    thanks for your short tutorial, but it doesn't work on my site - can you tell what I did wrong?

    here is fragment of my header:

    <?php wp_nav_menu(array(
    			'menu' => 'moje',
    			'container_id' => 'menu-header-menu',
    			'fallback_cb' => 'wp_page_menu',
    			'walker'=> new DD_Wolker_Menu,
    			)); ?>

    and navigation fragment of my style.css:

    [CSS moderated as per the Forum Rules. Please just post a link to your site.]

    and the effect is here: http://testy.pazder.pl/

    thanks for help

  13. stur
    Member
    Posted 2 years ago #

    You should specify the horizontal orientation.
    I give a link to the full code and an example of my theme.
    http://www.wp.od.ua/en/?p=65
    http://www.wp.od.ua/en/?p=49

Topic Closed

This topic has been closed to new replies.

About this Topic