Is there a way to add a class in a menu item?

[PGS]

In menu item links, we can add a class for a link.(at the menu item, Link Type->Link CSS Style).

But there is no way to add a class for menu items! They get a random class like 'item-101', that is 'item' plus a number.
How can I add a class in an item (so that I 'll just add the class to the menu item instead of adapting my css every time I install my component)?
Is there a way? (I thought of avoiding javascript and using it only as a last choice)

[ced1870]

Hi
I think that the only way would be to develop a plugin to add a custom field in the item edition, and then use an override of the module into your template if you want to use the native "mod_menu".
Else you can use some specific extensions like Maximenu CK that can do that using the paid addon
Regards
CEd

[Nicolas OLIVIER]

Or just make an override of mod_menu to add the class on the li instaed the a tag if I understand what you want to achieve.

Le mercredi 2 mars 2016 11:39:37 UTC+1, PGS a écrit :

[brian teeman]

On Wednesday, 2 March 2016 11:44:36 UTC, Nicolas OLIVIER wrote:

Or just make an override of mod_menu to add the class on the li instaed the a tag if I understand what you want to achieve.

What ^^^^ said but also

What is wrong with it being on the A and not the li

[Nicolas OLIVIER]

Sorry i don't understand "What ^^^^ said but also" (French guy here)
Some times ppl prefer design the li instead the a.
It's easier to css the <a> child of a <li> instead of selecting the li parent (I'm sure to be clear here ^^)

Le mercredi 2 mars 2016 11:39:37 UTC+1, PGS a écrit :

[Sergio Manzi]

Imagine you want to style all the children of a menu item: they're in an <ul> the descend from the menu item <li> (not the contained <a> which is at the same level of the child <ul>), so it would be practical to apply a class to a particular <li> as well...

well, maybe you can achieve the same result with something like

a.someclass + ul {someattribute:somevalue;}

but it seems less straightforward to me...

--
You received this message because you are subscribed to the Google Groups "Joomla! General Development" group.
To unsubscribe from this group and stop receiving emails from it, send an email to joomla-dev-gene...@googlegroups.com.
To post to this group, send email to joomla-de...@googlegroups.com.
Visit this group at https://groups.google.com/group/joomla-dev-general.
For more options, visit https://groups.google.com/d/optout.

[Sergio Manzi]

As a quick follow-up:

I checked my targeting solution for e.g. hiding sub-items (dropdown-menus) of a particular menu item and it works:

• to the parent menu item add "Link CSS Attribute" (attribute? it's a darn "class"!!) hide-children
  
  
• in CSS add: .nav a.hide-children + ul  {display:none !important;}
  

The problem here is that I had to use "!important" (which I hate) as otherwise (and for reasons I didn't checked) bootstrap.css has a better targeting and overrides my css.

(OK, not really: with standard Joomla menu module "!important" doesn't seems to be necessary. With my menu module (which is very roughly based on the Joomla standard one), it is needed, so... your mileage may vary.

Cheers!

[PGS]

Link CSS Attribute ads this: title = "hide-children"  in the a tag,

[Sergio Manzi]

Exactly, and with "a.hide-children + ul" you target the first ul element after the <a> tag...

[Sergio Manzi]

oops... sorry, I had your comment wrong:

You're right: what I did is to put "Link CSS Style" hide-children. Then I mixed up when writing my post, sorry!

[PGS]

Till now I 've achieved it only with javascript, but I 've allreay mentionned, I don't like it this way.
(because the property I want to set for the menu item is float: right. So when the page loads, at the beginning it's in the middle, untill the js is executed. It' s ugly.)