By j0hn-smith on

I want to style menu items in groups depending on class, any body know how I can add custom classes to menu items?

Nice menus are indeed nice but it doesn't look like it has the functionality I'm looking for.

Many thanks

⋅ Categories: Drupal 5.x

Comments

j0hn-smith’s picture

j0hn-smith commented

I want to be able to style menu items in groups of my choosing eg

<ul class="menu">
  <li class="mystyle1"><a href="link">link1</a></li>
  <li class="mystyle1"><a href="link">link2</a></li>
  <li class="mystyle2"><a href="link">link3</a></li>
  <li class="mystyle3"><a href="link">link4</a></li>
  <li class="mystyle2"><a href="link">link5</a></li>
  <li class="mystyle2"><a href="link">link6</a></li>
  <li class="mystyle1"><a href="link">link7</a></li>
</ul>

Currently Drupal inserts leaf, collapsed or expanded for the class and nice menus replaces this with a unique id and a unique class for each item, neither has the functionality that I want which is to be able to specify the class of each menu item myself.

I suspect this would require a a new module to place a textbox for the class on the create/edit menu item page admin/build/menu/item/edit/80.

Anyone know how I can add my own class or how easy it would be to create this module and how much work it would involve?

Many thanks

drubage’s picture

drubage commented

I was thinking the same thing today. You could then use the class with css to add an image instead of each bullet. I would be very interested in something like this, doesn't sound too complex. Any thoughts?

-Drew

dnewkerk’s picture

dnewkerk commented

If I understand you correctly, you may find what you're looking for in the template.php file of the GlossyBlue theme. I believe in this theme I came across a custom chunk of code in its template.php file that injects additional class names into menu list items in order to make them more easy to theme.

-- Dave
absolutecross.com

j0hn-smith’s picture

j0hn-smith commented

That sounds good but I need to be able to specify custom classes on a per item basis.

I'm expecting to get a module written for this in 3 to 6 months which I'll release.

summit’s picture

summit commented

Great. I am looking for a solution to be able to theme only one menu item differently. Perhaps already possible with css? Please make your module also drupal 5. Thanks!
greetings,
Martijn

lor’s picture

lor commented

Hi !

I need exactly the same thing !
Have you find a solution ?

Many thanks for any answer...

- l'°:R -

cakka’s picture

cakka commented

Hi , are you mean is every tag < li >is have class ?
So you can giving some costumization for your menu items like adding image or other ?
If so that you can try this :

1. Check you id menu with View Source from your browser
2. You will gettting a different id for each list
3. Giving a costumization CSS based on the tag < li > id
4. Create the costumization in style.css => For make easy to give a overiding costumization

Hope this is usefull :)
Nice

---
http://www.ckcybers.com

kartoshin’s picture

kartoshin commented

Hello. Below I described the solution for PHPTemplate, that worked for me.

I was creating theme, and needed to add some special css class to the A tag. I copied function theme_menu_item_link() from includes/menu.inc to template.php. You should create template.php in you theme directory (near the page.tpl.php, node.tpl.php, etc).
In template.php I changed the name of the function to mytheme_menu_item_link() (where mytheme is the name of my theme :D).

Then I made the following changes:
original:

  return l($item['title'], $link_item['path'], !empty($item['description']) ? array('title' => $item['description']) : array(), isset($item['query']) ? $item['query'] : NULL);

changed to:

  return l($item['title'], $link_item['path'], !empty($item['description']) ? array('title' => $item['description'], 'class' => 'side') : array('class' => 'side'), isset($item['query']) ? $item['query'] : NULL);

As you can see, I just added the string 'class' => 'side' twice, where side is the name of my css class. That's all.

Good luck!
---
Alexey, Russia.

operations’s picture

operations commented

http://drupal.org/project/menu_attributes

Anonymous’s picture

Anonymous (not verified) commented

thank you

Brabo’s picture

Brabo commented

this is also a solution:
http://drupal.org/project/menu_css_names

wooody’s picture

wooody commented

Thanks