3

私はセマンティック 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 に答える