Semantic-UI Menu always shows the same content - help please

[ktaggart]

I attempted to post this issue on the Semantic-UI github, but there was no obvious way to create a new issue. Considering that there are currently over 7000 issues (and again, no obvious way to search the issues) I decided to post here, as I am working with Meteor/Semantic-UI...

I am attempting to use the Sematic-UI Menu, and see no indication on how to change the content based on menu selection - or even the javascript that should make it all work (seems to be a recurring theme with Semantic-UI; scant documentation and incongrous examples).

Specifically, the example html code for the tabular menu (left side tabs/stretched grid column) shows how to create four tabs, all of which display the same content:

<div class="ui grid">
  <div class="four wide column">
    <div class="ui vertical fluid tabular menu">
      <a class="item">
        Bio
      </a>
      <a class="item">
        Pics
      </a>
      <a class="item">
        Companies
      </a>
      <a class="item active">
        Links
      </a>
    </div>
  </div>
  <div class="twelve wide stretched column">
    <div class="ui segment">
      This is an stretched grid column. This segment will always match the tab height
    </div>
  </div>
</div>

How do I indicate unique content for each tab?

Is there any javascript associated with this example that makes the menu work that is, for whatever reason, buried somewhere else?

If anyone has sample code they can post, it would be greatly appreciated!

[ktaggart]

Anyone have insights into this issue? Code examples?

[ktaggart]

Is this supported at all? No examples?

[nooitaf]

afaik there is no javascript for the menu. You'll have to do the logic yourself. The "interactivity" on the semantic-ui page is just for illustration. You will have to set the classes of the items to change how they look.

If you want to use Blaze you might want to take a look at Meteor/Session+Blaze/Templates examples first. Once you understand how those work together, this and lots of other problems solve them self.

In Blaze you might use an event to set a Session value which you might use to set/add the active class. Then you might use a custom Template for the content.

something in the means of this..

<a class="item {{isActive 'links'}} menu-links">
  Links
</a>

UI.registerHelper('isActive', function(name){
  return Session.equals('activeMenu',name) ? 'active' : ''
})

Template.menutemplate.events({
  'click .menu-links':function(){
    Session.set('activeMenu','links')
  }
})

[nooitaf]

But let me add, there are >9000 ways of doing things in meteor and i don't want to put you on a path that might bite you or others in the foot later on in the project.

[ktaggart]

Thanks for the response.

I was not able to get you example code working; every attempt resulted in not being able to even select a menu item (make active), but it did help me advance in another area, somewhat.

I can select the menu tabs via javascript now, and can change the content via session.get/set. The problem now is that the accordion stops working when switching tabs...

I'll start a new topic for that.