3

我正在尝试在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/

4

2 回答 2

3

我知道这还遥遥无期，但我仍然对此有疑问，修复很简单，希望对您有所帮助。

您只需创建一个按钮元素并将其放置在侧边栏和推送器元素之间，然后分配正确的 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>

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

于 2015-02-04T23:59:05.427 回答
0

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

于 2014-02-21T03:56:52.127 回答