Geek asks and answers

Attach a button to the sidebar of semantics

I am trying to create a simple sidebar like this one on semantic-ui.com, except that I want it to be on the right. It seems simple, except that the button to join is my biggest problem. You can see this on jsfiddle, sort 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/

+3
source share
2 answers

I know this is far in the future, but I still had a problem with this, and the fix is ​​simple enough to help.

You just need to create a button element and place it between the sidebar and pusher elements and 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>

, .

+2

, : 0px; . , , .

0

More articles:


All Articles