Priyabrata Priyabrata - 2 months ago 27
jQuery Question

Semantic Ui Menu not working

I am trying to work with semantic ui menu.

But I cannot get it to work, ie when I click the items in the menu, the active state isn't changing.
I didn't find any examples in the web either.

HTML :

<div class="ui grid">
<div class="one wide row">
<div class="ui green menu">
<a class="active item">
<i class="home icon"></i> Home
</a>
<a class="item">
<i class="mail icon"></i> Messages
</a>
<div class="right menu">
<div class="item">
<div class="ui transparent icon input">
<input type="text" placeholder="Search...">
<i class="search link icon"></i>
</div>
</div>
</div>
</div>
</div>
</div>


JS:

$(document).ready(function() {
$('.ui .green .menu').menu();
});


I have taken the code snippet from the semantic-ui website.

Some help is appreciated.

Answer

here's a handler similar to the one on their demo site

DEMO

screenshot: screenshot

  $('.ui.green.menu')
    .on('click', '.item', function() {
      if(!$(this).hasClass('dropdown')) {
        $(this)
          .addClass('active')
          .siblings('.item')
            .removeClass('active');
      }
    });
Comments