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/

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>

然后按钮将附加并与页面左侧的侧边栏一起流动。

Answer 2

如果按钮固定，则右：0px;然后它将在右侧。如果侧边栏是否按下了页面，您也可以在侧边栏打开时为该位置设置动画。

将按钮附加到语义-ui侧边栏

2 个答案: