data-ui adds "active" class to calling element as well

[Markus-]

Hello,

I am trying to create a menu with hyperlinks and while doing so it seems to be the issue, that the usage of data-ui adds the active class to the menu AND the hyperlink.

Before the click

      <a data-ui="#menu1">
        <i>more_vert</i>
	<span>Mehr</span>
        <menu id="menu1" class="top no-wrap left">
    	  <li>
	    <i>contract</i>
	    <span>AGB</span>
    	  </li>
    	  <li>
	    <i>gavel</i>
	    <span>Impressum</span>
    	  </li>
  	</menu>
      </a>

After the click

    <a data-ui="#menu1" class="active">
        <i>more_vert</i>
	<span>Mehr</span>
        <menu id="menu1" class="top no-wrap left active">
    	  <li>
	    <i>contract</i>
	    <span>AGB</span>
    	  </li>
    	  <li>
	    <i>gavel</i>
	    <span>Impressum</span>
    	  </li>
  	</menu>
      </a>

From my understanding the active class just should be added to the menu and not the calling element, or is this behavior as expected?

I use the following

-includes

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn/beer.min.css" rel="stylesheet">
<script type="module" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn/beer.min.js"></script>

Thanks Markus

[leonardorafael]

Hi @Markus-

This is supposed to be the default behavior. The origin and destiny elements will be have the active class, without exceptions.

[Markus-]

So do you have any hint for me how to solve this?

I could use a button for the "more" menu but then the look differs. So if I want to have the same design I would have to switch to buttons completly, correct?

[leonardorafael]

You don't need to use a button.

Let me explain some concepts. The data-ui or ui, has some default behaviors by design. We created this thinking on most common use. If you want another behavior , you need to trigger the elements manually by add/remove active class. This method is a escape to use any custom logic that you want.

I think this is the best way to go, in your case.

Hope this helps.