WordPress.org

Ready to get started?Download WordPress

Forums

wp_nav_menu - Horizontal drop down menu (13 posts)

  1. Gisha James
    Member
    Posted 3 years ago #

    Does any one have any tutorials / links on how to create a horizontal drop down menu using wp_nav_menu.

    I know 2010 has vertical dropdown menu. so I guess it is basically adjusting css and not doing anything with wp_nav_menu

    Any help will be much appreciated.

  2. Aaron D. Campbell
    Member
    Posted 3 years ago #

    I used a call like this:
    wp_nav_menu( array( 'container_class' => 'main-navigation', 'theme_location' => 'primary' ) );

    And then CSS like this:
    [CSS moderated as per the Forum Rules. Please use the pastebin]

    Remember, this will likely vary greatly based on your site, but it should be a good starting point.

  3. nategg
    Member
    Posted 3 years ago #

    Hi Aaron,

    I think this may be also the answer I've been looking for. i.e. I want the drop-down menu from the primary navigation to go across the screen rather than down so that the drop-down menu does not obscure the site content.

    Would you be able to explain further as to where this code needs to go? I'm using pagelines pro and there seem to be alot of different css files relating to navigation... Also what do you mean by referencing the code?

    Many thanks!!!

  4. Triplanetary
    Member
    Posted 3 years ago #

    If there are multiple stylesheets related to navigation, the safest place to put it is in the one that loads last, so that it won't be overwritten. You could even put it in its own stylesheet and insert that sheet into the header of your theme.

  5. nategg
    Member
    Posted 3 years ago #

    Thanks, I think I've managed to find where to put the code now. It's still not working though...

    This is what my code looks like...

    /* @ Main Nav */

    .main_nav {
    line-height: 1.1em;
    text-align: left;
    margin: auto;
    z-index:28; /* Fancybox Uses 30 */
    position: relative;
    width: 952px;

    }

    .main_nav .content-pad{
    padding-top: 0px;
    background color: #000;
    }
    .main_nav ul{
    list-style: none;
    margin: 0px 0px 0px 0px;
    padding: 0px;
    float: left;
    }
    .main_nav li{display: block; float: left; position: absolute;}
    .main_nav ul li{
    margin-left: 0px;
    padding: 0px;
    display: block;
    float: left;
    text-align: left;
    vertical-align: baseline;
    }
    .main_nav li a{
    background:#e3e4e5;
    padding: 10px 15px 10px;
    text-decoration: none;
    display: none;
    float: left;
    border: 1.5px solid white;
    border-bottom:none;

    }

    .main-nav li a{
    font-size: .85em;
    }

    /*IE6 border color (transparent border fix)*/
    *html .main_nav li a{ border-color: white; }

    /* Drop Down */
    .main_nav ul ul {
    background-color:#000;
    display:none;
    left:0;
    padding:0;
    top:30px;
    width:10em;
    }
    .main_nav ul ul li {
    display: block;
    float: left;
    }

    #primary-nav ul.main-nav {
    width:952px;
    }
    ul.sf-menu, .sf-menu * {
    margin-left: 0px;
    padding: 0;
    list-style: none;
    background-color: #e3e4e5;
    }

    ul.sf-menu ul.sub-menu, ul.sf-menu ul.children {
    display:block;
    float:left;
    margin-top:0;
    padding: 0px;
    text-align:left;
    width:10em;
    }
    ul.sf-menu, .sf-menu * {
    background-color:#e3e4e5
    }
    .main-nav li a:hover,
    background-color:#60615f
    }
    .main-nav li.current_page_item a
    background-color:#a2a1a1
    }

    .sf-menu { line-height: 1.0; }
    ul.sf-menu ul.sub-menu, ul.sf-menu ul.children {
    display: block;
    float: left;
    width: 10em; /* left offset of submenus need to match (see below) */
    margin-top: 0;
    padding: 0;
    text-align: left;
    }

    ul.sf-menu li:hover { visibility: inherit; /* fixes IE7 'sticky bug' */ }
    ul.sf-menu li {
    display: block;
    float: left;
    margin: 0;
    }

    ul.sf-menu li a{ padding: 10px 15px 10px; display: block; float: left;}
    ul.sf-menu ul li a{ width: 120px; padding: 10px 15px 10px; display: inline; float: left; }
    .sf-menu a {
    display: block;
    float: left;
    }
    .sf-menu li:hover ul,
    .sf-menu li.sfHover ul {
    width: 120px;
    top: 34px; /* match top ul list item height */
    z-index: 99;
    }
    ul.sf-menu li:hover li ul,
    ul.sf-menu li.sfHover li ul {
    top: -999em;
    }
    ul.sf-menu li li:hover ul,
    ul.sf-menu li li.sfHover ul {
    left: 10em; /* match ul width */
    top: 0;
    }
    ul.sf-menu li li:hover li ul,
    ul.sf-menu li li.sfHover li ul {
    top: -999em;
    }
    ul.sf-menu li li li:hover ul,
    ul.sf-menu li li li.sfHover ul {
    left: 10em; /* match ul width */
    top: 0;
    }

    Thanks!

  6. keyaspects
    Member
    Posted 3 years ago #

  7. 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

  8. keyaspects
    Member
    Posted 3 years ago #

    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',

  9. keyaspects
    Member
    Posted 3 years ago #

    or you could just use css to style it instead of getting rid of the ul
    code applies to previous comments
    http://pastebin.com/kJ4hEknY
    /*use this along with the standard wp_nav_menu to display a horizontal menu but up against the right hand side of the screen - change / remove the float: right; under the information ul (in line 3) to sit the menu left*/

  10. edluso
    Member
    Posted 3 years ago #

    Hi. Please:
    How do I open an external link in wp_nav_menu?
    (personalized link).
    Tks.
    [edluso]

  11. TechStudio
    Member
    Posted 3 years ago #

    It's a very basic article which may or may not be helpful, but I recently wrote a basic tutorial on configuring custom appearance menus in a WordPress theme. It may help solidify your understanding on the issue.

    Ryan Burnette [signature moderated]

  12. TechStudio
    Member
    Posted 3 years ago #

    @edluso

    To answer your specific question. When editing your menus, go up to Screen Options at the top of the page and make sure Link Relationship (XFN) is checked off. Then for the specific link you want to open in a new window, set the relationship to external.

    A bit of Javascript must be included in your theme for this to work. You can take a look at this article about the best way to make links open in a new window to get the code.

  13. edluso
    Member
    Posted 3 years ago #

    TechStudio.
    Thank you very much.
    A hug from Brazil.
    [edluso]

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.