Tagged: , ,

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #814

    Hey Kriesi,

    I’ve been waiting for an update to Twicet for a while, but I’m sure you’re busy and haven’t gotten to it yet, so I tried to add support for the new WP3.0 menus myself (need to launch a site by the end of the month). From the documentation and various tutorials, it seemed pretty strait forward, but apparently I’m missing something.

    I added…

    Code:
    add_action( ‘init’, ‘register_my_menu’ );
    function register_my_menu() {
    register_nav_menu( ‘primary-menu’, __( ‘Primary Menu’ ) );
    }

    …to my functions.php

    Then I added…

    Code:
    <?php wp_nav_menu(); ?>

    …in place of wp_list_pages in the header.php

    The menu admin panel is there, I can create menus in the backend, but nothing shows up on the page.

    So, I guess my question is an either/or.

    A) Am I missing something and if so, can you point me in the right direction

    or

    B) Is there a Twicet update planned any time in the next week or so?

    Thanks a bunch!

    #32967

    After lots of additional tinkering, I’ve got it about 70% working.

    Seems like the culprit was actually the CSS. For some reason, one of the ul/li styles was set to “display: none” and the entire thing was hidden since an unordered list is how the new menus are generated.

    I ended up changing everything in style.css (line 884 and below) to be “.menu” instead of “#nav”. I also did the same thing to the navigation section of style5.css (the color version I’m using). It now displays, however it’s rather mangled. I think some easy CSS edits could probably fix it, but I’m still having trouble tracking them down.

    new_menus_broken.png

    For some reason, there’s still a bullet before the menu items. Also, the right side of the menu background, the “end cap”, isn’t displaying. Any ideas where those attributes might be coming from?

    I’m getting it piece by piece, but it’s tough going. I’d love a more professional attempt at it, so my original question still stands, I hope we see a Twicet update some time soon. This is just an emergency fix on my own until then.

    Any suggestions would be sincerely appreciated.

    #32968

    So, I found the bullet-style, or rather, lack there of. I made a new UL style and declared it in the header.

    header.php

    Code:
    <div class=”navwrap”>
    <ul id=”menu”>
    <?php wp_nav_menu(); ?>
    </div>

    Since id=”menu” is new, I added a css class right below the existing ones for the sidebar.

    style.css (line 683 and following)

    Code:
    #sidebar ul, #sidebar ol{ margin-left:0px; }
    #sidebar li{ list-style-type:none; }
    #menu li{ list-style-type:none; list-style-image: none; }
    #menu ul{ list-style-type:none; list-style-image: none; }

    With the new classes for UL and LI added and the image/type set to none, the bullets disappeared.

    Now my only snag is the right-side end of the menu background. I’m guessing that has something to do with the “nav wrap”.

    Apologies for the multiple posts, I just figured someone might find the information handy. At the very least it might serve as a warning to others to wait for the official update, lol. :)

    #32969

    Figured it out! Yay!

    Turns out I actually changed too much of the CSS. I had changed things from “nav” to “menu” but inadvertently changed one of the “navwrap” styles as well. In style.css, on line 895, I needed to keep the .navwrap that contained the positioning. I changed it back and now we’re good to go.

    So, if anyone is looking for the steps to do it themselves…

    -Start with Justin Tadlock’s tutorial for the basics:

    http://justintadlock.com/archives/2010/06/01/goodbye-headaches-hello-menus

    -Add the new functions to functions.php

    -Change list_pages to the new nav_menu tag in your header.php

    -Update style.css, in the navigation section, all the “#top #nav” styles to “.menu”

    -Update the similar sections in the style#.css file you’re using in the same manner.

    The code I used is below, in case anyone finds it helpful.

    header.php

    Code:
    <div class=”navwrap”>
    <ul id=”menu”>
    <?php wp_nav_menu(); ?>
    </div>

    functions.php

    Code:
    // New WP3.0 Menu
    add_action( ‘init’, ‘register_my_menus’ );
    function register_my_menus() {
    register_nav_menus(
    array(
    ‘primary-menu’ => __( ‘Primary Menu’ ),
    ‘secondary-menu’ => __( ‘Secondary Menu’ ),
    ‘tertiary-menu’ => __( ‘Tertiary Menu’ )
    )
    );
    }

    style.css

    Code:
    .navwrap{
    font-size:12px;
    height:50px;
    right: 5px;
    line-height:50px;
    padding-right:18px;
    position:absolute;
    top:32px;
    z-index:6;
    }
    .menu{
    float:left;
    height:50px;
    line-height:50px;
    padding-left:13px;
    }
    .menu ul{
    margin:0;
    padding:0;
    list-style-type:none;
    list-style-position:outside;
    position:relative;
    line-height:50px;
    z-index:5;
    list-style-image: none;
    }
    .menu a{
    height:33px;
    display:block;
    padding:0 21px;
    text-decoration:none;
    text-align:center;
    line-height:28px;
    outline:none;
    z-index:35;
    position:relative;
    float:left;
    }
    .menu ul a{
    line-height:33px;
    list-style-image: none;
    }
    .menu li{
    float:left;
    position:relative;
    z-index:20;
    margin-top:11px;
    list-style-image: none;
    }
    .menu li li{
    border-left:none;
    margin-top:0;
    list-style-image: none;
    }
    .menu ul {
    position:absolute;
    display:none;
    width:202px;
    top:33px;
    left:-1px;
    list-style-image: none;
    }
    .menu li ul a{
    width:160px;
    height:auto;
    float:left;
    text-align:left;
    padding:0 21px;
    list-style-image: none;
    }
    .menu ul ul{
    top:auto;
    border-top:none;
    list-style-image: none;
    }
    .menu li ul ul {
    left:202px;
    top:0px;
    list-style-image: none;
    }
    .menu li:hover ul ul, .menu li:hover ul ul ul,.menu li:hover ul ul ul ul{
    display:none;
    list-style-image: none;
    }
    .menu li:hover ul, .menu li li:hover ul, .menu li li li:hover ul, .menu li li li li:hover ul{
    display:block;
    list-style-image: none;
    }

    style5.css

    Code:
    /*navigation*/
    .navwrap{
    background:transparent url(../images5/menu.png) no-repeat scroll right bottom;
    }
    .menu a{
    color: #9f9f9f;
    }
    .menu ul {
    border:1px solid #DFDFDF;
    border-top:none;
    }
    .menu li ul a{
    border-bottom:1px solid #fff;
    border-top:1px solid #DFDFDF;
    }
    .menu ul a, .menu ul li{
    background-color:#fff;
    background-image:none;
    }
    .menu ul a:hover, .menu ul a:focus {
    background-color: #3b5987;
    color:#fff;
    }
    .menu a:hover, .menu a:focus {
    color: #fff;
    }
    .menu{
    background:transparent url(../images5/menu.png) left top no-repeat;
    }

    Some of that is probably redundant, but who knows, someone might find it handy.

    #32970

    Hey,

    Thanks for posting this, the next update will include support for Custom Menus (although I can’t give you an ETA).

    Cheers,

    James

    #32971

    I just installed this on my site and it seems to be working pretty well for the top nav. Can this be implemented for other navigation menus such as custom menus, footer navigation, or sidebar nav?

    James, do you have an ETA at this point?

    Thanks,

    Jordan

    #32972

    Hey,

    You can use the menu widget to display any custom menu you like – just create some menus under Appearance >Menu first, then go to Appearance > Widgets and drag’n'drop the “Custom Menu” widget in the footer or sidebar widget areas. At least select the menu you want to display.

Viewing 7 posts - 1 through 7 (of 7 total)

The topic ‘WP 3.0 Menus’ is closed to new replies.