google / google/material-design-lite

Issues Scaling Up MaterialMenu & Proposed Solution

Open
#4,935 0 comments 1 reaction 0 assignees View on GitHub
Dominant language
HTML
Stars
32.2k
Forks
4.9k
PR merge metrics
No merged PRs in 30d

Description

To associate a `ul` with a `button`, you can set the `for` attribute of the `ul` to the id of the `button`. This was not a problem for me when adding a single hardcoded Material Menu. However I am in a situation where I want to dynamically add/remove them.

As you can see below, I want to have a list of entries, and each one should have its own Material Menu:

![screen shot 2016-11-26 at 11 58 52 am](https://cloud.githubusercontent.com/assets/10871454/20641883/c1a99b24-b3cf-11e6-8fd2-86a9009c70f5.png)

I figure there must be a better solution than assigning arbitrary id's to each `button` and respectively to each `ul`'s `for` attribute.

My proposed solution involves modifying mdl's source:
For any `.mdl-menu` where the `for` attribute is unspecified, the attribute will be set to the id of the nearest button prior to the menu.

This solution would have the nice property where code that makes for one working material menu & button combo could simply be copy pasted to make more.
```html

more_vert


  • An Action

  • Another Action

  • Disabled Action


```

I can make this revision in such a way that only affects my own project. However, as long as dynamic creation of Material Menus is in no way a violation of MD's design specs I could also contribute this modification to MDL.

I'm writing here to make sure that what I've found is actually an issue and to determine whether or not my proposed contribution would be useful to the users and developers of MDL. If so I will make a pull request.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.