在導航欄固定標題菜單

-1

如何創建在導航欄菜單的標題菜單，是固定的，就像好vtiger板：在導航欄固定標題菜單

這裏是我的：

$(document).ready(function(){ 
 
    $('.ui.dropdown').dropdown(); 
 
});

*{ 
 
\t margin: 0; 
 
\t padding: 0; 
 
} 
 

 
body{ 
 
\t font-family: 'Open Sans', sans-serif; 
 
\t margin-bottom: 60px; 
 
} 
 

 
.ui.grid.main{ 
 
\t margin-top: 70px; 
 
} 
 

 
.padding-reset{ 
 
\t padding: 0px !important; 
 
} 
 

 
.ui.message{ 
 
\t padding: 40px !important; 
 
} 
 

 
@media (max-width: 767px) { 
 
    \t .ui.grid.main{ 
 
    \t \t margin-top: 70px; 
 
\t } 
 
\t .ui.vertical.menu.navbar{ 
 
\t \t margin-top: 0px !important; 
 
\t } 
 
} 
 

 
.ui.vertical.menu{ 
 
\t margin-top: -15px !important; 
 
\t width: 100%; 
 
\t display: none; 
 
} 
 

 
.ui.page.grid{ 
 
\t padding-left: 2%; 
 
\t padding-right: 2%; 
 
} \t

<head> 
 
    <link href="http://cdnjs.cloudflare.com/ajax/libs/semantic-ui/0.13.0/css/semantic.min.css" rel="stylesheet"/> 
 
</head> 
 
<body> 
 
    <div class="ui grid"> 
 
     <div class="ui blue inverted fixed menu navbar page grid"> 
 
      <a href="" class="active item"><i class="home icon"></i></a> 
 
      <a href="" class="item">Calendar</a> 
 
      <a href="" class="item">Leads</a> 
 
      <a href="" class="item">Account Members</a> 
 
      <a href="" class="item">Contacts</a> 
 
      <a href="" class="item">Opportunities</a> 
 
      <a href="" class="item">Quotes</a> 
 
      <a href="" class="item">Documents</a> 
 
      <a href="" class="item">Services</a> 
 
      <div class="right menu"> 
 
      \t <a href="" class="active item"><i class="trash brush icon"></i></a> 
 
      \t <a href="" class="item"><i class="paint brush icon"></i></a> 
 
      \t <a href="" class="item"><i class="settings icon"></i></a> 
 
      \t <a class="ui dropdown item">Owner 
 
      \t \t <i class="dropdown icon"></i> 
 
      \t \t <div class="menu"> 
 
      \t \t \t <div class="item">My Preferences</div> 
 
      \t \t \t <div class="item">Log Out</div> 
 
      \t \t </div> 
 
      \t </a> 
 
      </div> 
 
     </div> 
 
    </div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="http://cdnjs.cloudflare.com/ajax/libs/semantic-ui/0.13.0/javascript/semantic.min.js"></script> 
 
</body>

固定的導航欄可以正常工作，但我不知道如何添加另一個細分，在navbar下方也是如此。我使用語義ui作爲css框架

來源

2015-05-04 Yefta Wibowo

您可以使用語義UI粘性將頁面添加到頁面的頂部。在該段你可以把多個菜單欄，圖像，嵌套塊，文本等

<div class="ui sticky stickyTop"> 
<div class="ui inverted segment"> 
    <div class="ui blue inverted menu navbar"> 
     <a href="" class="active item"><i class="home icon"></i></a> 
     <a href="" class="item">Calendar</a> 
     <a href="" class="item">Leads</a> 
    </div> 
    <h3 class="ui header">Stuck Content</h3> 
    <p>Add menu bar, images, whatever here!</p> 
    <p>You will need to override some semantic UI css, such as margins however. For that, remember to use "<strong>!important"</strong></p> 
</div> 
</div> 
<div class="content"> 
    //... Your body content 
</div>

這裏有一個半工作的代碼示例： http://jsfiddle.net/sL4fnrz0/3/

我說「半工作」例如，因爲語義UI粘性只能在代碼遊戲場中有限的範圍內運行...... 請嘗試將代碼複製到html文件。

來源

2015-05-08 07:25:09 Oniisaki

在導航欄固定標題菜單

回答

相關問題