我使用navbar(bootstrap 3)作为我网站的主导航菜单,我有几个下拉菜单(其中一些填充了固定数据,一些数据来自数据库),我希望有每个下拉列表中都有一个Y滚动条,因此当用户点击drondown时,我的导航栏中没有更改任何内容,它显示了有限数据,可以滚动查看其余内容
非常感谢所有想法。 这是我的代码:
<nav class="navbar navbar-inverse" role="navigation">
<div class="collapse navbar-collapse navbar-ex1-collapse" >
<ul class="nav navbar-nav">
@if (Html.HasAssetContext())
{
<li><a href="@Url.Action("Index", Html.HasAssetContext() ? "Asset" : "Home")"><i class="icon-home"></i></a></li>
}
@if (Html.HasPermission(Category.SEARCH) && (Html.HasCompanyContext() || Html.IsClient()))
{
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-search"></i>Search <b class="caret"></b></a>
<ul class="dropdown-menu">
@Html.MenuLink("Systems", "Index", "System")
@Html.MenuLink("Machines", "Index", "Machine")
@Html.MenuLink("Components", "Index", "Component")
@Html.MenuLink("Exceptions", "Index", "Exception")
</ul>
</li>
}
@if (Html.HasPermission(Category.ORDER) && Html.OrderModuleEnabled())
{
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-briefcase"></i>Order <b class="caret"></b></a>
<ul class="dropdown-menu">
@Html.MenuLink("Customers", "Customers", "Order")
@Html.MenuLink("Machine Orders", "MachineOrders", "Order")
</ul>
</li>
}
@if (Html.HasAssetContext())
{
if (Html.HasPermission(Category.REPORT))
{
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-file-text"></i>Report <b class="caret"></b></a>
<ul class="dropdown-menu">
@Html.MenuLink("Exception Charts", "Index", "Chart")
<li class="divider"></li>
@Html.MenuLink("PM Compliance By Machine", "MachinePmCompliance", "Report")
@Html.MenuLink("PM Compliance By Component", "ComponentPmCompliance", "Report")
<li class="divider"></li>
@Html.MenuLink("MTBE By Machine", "MachineMeanTimeBetweenException", "Report")
@Html.MenuLink("MTBE By Component", "ComponentMeanTimeBetweenException", "Report")
<li class="divider"></li>
@Html.MenuLink("Cost Benefit Analysis", "CostAnalysis", "Report")
@Html.MenuLink("Asset Hierarchy", "AssetHierarchy", "Report")
</ul>
</li>
}
if (Html.HasPermission(Category.DOCUMENT))
{
<li><a href="@Url.Action("Documents", "Document")"><i class="icon-file"></i>Documents</a></li>
}
if (Html.HasPermission(Category.DATA_ENTRY))
{
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-list"></i>Data <b class="caret"></b></a>
<ul class="dropdown-menu">
@Html.MenuLink("Identification Reports", "IdentificationReports", "Report")
@Html.MenuLink("Component Checklist", "ComponentChecklist", "Data")
@Html.MenuLink("Manage Engineers", "Engineers", "Data")
</ul>
</li>
}
}
@if (Html.HasCompanyContext() || Html.IsClient())
{
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-anchor"></i>Assets <b class="caret"></b></a>
@Html.AssetMenuLinks()
</li>
}
@if (Html.HasPermission(Category.SELECT_COMPANY))
{
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-building"></i>Companies <b class="caret"></b></a>
@Html.CompanyMenuLinks()
</li>
}
@if (Html.HasPermission(Category.ADMINISTRATION))
{
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-cog"></i>Admin <b class="caret"></b></a>
<ul class="dropdown-menu">
@Html.MenuLink("Companies", "Companies", "Administration")
@Html.MenuLink("Assets", "Assets", "Administration")
@Html.MenuLink("Users", "Users", "Administration")
<li class="divider"></li>
@Html.MenuLink("Applications", "Applications", "Administration")
@Html.MenuLink("Bearings", "Bearings", "Administration")
@Html.MenuLink("Departments", "Departments", "Administration")
@Html.MenuLink("Environments", "Environments", "Administration")
@Html.MenuLink("Faults", "Faults", "Administration")
@Html.MenuLink("Manufacturers", "Manufacturers", "Administration")
@Html.MenuLink("Severities", "Severities", "Administration")
@Html.MenuLink("Techniques", "Techniques", "Administration")
@Html.MenuLink("Templates", "Templates", "Administration")
@Html.MenuLink("Work Order Statuses", "WorkOrderStatuses", "Administration")
<li class="divider"></li>
@Html.MenuLink("Import Data", "ImportData", "Administration")
@Html.MenuLink("Audit History", "AuditHistory", "Administration")
</ul>
</li>
}
@if (!Html.IsClient())
{
<li><a href="@Url.Action("Index", "Info")"><i class="icon-info"></i>Info</a></li>
}
</ul>
</div>
</nav>
答案 0 :(得分:4)
正如我在评论中所说,在引导程序之后导入自定义css文件并尝试类似:
.dropdown-menu {
max-height:150px;
overflow-y:scroll;
}