Фиксированный заголовок Под Navbar меню

-1

Как создать меню заголовка под меню NavBar, который закреплен, как Vtiger Dashboard:Фиксированный заголовок Под Navbar меню

Вот мое:

$(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>

Fixed Navbar работает правильно , но я не знаю, как добавить еще один сегмент, который тоже исправлен, ниже navbar. Я использую семантический ui как css framework

источник

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

Фиксированный заголовок Под Navbar меню

ответ

Смежные вопросы