Fixed or sticky menu

[siamak riyahi]

Hi friends

How I can have semantic menu fixed or sticky in the most top or any position in the page?

Regards

[Serkan Durusoy]

You can put it in a sidebar or combine the menu and sidebar (choose top position) classes on the same dom element.

http://semantic-ui.com/modules/sidebar.html has an example.

<div class="ui menu top sidebar">

  <!-- and your menu dom tree in here -->

</div>

[Jack Lukic]

I have recently written a sticky module as part of a redesign of a site using Semantic.

https://github.com/Semantic-Org/Semantic-UI/blob/css/src/definitions/modules/sticky.js

I have also written a visibility API for triggering events on element visibility

https://github.com/Semantic-Org/Semantic-UI/blob/css/src/definitions/behaviors/visibility.js

These will both be part of release version of SUI, but I have not had the time to write documentation for yet.

Visibility

Their usage is like $('.whatever').visibility('top visible', function() { console.log('do something'); } );

For more available functions you'll have to look directly at JS, but includes things like "top passed" "bottom passed" "bottom visible" "passed 50%" etc. 

Sticky

This is used specifically for menus that hit horizontally next to content and stay fixed while this content passes. This could be used, for example, for menus like the Semantic UI definition docs following menu. 

Usage is like $('.ui.sticky').sticky({ context: '.element'}); where context is the element which it will be bound by. This might be difficult to use without some examples so keep that in mind. But I will get them out there shortly.

--
You received this message because you are subscribed to the Google Groups "Semantic UI" group.
To unsubscribe from this group and stop receiving emails from it, send an email to semantic-ui...@googlegroups.com.
To post to this group, send email to seman...@googlegroups.com.
Visit this group at http://groups.google.com/group/semantic-ui.
For more options, visit https://groups.google.com/d/optout.

[Biswaranjan Pati]

<div class="ui top inverted teal sidebar menu active">

  <div class="header item">Top Sidebar menu</div>

  <a class="item">One</a>

  <a class="item">Two</a>

  <a class="item">Three</a>

</div>