Semantic-ui: [Dropdown menu] When inverted, links color is wrong

Created on 28 Dec 2016 · 7Comments · Source: Semantic-Org/Semantic-UI

Check this fiddle https://jsfiddle.net/r2fzrbdu/, it's easier to see it than to try to explain it.
The issue happens on "Test" dropdown.

Usage Question

Source

agustindidiego

All 7 comments

@agustindidiego your fiddle is broken

BitForger on 29 Dec 2016

True, sorry about that..., the issue was with the SSL from the javascript and css files. I updated the fiddle with versions from another cdn.
https://jsfiddle.net/r2fzrbdu/1/

agustindidiego on 30 Dec 2016

👍1

But well..., What I'm trying to do, is to add a link item to the menu, that can have dropdown child items. But I'm seeing that the links aren't working when they have child items, since, I assume, the dropdown item click event is stopping further events, so the click event never reaches the link.

I can think on a workaround, like setting the link on a data attribute of the dropdown item and adding some javascript code to handle that..., but, maybe I'm wrong, using links is better for search engines to find them, right?
So, there is 1 issue and 1 feature request.
Issue: when adding a link inside a menu dropdown item, for example, inside a

, and the menu has the "inverted" class, the item text color is wrong or the scenario is not taked into account.
Feature: On dropdown item click, don't stop the event propagation.

agustindidiego on 30 Dec 2016

So. Why do you want the dropdown to link to another page? That is horrible UX unless and ONLY unless you have the dropdown on: 'hover' imho. I mean technically all you have to do to get clicking on the element to go to the page is make a click handler with javascript and bind it to the specific element using an ID, then set the window.location to the url you want the user to go to.

BitForger on 31 Dec 2016

Yes, well.., having a link on a parent menu dropdown item is probable debatable. In my case, the scenario is having a menu built to go to Pages and Sub pages of a CMS. So, the parent item is actually a browsable Page. And yes, I know I can add javascript code and handle the click event, I'm currently doing that, setting the url on a data-href attribute of the div dropdown item. But since it is not a link tag, the url is not readable by search engines.

I also found that if I set the "active" class to the dropdown item, the dropdown doesn't show up.

agustindidiego on 2 Jan 2017

👍1

Oh, I see, it's a CMS thing... I don't know of a way around this. You could always look at the individual source code for drop downs and see if you can modify your own copy of the JS to get what you need.

BitForger on 3 Jan 2017

Hi @agustindidiego,

I agree with @Cyb3rWarri0r8 on the UX of it, but you can either add a .ui class to your anchor to make it look like a link, or override the rule completely. Open src/site/collections/menu.overrides and add this:

.ui.inverted.menu .item > .menu a {
  color: rgba(0,0,0,.87)!important;
}

Don’t forget to rebuild the framework afterwards. The following is a standard reply.

Thank you for posting, but although it’s a valid usage question, we’ve limited GitHub Issues to bug reports and feature requests, keeping the board more manageable for maintainers; see the contributing guidelines for more information on what kind of posts should find themselves into the GitHub Issues board.

To get answers or feedback that might allow you to repost this issue, please use one of our other support resources: