I am trying to make a simple sidebar like that on semantic-ui 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');

/

I am trying to make a simple sidebar like that on semantic-ui. 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/6Ltv4/

• javascript
• css
• semantic-ui

2 Answers 2

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.

If you make the button fixed, and right:0px; Then it will be on the right side. If the sidebar pushes the page or not, you can animate the location as well when the sidebar opens.