將按鈕附加到semantic-ui側欄

我想在semantic-ui.com上製作一個簡單的側欄，除非我希望它位於右側。似乎很簡單，除了讓按鈕連接是我最大的問題。你可以看到的jsfiddle它，那種工作..... HTML：將按鈕附加到semantic-ui側欄

<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/

來源

2014-02-20 msj121

我知道這是遠在未來，但我仍然有這個問題，修復很簡單，希望它有幫助。

你只需要創建一個按鈕元素，並將其放置在側邊欄和推動構件之間，然後分配正確的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-04 23:59:05 DarrenK

我沒有驗證，但我會相信答案。 – msj121

如果使按鈕固定，右：0像素;然後它會在右側。如果側邊欄按下頁面，您也可以在側邊欄打開時爲該位置設置動畫。

來源

2014-02-21 03:56:52 msj121

將按鈕附加到semantic-ui側欄

回答

相關問題