Styling Menu Items
jon_hancock - June 6, 2006 - 00:30
I've searched around, but have come up empty handed.
What I want to do is style each menu item individually. I want to add a sequential id (or class) to each new menu item.
Also, I would love to be able to inject a span or img tag within an a tag. i.e.: <a href="node/3">node-3<span>Span within link</span></a>
Could this be added to the menu settings dropdown menu when creating a new node?
If this were possible, we could use Eric Meyer's Pure CSS Popups.
As for styling menu items
Check out this hot technique on Nick Lewis' blog. http://www.nicklewis.org/node/843 Very elegant use of phpTemplate.
Laura
_____ ____ ___ __ _ _
design, snap, blog
using eric myers technique
Hi jon/laura,
I use eric's pure css pop ups a lot - and was hoping to be able to style individual links as well, I have already had a look at Nick's article, but I have to say it was not entirely clear to me (new to drupal) which files to open and edit, where to add the new styles to ie which existing style sheet (or add new one). If you could shine any further light on this one, once you have a look at the article, would be keen to know,
thanks - Renaee.
Well, I have made some
Well, I have made some progress. I have found that If I change a line in common.inc (line 1081) from
<?phpreturn '<a href="'. check_url(url($path, $query, $fragment, $absolute)) .'"'. drupal_attributes($attributes) .'>'. ($html ? $text : check_plain($text)) .'</a>';
?>
to
<?phpreturn '<a href="'. check_url(url($path, $query, $fragment, $absolute)) .'"'. drupal_attributes($attributes) .'>'. ($html.$text) .'</a>';
?>
I can now insert whatever tag I want into the text of a link when setting up a new menu item. That allows pure css popups. However; I can't recommend editing a core component directly. I have asked Nick Lewis to help us by finding a more proper way to do it. We'll see if he has time.
I haven't thoroughly tested this out to make sure it doesn't impact other things.
If you're brave, go ahead and give it a shot. Just make sure you keep a backup copy.
Jon Hancock
Chuck Norris CAN believe it's not butter!
maybe this way:
Also requires modification of core, but should work:
This modification allows to use html in menu item names:
<?phpfunction theme_menu_item_link($item, $link_item) {
return l($item['title'], $link_item['path'], isset($item['description']) ? array('title' => $item['description']) : array(
),
NULL, NULL, FALSE, TRUE);
}
?>
The change is in the last parameter to 'l' function.
And this one adds html id attributes to <li> tags:
<?php
function theme_menu_item($mid, $children = '', $leaf = TRUE) {
$item = menu_get_item($mid);
$htmlid = $item['title'];
$htmlid = strip_tags( $htmlid );
$htmlid = preg_replace("/[^a-zA-Z0-9]/", "", $htmlid);
return '<li id="' . $htmlid . '" class="'. ($leaf ? 'leaf' : ($children ? 'expanded' : 'collapsed')) .'">'
. menu_item_link($mid) . $children ."</li>\n";
}
?>
Three lines with: strip_tags and preg_replace filter title to make a valid id attribute.
same thing for D6
<?phpfunction YourThemeName_menu_item($link, $has_children, $menu = '', $in_active_trail = FALSE, $extra_class = NULL) {
$class = ($menu ? 'expanded' : ($has_children ? 'collapsed' : 'leaf'));
if (!empty($extra_class)) {
$class .= ' '. $extra_class;
}
if ($in_active_trail) {
$class .= ' active-trail';
}
$id = preg_replace("/[^a-zA-Z0-9]/", "", strip_tags($link));
return '<li id="'.$id.'" class="'. $class .'">'. $link . $menu ."</li>\n";
}
?>
I used this theme override successfully to generate an id for each menu list item that is equal to the link text without spaces. I think that menu_get_item() changed and I would not know where I get the path parameter. That's why I strip_tagged the link straight away. It probably works even faster!
Never hack core
I have learned never to hack core. I have used that above solution but forgetting that I altered common.inc when I updated drupal to the next version I lost my menu classes. I recommend rather using the module Menu Attributes.
http://drupal.org/project/menu_attributes
Thank you so much for
Thank you so much for bringing this to my attention! That totally takes care of the styling problem!
@Renaee - The first part is to be placed in your "template.php" file within your theme directory. If there isn't already a template.php file, then create one. To make the second part, create a new file called menu_items.tpl.php, and copy/paste the php snippet into that file. That file should also be placed in your theme directory. As for the css, you can add it to your style.css file, or make a new css file and call it from your theme in the head section just like you would in an html file. (adding it to style.css is better)
Note that this method will only work with phptmeplate.
Jon Hancock
Chuck Norris CAN believe it's not butter!
Thanks John - just needed
Thanks John - just needed some basic steps like that to be reassured of what I am doing. I am using the 'friendseletric' theme, so will check to see if the template.php is in that directory. I will add the css to the themes css page - would that be OK?
thanks again - R.
Yup. That will do it.
Yup. That will do it.
However, that doesn't get us all the way. We still need to figure out how to insert a span or img into the a tag itself.
Jon Hancock
Chuck Norris CAN believe it's not butter!
css pop-up
I think I will first just get a handle on styling my links how I want them to look - play around with the little logos instead of text. Then move onto the css pop-ups. If you make any progress in the mean time - let me know! - cheers - renaee.
I have absolutely no idea
I have absolutely no idea about drupal theming except that you are better off using theme overrides instead of changing any core file. The sample chapter on drupal theming in the new pro drupal handbook is a great overview of theming. After reading it, even I could finally comprehend how to go about theming. I won't be surprised if it solves your particular problem.
----
Previously user Ramdak.
Steps required...
Which files to edit to allow < span >< / span > around links?
This is still confusing (d'oh!)
I tried making the new menu_items.tpl.php and editing template.php but this crashed PHP (ouch).
Im on stable 5.x release.
Thanks!
Dan