Non-linking menu items with javascript
Last modified: August 26, 2009 - 23:22
You add this item_link overrride to your template.php file. This will let you put <none> in a menu item's "Path:" box and then generates href="javascript:void(0) for that menu item's link. You need to use this rather than the span trick mentioned in Menu items that are not links if you need to be able to access the children menu items for uses such as flyout/dropdown menus.
<?php
function yourthemename_menu_item_link($item, $link_item) {
if ($item['path'] == '<none>') {
$attributes['title'] = $link['description'];
return '<a href="javascript:void(0)">'. $item['title'] .'</a>';
}
else {
return l($item['title'], $link_item['path'], !empty($item['description']) ? array('title' => $item['description']) : array(), isset($item['query']) ? $item['query'] : NULL);
}
}
?>
I left a comment about this
I left a comment about this earlier but it seems to have been removed.
This javascript fix seems to cause some style & formatting issues with zen based template. Most noticeable is the administration tabs at the top of pages, they are missing backgrounds, too narrow and the the text is aligned to the top of the tab.
Drupal 6 version
http://drupal.org/node/143322
javascript:void(0) is not web compliant
Placing "javascript:anything" within an href is not web compliant!
Here is some content I found discussing it: The Mark Of The n00b.
Also here's a nice slide show from Jeremy Keith about it.
Learn about DOM scripting and how to bind a javascript to a browser's DOM element via a CSS's ID or CLASS attributes. It's a bit of a trick to understand, but removes all javascripting from XHTML, as it should be.
Cheers...
Error in code?
Ok, so I'm using the NiceMenus module, and when I follow these instructions, ALL of my links direct to the homepage. Any help would be appreciated.
jm
nice menu no link jquery
I have a site using Nice Menus and ran into the same trouble you were. I was able to implement a quick, dirty fix using jquery that I am satisfied with. Obviously if you are using a more complex system of nice menus you may have to edit the element a little bit.
$(document).ready(function() {$("li.menuparent > a").removeAttr("href");
});
It makes any item in Nice Menus that has children not a link. You may have to update some of your styles.
Thanks for your reply!
Thanks for your reply!
excellent !
Dirty but working ! Thanks for the tip !
Alternative Solution - Link to the first child in the list
This is a solution I ended up using. Just link you top-level menu items to the first child in the list. It's a sensible default that should not throw many users off. So, for example if I have...
- About Us
---- Contact
---- Back Story
---- Mission Statement
....then I would just link the top level "About Us" item to the "Contact" page. You can do this by adding that top level menu item directly to the menu via the menu's admin interface at "admin/build/menu/list/your-menu-name" and clicking [add], specifying the TEXT and the URL
BTW - If your using PathAuto or some type of friendly URL module then be sure to use the NODE ID version of the url, as opposed to the nicely named PathAuto version of the url. This will save you headaches later if you ever decide to change the nodes PathAuto name, your menus will not have to be updated by hand.