WordPress.org

Ready to get started?Download WordPress

Forums

Upgraded to 3.0.1 for menu , cant drop down menu (8 posts)

  1. nixtainternet
    Member
    Posted 3 years ago #

    Hey guys

    First post, please be gentle.

    Have been running WP 2.9 and just upgraded to 3.0.1. (nice and easy!)

    The reason for the upgrade was to use the menu (in admin) so that I could create drop down menus, but unfortuantly when I create a menu, it just shows everything in the menu space (top of nixta.co.uk) instead of showing the top level then on hover/click showing the rest of the 2nd level.

    I added to my function.php file

    add_theme_support( 'menus' );

    I also added this to my header.php

    <?php wp_nav_menu( array( 'sort_column' => 'menu_order', 'container_class' => 'menu-header' ) ); ?>

    but like I say, I get no 'drop-down' effect on the menus, just the complete list of both hierachys of the menu.

    I hope I make sense to you?

    many thanks

  2. emilekott
    Member
    Posted 3 years ago #

    The fact that you can see the menu means that you have added the menu to your theme correctly.

    For submenu items to appear as drop downs, however, you will need to do some css.

    Have a look at Son of Suckerfish

    For acroweb.co.uk, I used css very similar to the Twenty Ten theme (the Pricing Outline menu drops down):

    #access {
    	background: #000;
    	display: block;
    	float: left;
    	margin: 0 auto;
    	width: 940px;
    }
    #access .menu-header,
    div.menu {
    	font-size: 13px;
    	margin-left: 12px;
    	width: 928px;
    }
    #access .menu-header ul,
    div.menu ul {
    	list-style: none;
    	margin: 0;
    }
    #access .menu-header li,
    div.menu li {
    	float: left;
    	position: relative;
    }
    #access a {
    	color: #aaa;
    	display: block;
    	line-height: 38px;
    	padding: 0 10px;
    	text-decoration: none;
    }
    #access ul ul {
    	box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
    	-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
    	-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
    	display: none;
    	position: absolute;
    	top: 38px;
    	left: 0;
    	float: left;
    	width: 180px;
    	z-index: 99999;
    }
    #access ul ul li {
    	min-width: 180px;
    }
    #access ul ul ul {
    	left: 100%;
    	top: 0;
    }
    #access ul ul a {
    	background: #333;
    	line-height: 1em;
    	padding: 10px;
    	width: 160px;
    	height: auto;
    }
    #access li:hover > a,
    #access ul ul :hover > a {
    	background: #333;
    	color: #fff;
    }
    #access ul li:hover > ul {
    	display: block;
    }
    #access ul li.current_page_item > a,
    #access ul li.current-menu-ancestor > a,
    #access ul li.current-menu-item > a,
    #access ul li.current-menu-parent > a {
    	color: #fff;
    }
    * html #access ul li.current_page_item a,
    * html #access ul li.current-menu-ancestor a,
    * html #access ul li.current-menu-item a,
    * html #access ul li.current-menu-parent a,
    * html #access ul li a:hover {
    	color: #fff;
    }
  3. nixtainternet
    Member
    Posted 3 years ago #

    Thank you for your quick response.

    I have added the menu (menus addon with wordpress 3.0.1) to the site with no problem as you say.

    my current style.css is

    [Mod Note: Code segment removed. If you want to post large blocks of code, please use a pastebin (Alternate URL). Thanks!]

    Can I ask if you could hold my hand and point out where I need to add these changes ?

    Many Thanks

  4. nixtainternet
    Member
    Posted 3 years ago #

    I have added it as

    http://pastebin.ca/1983510

    However - nothing is any different, the same problem is there.

    Am I right in thinking that the built in menu system of 3.0.1. is not actually meant to have drop down menus ?

  5. emilekott
    Member
    Posted 3 years ago #

    The 3.0.1 menu system creates un-numbered lists as your menus.

    When you have a sub menu item, it nests the un-numbered lists.

    Using css you can transform these nested un-numbered lists into drop down menus.

    However, you cannot just copy and paste the code I gave you unless you have added the relevant div to your php template.

    Open your header.php file and take a look.

    Try replacing:
    <?php wp_nav_menu( array( 'sort_column' => 'menu_order', 'container_class' => 'menu-header' ) ); ?>

    with

    <div id="access">
    <?php wp_nav_menu( array( 'sort_column' => 'menu_order', 'container_class' => 'menu-header' ) ); ?>
    </div>

    This will put the nav menu into the #access div (which is what is being styled by the above css).

    I am just guessing here as I cannot see your code. If that doesn't work, upload your header.php code and I will take a look for you.

  6. nixtainternet
    Member
    Posted 3 years ago #

    Thank You !!

    Seems to work a beauty !!

    now I just need to work out how to lose all the colouring so that it matches my site .. at the moment its using your nice black look

    Thank you very much !!

  7. emilekott
    Member
    Posted 3 years ago #

    I have just written a tutorial for this very problem.

    Check out how to add horizontal drop-down css menus to your custom wordpress theme (from scratch).

  8. nixtainternet
    Member
    Posted 3 years ago #

    THANKS EMILEKOTT

    Will give thsi a try when the day slows down.. thank you :D

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.