将按钮附加到semantic-ui侧边栏

Question

我正在尝试制作一个简单的侧边栏，就像semantic-ui.com上的那样，只是我想它在右边。看起来很简单，但让按钮附加是我的最大问题。你可以在jsfiddle上看到它，有点工作......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/

- msj121

Answer 1

我知道这可能是以后的事情，但我仍然有一个问题，解决方法很简单，希望能有所帮助。

你只需要创建一个按钮元素并将其放置在侧边栏和推动元素之间，然后分配正确的CSS类即可。

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

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

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

然后按钮将会附着在并随左侧边栏一起流动。

- DarrenK

---

我没有验证，但我会相信这个答案。 - msj121

Answer 2

如果您将按钮固定，并设置right:0px;，那么它将位于右侧。如果侧边栏是否推动页面，您还可以在侧边栏打开时动画位置。

- msj121