WP 3.0 Menus

7 posts from 4 voices

• Started 2 years ago by docholoday
• Latest reply from Dude
• This topic is resolved

Tags:

• menus
• nav_menu
• WP3.0

1. 

   docholoday
   Member

   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...
   
add_action( 'init', 'register_my_menu' );
function register_my_menu() {
register_nav_menu( 'primary-menu', __( 'Primary Menu' ) );
}


   ...to my functions.php

   Then I added...
   
<?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!

   Posted 2 years ago #
2. 

   docholoday
   Member

   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.

   

   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.

   Posted 2 years ago #
3. 

   docholoday
   Member

   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
   
<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)
   
#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. :)

   Posted 2 years ago #
4. 

   docholoday
   Member

   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
   
<div class="navwrap">
<ul id="menu">
<?php wp_nav_menu(); ?>
</div>


   functions.php
   
// 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
   
.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
   
/*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.

   Posted 2 years ago #
5. 

   James Morrison
   Former Team Member

   Hey,

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

   Cheers,
   James

   Posted 2 years ago #
6. 

   jsilton
   Member

   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

   Posted 2 years ago #
7. 

   Dude
   Dude

   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.

   Posted 2 years ago #

RSS feed for this topic

Reply

You must log in to post.