Help! Need Nested Primary and Secondary Links Without Using The menu_tree Function
Hello Drupallers-
I am new to Drupal and php and I need your help! I have reasonable xhtml and css (by no means great...don't rip apart my extra hook in my desired xhtml please...lol) skills so I know how to theme the xhtml if I can get the ouput I want...My problem is I just have not been able to get the xhtml output I want. I have spent hours pouring over the handbooks, forums, the api, etc...and I still can't quite get what I want. I have a fresh install of 5.1 and I will be using PHPTEMPLATE. I want to achieve the following xhtml output for my Primary/Secondary Links...
<ul id="menu">
<li id="one"><a href="#"><span>Primary Link 1</span></a>
<ul>
<li class="first"><a href="#">Secondary Link</a></li>
<li><a href="#">Secondary Link</a></li>
<li class="last"><a href="#">Secondary Link</a></li>
</ul>
</li><!--/Primary Link 1-->
<li id="two"><a href="#" class="current_tab"><span>Primary Link</span></a>
<ul class="current_sub">
<li class="first"><a href="#">Secondary Link</a></li>
<li class="current_link"><a href="#">Secondary Link</a></li>
<li><a href="#">Secondary Link</a></li>
<li><a href="#sr">Secondary Link</a></li>
</ul>
</li><!--/Primary Link 2-->
<li id="three"><a href="#"><span>Primary Link 3</span></a>
<ul>
<li class="first"><a href="#">Secondary Link</a></li>
<li><a href="#">Secondary Link</a></li>
<li><a href="#">Secondary Link</a></li>
<li><a href="#">Secondary Link</a></li>
<li><a href="#">Secondary Link</a></li>
<li class="last"><a href="#">Secondary Link 6</a></li>
</ul>
</li><!--/Primary Link 3-->
<li id="four"><a href="#"><span>Primary Link 4</span></a>
<ul>
<li class="first"><a href="#">Secondary Link</a></li>
<li><a href="#">Secondary Link</a></li>
<li><a href="#">Secondary Link</a></li>
<li class="last"><a href="#">Secondary Link</a></li>
</ul>
</li><!--/Primary Link 4-->
</ul><!--/menu--> Ok, so basically I just want:
1) Multiple nested lists with a between the anchor tag of the primary links ONLY
2) A class of "current_tab" on the anchor tag for the current Primary Link
3) A unique ID on each of the Primary Links li's, but not the on secondary links li's
4) A class of "first" on the first secondary li and a class of "last on the last secondary li
5) A class of "current-link" on the currently selected seconday link if in fact the user has selected a secondary link
I am using this xhtml output to create a Fully Accessible CSS Dropdown for my main menu. The end result will be similar to the menus found here. I have tweaked the css to provide a very different look, but you get the idea...
Now, here is what I have learned from my ventures on drupal.org so far...I know that using the menu_tree function I can output a nested list as shown here...
<ul class="menu">
<li class="expanded"><a href="#">Primary Link 1</a></li>
<ul class="menu">
<li class="leaf"><a href="#">Secondary Link</a></li>
<li class="leaf"><a href="#">Secondary Link</a></li>
</ul>
<li class="expanded"><a href="#">Primary Link 2</a>
<ul class="menu">
<li class="leaf"><a href="#">Secondary Link</a></li>
<li class="leaf"><a href="#">Secondary Link</a></li>
<li class="leaf"><a href="#">Secondary Link</a></li>
<li class="leaf"><a href="#">Secondary Link</a></li>
<li class="leaf"><a href="#">Secondary Link</a></li>
</ul>
</li>
<li class="expanded"><a href="#" class="active">Primary Link 3</a>
<ul class="menu">
<li class="leaf"><a href="#">Secondary Link</a></li>
<li class="leaf"><a href="#">Secondary Link</a></li>
<li class="leaf"><a href="#">Secondary Link</a></li>
<li class="leaf"><a href="#">Secondary Link</a></li>
</ul>
</li>
<li class="expanded"><a href="#">Primary Link 4</a>
<ul class="menu">
<li class="leaf"><a href="#">Secondary Link</a></li>
<li class="leaf"><a href="#">Secondary Link</a></li>
<li class="leaf"><a href="#">Secondary Link</a></li>
<li class="leaf"><a href="#">Secondary Link</a></li>
</ul>
</li>
</ul>This is the closest that I have come to getting the output that I want. There are a few problems with this output, which is why I am asking for help...First, I don't want a leaf class on every secondary link...Secondly, when you use the menu_tree function it is no longer possibly to turn the secondary links on or off in the admin/build/menu/settings panel...For various reasons I want to be able to turn the secondary links off by just by going to the menu settings and hitting "no secondary links".
Just for reference here is the code I have in my page.tpl.php to get the output shown above for the menu_tree function:
<?php
print theme('menu_tree',variable_get('menu_primary_menu',0));
?>Based on what I have read across drupal.org and from what I have seen in the api, the other options are the theme_menu_links function plus primary_links and secondary_links...
I know that I am going to need to override either one or more of these functions in my template.php file. My questions are which functions do I overide, what parts of those functions do I override and after I have provided the overrides in template.php, what php code do I put in my page.tpl.php to achieve the desired results...
I want to thank you all in advance for any help that you may be able to provide. I know that it will take somebody some work to help me out...I want you to know that I have tried to find the answer by myself first, but I think I am at the end of my rope for now. If someone is able to help me achieve the desired xhtml output that I want as outlined above, I will donate $100 to the drupal association in the name of the person(s) that provided help...
Thanks again!
James Hayton
Future Drupal Ninja
Have a look at this to get started
<?php
$pid = variable_get('menu_primary_menu', 0); // the menu id of the primary links menu
$menu = menu_get_menu();
$output = '<ul class=\'navigation\'';
if (isset($menu['visible'][$pid]) && $menu['visible'][$pid]['children']) { // look for child menu items
foreach ($menu['visible'][$pid]['children'] as $mid) {
$type = isset($menu['visible'][$mid]['type']) ? $menu['visible'][$mid]['type'] : NULL;
$children = isset($menu['visible'][$mid]['children']) ? $menu['visible'][$mid]['children'] : NULL;
$output .= theme('menu_item', $mid, menu_in_active_trail($mid) || ($type & MENU_EXPANDED) ? theme('menu_tree', $mid) : '', count($children) == 0); // overide themes here
}
}
print $output . "</ul>";
?>
I need to do the same thing with zebra stripes
Thanks For the Reply
I will check with this tonight...Thanks so much for the reply...Its much appreciated...I will post my results/findings here once I insert the code...
Thanks again,
James
Nested menus
I modified the code above to this and am including even/od info for zebra stripes as well as the level of nesting:
<?php
$pid = variable_get('menu_primary_menu', 0); // get the menu id of the primary menu
$menu = menu_get_menu();
$output = '<div class=\'navigation\'><ul>';
$i =1;
$level=0;
if (isset($menu['visible'][$pid]) && $menu['visible'][$pid]['children']) {
foreach ($menu['visible'][$pid]['children'] as $mid) {
$even_odd = ($i % 2) ? 'odd': 'even';
$type = isset($menu['visible'][$mid]['type']) ? $menu['visible'][$mid]['type'] : NULL; // if the menu type exists set it to the $type variable if not $type is null
$children = isset($menu['visible'][$mid]['children']) ? $menu['visible'][$mid]['children'] : NULL; // if there is a value for children (or if there are chidlren) set it to the $children variable if not $children is null
$output .= theme('menu_item', $mid, $even_odd, $level, menu_in_active_trail($mid) || ($type & MENU_EXPANDED) ? theme('menu_tree', $mid, ++$level) : '', count($children) == 0);
++$i;
if ($level == 1) {
$level =0; // not using more than one nested menu
}
}
}
print $output . "</ul></div>";
?>
then I themed the menu_item and menu_tree functions in template.php
<?php
function SimmonsLathan_menu_item($mid, $even_odd, $level=0, $children = '', $leaf = TRUE) {
if ($level==1) {
return '<li class="m3 level' . $level . '">'. menu_item_link($mid) . $children ."</li>\n";
}
else {
if ($even_odd == 'even') {
return '<li class="m2 level'. $level . '">'. menu_item_link($mid) . $children ."</li>\n";
}
else {
return '<li class="m1 level' . $level . '">'. menu_item_link($mid) . $children ."</li>\n";
}
}
}
function SimmonsLathan_menu_tree($pid = 1, $level = 0) {
if ($tree = menu_tree($pid)) {
return "\n<ul>\n". $tree ."\n</ul>\n";
}
}
?>
Im Making Some Progess
Ok, so I am starting to get what I need to do. I have been playing around with the code you posted for about 5 hours or so now and I am beginning to understand what you are doing. I am going to keep working on it...In order to increase my understanding of php and what is going on, I do have a couple of questions about whats going on in your code...These may be stupid questions, but I can't find the answers anywhere...(I may be looking in the wrong place or I am just not very bright!)
1) What is the ? doing between ($type & MENU_EXPANDED) and theme('menu_tree', $mid, ++$level)...I looked at all of php operators, etc and I couldn't figure out what the question mark does...I know that || is or and && is and etc...I just don't get what the question mark is doing...Also, in much the same fashion what purpose does the : serve between theme('menu_tree', $mid, ++$level) and ' '....My best guess are these are both just very basic php syntax things, but I couldn't find out what they mean...
2) Secondly, when I copy and paste the functions in template.php to override drupals defaults my page goes blank, but when I take it out, I can see the output again...Is there any obvious reason why this would happen or is it a case of it could be one of 100 things...I know that I will need different overrides and such becuase I am not doing the odd even zebra stripes or anything, but I just wanted to get something to work.
3) Also, when you name the function like SimmonsLathan_menu_tree you are overriding the theme_menu_tree function...When I override the function for my theme, I need to replace SimmonsLathan with the name of my theme...Is that correct?
Ok, thats all for now...I will continue to plug away at this...I will probably have quite a few more questions...
I will post my verision of the page.tpl.php code and template.php file overrides in the next day or so and hopefully someone can help me further from there.
Thanks,
James
UPDATE: Scratch Half of the First Question
Ok, so I looked in my PHP book again and I found out that the ? is a called a quantifier...I will read up on that...Sorry for asking that questions...I was looking at the operators for the longest times...No wonder I wasn't finding anything...the freakin ? isn't an operator...oops and sorry...I still dont know what the : is for in quesiton 1 though. My intro to php book doesn't seem to mention it and I can't find it on any of the websites that I know of...
Thanks,
James
Have a look here
http://us3.php.net/manual/en/language.expressions.php
Its called the ternary conditional operator - I had to look it up
Also here
<?php
// Example usage for: Ternary Operator
$action = (empty($_POST['action'])) ? 'default' : $_POST['action'];
// The above is identical to this if/else statement
if (empty($_POST['action'])) {
$action = 'default';
} else {
$action = $_POST['action'];
}
?>
SEE http://us3.php.net/operators.comparison
and
http://www.ilovejackdaniels.com/php/ternary-conditionals/ (perhaps a better explantion)
Ok Thanks
I will look into those...Thanks...Im just a newb...Thanks for your help! I appreciate it!
James
Stuck and Confused
Ok, so the code that you have provided has enabled me to do part of what I want...I have spent the last couple of days playing around with it, revising it, stripping out the "odd" "even" stuff since it doesn't apply to me, etc...I hate asking questions and wasting others time without trying to find the answer myself...I have tried, but everything I am doing produces a blank white page!!!! Anyway, I would have hired this part out, but I really want to learn Drupal and php...
Anyway, the following is where I am at and what I need to still accomplish...I apologize asking for more help, but I need it!!
Ok, so this is what I have in my page.tpl.php now:
<?php
$pid = variable_get('menu_primary_menu', 0); // get the menu id of the primary menu
$menu = menu_get_menu();
$output = '<ul id="primary_links">';
$i =1;
$level=0;
if (isset($menu['visible'][$pid]) && $menu['visible'][$pid]['children']) {
foreach ($menu['visible'][$pid]['children'] as $mid) {
$type = isset($menu['visible'][$mid]['type']) ? $menu['visible'][$mid]['type'] : NULL; // if the menu type exists set it to the $type variable if not $type is null
$children = isset($menu['visible'][$mid]['children']) ? $menu['visible'][$mid]['children'] : NULL; // if there is a value for children (or if there are chidlren) set it to the $children variable if not $children is null
$output .= theme('new_item', $mid, $level, menu_in_active_trail($mid) || ($type & MENU_EXPANDED) ? theme('new_tree', $mid, ++$level) : '', count($children) == 0);
++$i;
if ($level == 1) {
$level =0; // not using more than one nested menu
}
}
}
print $output . "</ul><!--/primary_links-->";
?>
And here is what I have in my template.php file:
<?php
function zen_breadcrumb($breadcrumb) {
if (!empty($breadcrumb)) {
return '<div class="breadcrumb">'. implode(' :: ', $breadcrumb) .'</div>';
}
}
function zen_new_item($mid, $level=0, $children = '', $leaf = TRUE) {
return '<li id="one">'. '<span>' . menu_item_link($mid) . '</span>' . $children ."</li>\n";
}
function zen_new_tree($pid = 1, $level = 0) {
if ($tree = menu_tree($pid)) {
return "\n<ul>\n". $tree ."\n</ul>\n";
}
}
?>
And here is my source that that code produces:
<ul id="primary_links"><li id="one"><span><a href="#">Primary 1</a></span></li><li id="one"><span><a href="#">Primary 2</a></span>
<ul>
<li class="leaf"><a href="#">Sub Link</a></li>
<li class="leaf"><a href="#">Sub Link</a></li>
<li class="leaf"><a href="#">Sub Link</a></li>
<li class="leaf"><a href="#">Sub Link</a></li>
</ul>
</li>
<li id="one"><span><a href="#">Primary 3</a></span>
<ul>
<li class="leaf"><a href="#">Sub Link</a></li>
<li class="leaf"><a href="#">Sub Link</a></li>
</ul>
</li>
<li id="one"><span><a href="#">Primary 4</a></span>
<ul>
<li class="leaf"><a href="#">Sub Link</a></li>
<li class="leaf"><a href="#">Sub Link</a></li>
</ul>
</li>
</ul><!--/primary_links-->
Ok, so here is what I have been able to do:
1) Get the nested lists...
2) Put a span around my primary li's anchor tags...
3) Strip out all the odd, even stuff...(may have stripped out too much)
4) Assign an id to each primary li (though they all have the same name and i need them to have an id that is unique on each of them like primary1, primary 2, primary 3, primary 4)
Here is what I haven't been able to do:
1) Get the span INSIDE the anchor tags in the primary li's...My css code isnt functioning properly unless I can get the inside the anchor tags instead of outside it.
2) Make the id on the the primary li's to increase by one for each li...I tried to use the ++ with $level and $i, but I couldn't figure out how to do it...
3) Apply the class of current_sub on the ul when a primary li is active...If this is hard to do, I may be able to change my css...I would like to figure out how to do it though.
4) Add a first and last class to the sub links li's...
5) Strip away the leaf class in the sub links li's as its not necessary.
I will also need to make sure that the class of active stays on the primary anchor when a sublink is also active.
I realize this is quite a bit of work. If anyone could just point me in the right direction. If nobody can provide help, I will dontate $100 in ghankstef's name to the drupal association as promised in my orginal post and make a post in the paid forums requesting the work to be done.
Thanks to anyone who takes the time to listen and help me...Its much appreciated!
James
UPDATE
Ok, in case anyone else out there is looking at this...I have gone ahead and put up a paid listing of this in the Drupal forums...You can find it here: http://drupal.org/node/132992
Also, I went ahead and donated $100 to the Drupal assocation in ghankstef's name...Thank you ghankstef for your help...It's much appreciated...If I do end up getting the desired php code I need, I will post it back here for everyone else to see and use...
James
Code
Subscribing...please post the php code/css here, I'd love to see it.
Peace.
Code For The Menu
Ok, here is the code for the menu....
A couple of things...This is for Drupal 5.1 using phptemplate. You will need a template.php file in your theme for the overrides and you will need to create a menu_item.tpl.php file for your theme.
Here you go...
First, in page.tpl.php, I have the following:
<?php<?php if ($primary_links):
?>
<?phpprint theme('menu_tree',variable_get('menu_primary_menu',0));
?>
<?phpendif;
?>
?>
Just place that where you want the links to show...you can of course change the name of the div to anything you want...
Next, go into template.php and add the following:
<?php
function phptemplate_menu_item($mid, $children = '', $leaf = TRUE) {
return _phptemplate_callback('menu_item', array(
'leaf' => $leaf,
'mid' => $mid,
'children' => $children
));
}
function zen_menu_tree($pid=1){
if ($tree = menu_tree($pid)) {
$item = menu_get_item($pid);
if ($item['title']=='Primary Links') {
return "\n<ul id=\"menu\">\n". $tree ."\n</ul>\n";
} else {
$primary = menu_get_item($item['pid']);
$uri_path = trim($_SERVER['REQUEST_URI']);
@$pos = strpos($uri_path, drupal_get_path_alias($item['path']));
$active_class = in_array($pid, _menu_get_active_trail()) ? 'current_sub' : ((FALSE!==$pos) ? 'current_sub' : '');
return "\n<ul ".(($primary['title']=='Primary Links') ? "class=\"$active_class\"":"class=\"menu\"")."\">\n". $tree ."\n</ul>\n";
}
}
}
?>
These are the theme override functions that you need to have... Replace the zen with the name of your theme...
Next, you need to create a blank file and name it menu_item.tpl.php...Then put the following in that file:
$link = menu_item_link($mid);// replace spaces with "_", and strip HTML
$css_id = str_replace(' ', '_', strip_tags($link));
// render the menu link with unique CSS id.
$pid = variable_get('menu_primary_menu', 0);
$item = menu_get_item($mid);
$primary = menu_get_item($item['pid']);
$uri_path = trim($_SERVER['REQUEST_URI']);
preg_match('@<a[^>]*?href="([^"]*?)"[^>]*?>(.*?)</a>@si', $link, $matches);
$pos = strpos($uri_path, $matches[1]);
if ($pid==zen_get_root_id($mid)) {
if ($primary['title']=='Primary Links') {
$active_class = in_array($mid, _menu_get_active_trail()) ? 'active' : (($pos!==FALSE) ? 'active' : '');
$link="<a href=\"{$matches[1]}\"".((!empty($active_class)) ? " class=\"$active_class\"" : $active_class) ."><span>". $matches[2]."</span></a>";
$output = '<li id="primary'.$GLOBALS['menu_ids_counter'].'">'. $link . $children ."</li>\n";
$GLOBALS['menu_ids_counter']=$GLOBALS['menu_ids_counter']+1;
} else {
$active_class = in_array($mid, _menu_get_active_trail()) ? 'current_link' : ((FALSE!==$pos) ? 'current_link' : '');
$link="<a href=\"{$matches[1]}\">". $matches[2]."</a>";
$output = '<li '.((!empty($active_class)) ? " class=\"$active_class\"" : $active_class) .'>'. $link . $children ."</li>\n";
}
} else {
$output=theme_menu_item($mid, $children, $leaf);
}
print $output;
Thats it for the html output... Important note...Your menu in the admin/build/menu that you want to use for the primary links needs to be named Primary Links with the P and the L capital... Otherwise it wont work...
This code above produces the xhtml output you will need to create a dropdown menu using drupals menu system... Just add menu items 2 levels deep to your Primary Links menu in your admin interface...
I would post the CSS here too, but I would like to clean it up first... The css is not that hard...if you have the correct output... IMPORTANT NOTE...You will need to create a js file to make the menu work in ie6 as a dropdown... This is true for EVERY css menu in the world I think since ie6 doesnt respect the hover on li's... Anyway, you could just add a conditional comment for the js file... And once ie6 is dead, you could just get rid of it...
Anyway, let me know if you have any questions... This menu worked perfectly for me so Im hoping that it could work for you as well.
James
Thanks! I do have a question, though.
Thanks, James... I am going to try to get this working and do have a question.
In the menu_item.tpl.php (or template.php) file, do you have a function called zen_get_root_id()?
Also, I'd love to see the css/JS for reference as I work with this...if you don't want the "messy" code posted, would you mind emailing it to me? Or is there a live site I can observe it in action?
Peace,
lpkb
Yeah, its in the
Yeah, its in the menu_item.tpl.php... If you look through the code there, you will see it... As far as a live site goes, like I said, I didnt end up using the menu... So I dont have the live site to show you, but I will email you the css I used...
I looked around at lots of menus before figuring out how to code my version of the css dropdown... The one that I came closest to using was from: http://www.tjkdesign.com/articles/keyboard_friendly_dropdown_menu/EK.asp
or the horizontal version
http://www.tjkdesign.com/articles/new_drop_down/default.asp
I will have no problem giving you the css I used... I was using a horizontal version with sliding doors tabs... It worked really well... I just decided to change the site architecture and get rid of one whole level of nav for simplicity...
Anyway, you can make the dropdowns LOOK however you want... The point here is that now you have the XHTML you need with the hooks to create a menu in drupal using css...
Good luck...I would love to see how it turns out for you...
James
Dropdown menu / *_get_root_id()
I'll definitely let you know when the site goes live...
In the meantime, I don't think the *_get_root_id() function is in the code you listed above. I see the call to the function but no function. I tried changing zen to the name of my template and am still getting "Fatal error: Call to undefined function theme_get_root_id()..."
Is it possible it didn't get copied/pasted correctly?
Peace,
Laryn
Oops... Here it is...
<?php
function zen_get_root_id($mid) {
$mid = (int)$mid;
$pid = true;
while($pid) {
$item = menu_get_item($mid);
if($item['pid']) {
$mid = $item['pid'];
} else {
$pid = false;
}
}
return $mid;
}
?>
Let me know if that helps :) Sorry about that. Good luck!
One More Thing
In case you don't know, that needs to go in your template.php without the opening and closing php tags of course :)
Thanks again.
Okay, I'm back to this project. I've got it running on garland on a fresh localhost install (with a few tweaks needed to get it running)...and will let you know when it's live on the real thing.
Thanks again, this will help a lot.
Peace,
lpkb
James, thank you so much for
James, thank you so much for posting this, and for contributing $100 to Drupal! I imagine there are TONS of people wanting to create horizontal drop down menus without having to hard code them into a template. I just happen to be one of those people.
I implemented your code into my modified Zen theme. I haven't worked on the CSS or IE6-JS yet, but here's the output I get:
<ul class="links-menu"><li class="active"><a href="/link1" class="active">Link 1</a></li>
<li><a href="/link2">Link 2</a></li>
<li><a href="/link3">Link 3</a></li>
<li><a href="/link4">Link 4</a></li>
<li><a href="/link5">Link 5</a></li>
<li><a href="/link6">Link 6</a></li>
<li><a href="/link7">Link 7</a></li>
</ul>
Does that look right?
I have 4 custom menus, and the site's main navigation is called "Primary Links". Under Menus > Settings, I have 'Menu containing secondary links:" set to Primary Links (while "Menu containing primary links:" is set to another menu). These naming conventions are a little confusing, I know. Anyway, changing this setting made my Primary Links bar display horizontally--yay!! One more step in the right direction!
My question is this: Links 1, 2 and 4 have child links; should I be able to see the child links at this point? OR, will I not be able to see them until I get to work on the CSS & IE6-JS?
Also, should those parent link items have Expanded checked or not?
Thanks again!
UPDATE: My own confusing naming convention was part of the problem: I now have "Menu containing primary links:" set to Primary Links, and I can see child items that are set to Expand displayed. Now it should be just a matter of CSS, right? Cool!
My review of David Mercer's "Drupal: Creating Blogs, Forums, Portals and Community Websites"
Yeah, if you get the output
Yeah, if you get the output right, all you need is the CSS to get it styled to your liking... You can browse quite a few sites to find the right css to do this if you need. Good luck. I would love to see how it turns out!
How to style
So how could I style this to my liking?
Extra Question
Ok great, thanks for this. I have it working for a first set of links, but now I want to do the same thing with another set of links. I'm not sure quite how, because $pid is set in the override tpl file to search for primary links. I want to add an additional menu with a tree if that is possible as well...
Is this an easy thing to do? I'm quite new to Drupal, but have a pretty significant project that I need this for. Help is much appreciated!!
Jason
Jason, did you ever have a
Jason, did you ever have a look at the Nice Menus module? That's what I ended up using and I was able to get the exact results I needed.
My review of David Mercer's "Drupal: Creating Blogs, Forums, Portals and Community Websites"
Why this code is returning me 0
I tried to implement the above code. I put the respective code in all respective files and returned me a 0. does anyone has any idea. thanks!