Clever Geek Handbook

Semantic Ui menu not working

I am trying to work with semantic ui menu.

But I can't seem to get it to work i.e. when i click items in the menu the active state doesn't change. I also haven't found any examples on the internet.

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 took a piece of code from the semantic-ui website.

Some help is appreciated.

+3


source to share


3 answers


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

DEMO



screenshot: screenshot

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


source


Try:

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


Classes ui

, green

and menu

apply to the same element. They are not descendants of each other.

+2


source


To make your menu LIVE with jQuery use this.

From Semantic User Interface Example

$('.ui.menu .ui.dropdown').dropdown({
  on: 'hover'
});
$('.ui.menu a.item').on('click', function() {   
  $(this)
    .addClass('active')
    .siblings()
    .removeClass('active'); 
})
+2


source






More articles:


All Articles