Please implement a feature to apply at least class attribute to the entire menu (=the <ul> element). This would allow to share styling among menus (such as when you have separate menus for each language).

Comments

Exploratus’s picture

I need that also.

rocbrook’s picture

+1!

I created a custom subtheme of Bootstrap and would love to be able to create stacked menus. To do so, I need to add the "nav nav-stacked" class to the ul tag. Currently, and amazingly frustratingly, this incredibly simple task cannot be done easily or without hacking code in Drupal.

meecect’s picture

+1!

This would make my life a lot easier. I would be happy just with the 'class' option, similar to how the block_class module works.

gusans’s picture

+1

This would be great for using with bootstrap nav classes.

jdcollier’s picture

This would be wonderful!

Nilard’s picture

+1

batigol’s picture

Not only a class but ID to. Just like menu items (li).

We really need menu (ul) to have and ID and class cause of :target element!

bdanin’s picture

Issue summary:View changes

This would be helpful for me as well (adding classes to <ul> and <li> menu elements). I'm surprised it's not already in this module.

bdanin’s picture

is this a duplicate of https://drupal.org/node/1488960 ?

jwilson3’s picture

@bdanin, as I read it, this is not a duplicate of #1488960: Attributes for LI element, which speaks of allowing *menu-item* classes to move from the <a> tag to the <li> wrapper tag.

This issue on the other hand seems to be primarily about exposing a setting (eg on the menu settings page) to specify a class and/or ID for an entire menu's <ul> tag.

From a traditional themer point of view this seems like a ridiculous request because normally one would be able to style any menu using the existing classes provided on the wrapper divs in a theme, but with the advent of frameworks like bootstrap, i can see that it does make sense to expose the class/id attributes for the <ul> itself in some cases.

bdanin’s picture

It seems that with bootstrap using either LESS or SASS, it would be easy to extend an already existing class to the specific <ul> item without needing to append a class there. Although adding a class there might be faster / easier, especially for those that don't have access to compile the CSS. At this point, it would probably make more sense to add that ability to the D8 version.

batigol’s picture

It would be very helpful in D7 as well. Default classes like menuitem1, menuitem2, menuitem3 + active, first, last etc. is a must in any cms.

bdanin’s picture

Here's one way I've done this in the past, it uses a couple very well maintained modules and I haven't experienced conflicts:

1) Use menu_block
2) Use block_class

Add the class to the menu block where needed. It doesn't add it to the <ul> item directly, but you can apply classes to entire menus this way very quickly and easily.

jwilson3’s picture

@#13, those are excellent workarounds, but without the ability to actually modify the class on the <ul>, they remain just workarounds. This is still a valid feature request that belongs in this module.

joelpittet’s picture

korgik’s picture

Version:7.x-1.0-rc2» 7.x-1.x-dev
Status:Active» Needs review
StatusFileSize
new3.48 KB
PASSED: [[SimpleTest]]: [MySQL] 108 pass(es).
[ View ]

I've created a patch what adds fields 'Id' and 'Classes' to menu edit form. These attributes will be added to the menu.
Patch relevant for 7.x-1.x-dev version.

batigol’s picture

@korgin, thanks! I'm gona test it next weekhend.

korgik’s picture

