停止使用側邊欄溢出內容的語義UI

我在頁面上使用語義UI側欄進行導航。默認情況下，我希望讓用戶可以選擇關閉它，如果他們喜歡它。問題在於，通過默認打開邊欄，我的頁面內容被推出屏幕並溢出，因此部分頁面被切斷。沒有看到文檔中關於使頁面內容符合可用寬度的任何內容，而不是被推下屏幕。停止使用側邊欄溢出內容的語義UI

$('.toggler').on('click', function() { 
 
\t $('.ui.sidebar').sidebar('toggle'); 
 
});

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Semantic UI Sidebar test</title> 
 
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.4/semantic.min.css"> 
 
</head> 
 
<body> 
 
    <div class="ui left sidebar inverted vertical menu visible pushable"> 
 
    <a href="#" class="item">Sidebar Link</a> 
 
</div> 
 
<div class="ui pusher"> 
 
    <div class="ui menu"> 
 
    <a class="item toggler"> 
 
     Toggle 
 
    </a> 
 
    <div class="item header"> 
 
     Semantic UI 
 
    </div> 
 
     <div class="menu right"> 
 
      <a href="#" class="item">Test</a> 
 
     </div> 
 
    </div> 
 
    <div class="ui segment"> 
 
    <table class="ui celled table"> 
 
    <thead> 
 
    <tr><th>Header</th> 
 
    <th>Header</th> 
 
    <th>Header</th> 
 
    </tr></thead> 
 
    <tbody> 
 
    <tr> 
 
     <td> 
 
     <div class="ui ribbon label">First</div> 
 
     </td> 
 
     <td>Cell</td> 
 
     <td>Cell</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Cell</td> 
 
     <td>Cell</td> 
 
     <td>Cell</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Cell</td> 
 
     <td>Cell</td> 
 
     <td>Cell</td> 
 
    </tr> 
 
    </tbody> 
 
    <tfoot> 
 
    <tr><th colspan="3"> 
 
     <div class="ui right floated pagination menu"> 
 
     <a class="icon item"> 
 
      <i class="left chevron icon"></i> 
 
     </a> 
 
     <a class="item">1</a> 
 
     <a class="item">2</a> 
 
     <a class="item">3</a> 
 
     <a class="item">4</a> 
 
     <a class="icon item"> 
 
      <i class="right chevron icon"></i> 
 
     </a> 
 
     </div> 
 
    </th> 
 
    </tr></tfoot> 
 
</table> 
 
    </div> 
 
</div> 
 
    
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.4/semantic.min.js"></script> 
 
    
 
</body> 
 
</html>

來源

2015-10-19 kmm

看一看的Examples section for Sidebar docs。你有兩個選擇，我認爲：

的縮減使用overlay CSS類使用<div class="ui left sidebar inverted vertical menu visible scale down">
使對內容的側邊欄顯示的內容：<div class="ui left sidebar inverted vertical menu visible overlay">

來源

2015-10-19 21:42:38 matagus

這是有用的 - 但僅供參考 - 這是寫在文檔中的位置？我無法在任何地方找到它。 –

你可以把你所有的其他代碼相同，只需更改初始化邊欄的方式即可。

// Initialize the sidebar before it's used 
$('.ui.sidebar').sidebar({ 
    // Overlay will mean the sidebar sits on top of your content 
    transition: 'overlay' 
}); 

// Do the toggling 
$('.toggler').on('click', function() { 
    $('.ui.sidebar').sidebar('toggle'); 
});

來源

2015-10-19 22:27:50 J3Y

這對於初始化和第一次切換很有效，但揭示側邊欄看起來很可怕。有什麼建議麼？ – the4tress

停止使用側邊欄溢出內容的語義UI

回答

相關問題