Attach button to semantic-ui sidebar

css, javascript, semantic-ui

Solution

I know this is far in the future but I still had a issue with this and the fix is simple enough hope it helps.

You merely have to create a button element and place it between the sidebar and pusher elements then assign the correct css class

<div class="ui sidebar"></div>

<button class="ui black big right attached fixed button">
My Button attached to sidebar</button>

<div class="pusher"></div>

Then the button will attach and flow with a sidebar that is on the left of the page.

Problem

I am trying to make a simple sidebar like that on semantic-ui.com except I want it to be on the right. Seems simple, except getting the button to attach is my greatest issue. You can see it at jsfiddle, kind of working..... HTML: ``` <div class="ui page grid"> <div class="ui column segment"> <div class="ui thin vertical inverted labeled icon right overlay sidebar menu">abc</div> <div class="ui black huge launch left attached button" style="display:absolute;right:0px;width:70px;"> <span class="text" style="display:none;">Sidebar</span> <i class="icon list layout"></i> </div> </div> </div> ``` JS: ``` $(".launch.button").mouseenter(function(){ $(this).stop().animate({width: '215px'}, 300, function(){$(this).find('.text').show();}); }).mouseleave(function (event){ $(this).find('.text').hide(); $(this).stop().animate({width: '70px'}, 300); }); $(".ui.overlay.sidebar").sidebar({overlay: true}) .sidebar('attach events','.ui.launch.button'); ``` http://jsfiddle.net/6Ltv4/

Original source