Still no updates here ;(

batigol’s picture

@korgik, sorry forget to give a review - everything works very well!

Spleshka’s picture

Status:Needs review» Reviewed & tested by the community

Thanks @korgik! Patch itself looks good. I also have tested it at simplytest.me, and it works as expected. Nice job!

AndrewsizZ’s picture

Hey,
Exactly what I need and works!

joelpittet’s picture

Status:Reviewed & tested by the community» Needs work

This looks good, I may put that in after the version 1.0 stable release which should be fairly shortly if the other maintainers don't object.

There are a few coding standard fixes that are needed in this patch. Maybe one of you could look at fixing those in and updated patch?

Here's a quick check based on https://drupal.org/coding-standards

  1. +++ b/menu_attributes.install
    @@ -28,6 +28,7 @@ function menu_attributes_uninstall() {
    +  variable_del("menu_attributes_menus");

    single quotes.

  2. +++ b/menu_attributes.module
    @@ -132,6 +132,60 @@ function menu_attributes_get_menu_attribute_info() {
    +  $attrs = variable_get('menu_attributes_menus', array());

    Please don't use the short version of the name. $attrs => $attributes.

  3. +++ b/menu_attributes.module
    @@ -132,6 +132,60 @@ function menu_attributes_get_menu_attribute_info() {
    +    '#title' => 'ID',
    ...
    +    '#title' => 'Classes',

    Shouldn't these be translated as well?

  4. +++ b/menu_attributes.module
    @@ -132,6 +132,60 @@ function menu_attributes_get_menu_attribute_info() {
    +    '#default_value' => $default_attrs['id'],
    ...
    +    '#default_value' => $default_attrs['class'],

    attrs vs attributes again.

  5. +++ b/menu_attributes.module
    @@ -132,6 +132,60 @@ function menu_attributes_get_menu_attribute_info() {
    +    'class' => $values['attributes']['class']

    Ending comma on on last array item.

  6. +++ b/menu_attributes.module
    @@ -351,3 +405,34 @@ function menu_attributes_preprocess_menu_link(&$variables) {
    + * Pre-preprocess function for template_preprocess_menu_tree().

    "Prepares variables for theme_menu_tree()."
    @see https://www.drupal.org/node/1913208

  7. +++ b/menu_attributes.module
    @@ -351,3 +405,34 @@ function menu_attributes_preprocess_menu_link(&$variables) {
    + * Adds menu name to $vars. Gets menu name from first link item.
    ...
    +function menu_attributes_prepreprocess_menu_tree(&$vars) {

    Use $variables instead of $vars.

  8. +++ b/menu_attributes.module
    @@ -351,3 +405,34 @@ function menu_attributes_preprocess_menu_link(&$variables) {
    + * Override theme_menu_tree().
    + *
    + * Output menu attributes.

    Implements instead of Override. and doesn't need the description under because all theme functions output markup.

korgik’s picture

Assigned:Unassigned» korgik

Thank you for review, I will fix

korgik’s picture

Assigned:korgik» Unassigned
Status:Needs work» Needs review
StatusFileSize
new3.48 KB
new3.45 KB
PASSED: [[SimpleTest]]: [MySQL] 108 pass(es).
[ View ]

New patch and interdiff attached.
Pay please attention, I've added array_filter() to menu_attributes_menu_tree() in order to remove empty array items.

MediaFormat’s picture

Great work!

I've just manually tested the patch,

my only feedback is that child or submenus are also given the menu attributes.
Duplicate IDs are problematic, and I'm not sure classes need the redundancy.

Probably just an oversight!

Thanks

korgik’s picture

Assigned:Unassigned» korgik
Status:Needs review» Needs work

Thanks for feedback, yeah, seems you are right, I will check it

joelpittet’s picture

This will be much easier in D8 with
@see View souce https://api.drupal.org/api/drupal/core!modules!system!templates!menu.htm...

The UL and the LI are in the same template and have access to the depth in a recursive twig macro.

Unfortunately theme_menu_tree() doesn't have depth context which is super annoying for that issue in #25

korgik’s picture

Assigned:korgik» Unassigned
Status:Needs work» Needs review
StatusFileSize
new3.59 KB
PASSED: [[SimpleTest]]: [MySQL] 108 pass(es).
[ View ]
new1.35 KB

D8 is good;) but would be nice to have this feature in D7 too. So, my another attempt ;)
Now attributes will be applied only for top level of the menu.
Anybody test it please.

joelpittet’s picture

Status:Needs review» Needs work
  1. +++ b/menu_attributes.module
    @@ -421,6 +421,7 @@
    +  $variables['depth'] = $first_element['#original_link']['depth'];

    Nice trick! Depth context provided!

  2. +++ b/menu_attributes.module
    @@ -428,7 +429,10 @@
    +  $attributes = array('class' => 'menu');

    Class's values needs to be an array (true for d8 and d7)
    Should be:
    $attributes = array('class' => array('menu'));

  3. +++ b/menu_attributes.module
    @@ -428,7 +429,10 @@
    +    $attributes = array_filter($menus[$variables['menu_name']]);

    To keep with existing styles should you merge the 'menu' class on there as well?

korgik’s picture

Status:Needs work» Needs review
StatusFileSize
new3.65 KB
PASSED: [[SimpleTest]]: [MySQL] 108 pass(es).
[ View ]
new1.52 KB

3. No, I've added 'menu' as default value for 'Classes' field, so if current menu wasn't store in 'menu_attributes_menus' var, then it will have default 'menu' class, otherwise it will use classes submitted from 'Classes' field (it had 'menu' as default value).

MediaFormat’s picture

Status:Needs review» Reviewed & tested by the community

Tested patch #1862048-30: Class attribute for entire menu,

Works well.

Thank you @korgik

korgik’s picture

No updates here?

MediaFormat’s picture

Anyone else want to confirm, I think this is ready to go...

Any chance of getting it into the dev release, or even into 1.0?

AndrewsizZ’s picture

Works for me +