Search code examples
cssmenusemantic-uifomantic-ui

How do I disable Semantic-UI / Fomantic-UI dynamic menu/state


I'm building a static site with Fomantic-UI (Semantic-UI). When I created my menus, but before I wired them up to links, I noticed that the text of the dropdown link item changed when one of the submenu items was selected. Neat! But since I'm not using anything that preserves state, that change is not sustained, now that the links take you to a new page. I'm fine with that, but I don't like how the text changes briefly before the browser loads the new page. I would like to eliminate that change altogether.

Or, if there's a way to maintain that change on the new page, I'd be fine with that too.

Thanks!

Edit: Here's my code, but the fix will have to reference the framework's JS.

<div class="ui dropdown link item">
  <span class="text" role="group">Group 1</span>
  <i class="dropdown icon"></i>
  <div class="menu submenu">
    <div class="header">Services</div>
    <a class="item" href="#">Item 1</a>
    <a class="item" href="#">Item 2</a>
    <a class="item" href="#">Item 3</a>
  </div>
</div>

JSFiddle


Solution

  • @gwyndall If you don't want to update the current text when you click the menu item. You can use action property with select in dropdown settings.

    $('.ui.dropdown').dropdown({ action: 'select' });
    

    Source: https://github.com/fomantic/Fomantic-UI/issues/1676#issuecomment-693587926