Question

如何在导航栏菜单下创建一个固定的标题菜单，如VTiger Dashboard：

这是我的：

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

*{
	margin: 0;
	padding: 0;
}

body{
	font-family: 'Open Sans', sans-serif;
	margin-bottom: 60px;
}

.ui.grid.main{
	margin-top: 70px;
}

.padding-reset{
	padding: 0px !important;
}

.ui.message{
	padding: 40px !important;
}

@media (max-width: 767px) {
  	.ui.grid.main{
  		margin-top: 70px;
	}
	.ui.vertical.menu.navbar{
		margin-top: 0px !important;
	}
}

.ui.vertical.menu{
	margin-top: -15px !important;
	width: 100%;
	display: none;
}

.ui.page.grid{
	padding-left: 2%;
	padding-right: 2%;
}

<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">
            	<a href="" class="active item"><i class="trash brush icon"></i></a>
            	<a href="" class="item"><i class="paint brush icon"></i></a>
            	<a href="" class="item"><i class="settings icon"></i></a>
            	<a class="ui dropdown item">Owner
            		<i class="dropdown icon"></i>
            		<div class="menu">
            			<div class="item">My Preferences</div>
            			<div class="item">Log Out</div>
            		</div>
            	</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>

固定导航栏工作正常，但我不知道如何在导航栏下面添加另一个固定的段。我使用语义ui作为css框架

Answer 1

您可以使用语义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文件中。

Navbar菜单下的固定标题

1 个答案: