Kendo UI的默认菜单很棒，但Bootstrap的菜单非常棒。我必须做什么才能在通过kendo ui调用菜单时保持相同的Bootstrap菜单结构？
bootstrap菜单结构：
<div style="height: 0px;" class="nav-collapse clr collapse">
<ul class="nav pull-left">
<li class="active"><a href="#">Home</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Customer <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="nav-header">Customer Mgt</li>
<li class="divider"></li>
<li><a href="#">Manage</a></li>
<li><a href="#">New Customer</a></li>
<li class="divider"></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Cards <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="nav-header">Card Mgt</li>
<li class="divider"></li>
<li><a href="#">Manage</a></li>
<li><a href="#">Diagnosis</a></li>
<li class="divider"></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Reports <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="nav-header">Report Mgt</li>
<li class="divider"></li>
<li><a href="#">Download Report</a></li>
<li><a href="#">Transaction Report</a></li>
<li class="divider"></li>
</ul>
</li>
<li><a href="#contact">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<!-- / header menu -->
<!-- search bar -->
<form class="navbar-search pull-right">
<input type="text" placeholder="Search" class="search-query">
</form>
<!-- / search bar -->
</div>
kendo调用其菜单
<div style="height: 0px;" class="nav-collapse clr collapse">
<!-- header menu -->
@(Html.Kendo().Menu()
.Name("menu")
.Items(menu =>
{
menu.Add().Text("Home").Action("Index", "Home");
menu.Add().Text("Customers").Items(cust =>
{
cust.Add().Text("Manage").Action("Index", "Customer");
cust.Add().Text("New Customer").Action("Create", "Customer");
});
menu.Add().Text("Cards").Items(card =>
{
card.Add().Text("Manage").Action("Index", "Card");
card.Add().Text("Diagnosis").Action("Diagnosis", "Card");
card.Add().Text("Personalise").Action("PrintPersonalise", "Card");
});
menu.Add().Text("Reports").Items(report =>
{
report.Add().Text("Download report").Action("Index", "TerminalDownloadLog");
report.Add().Text("Transaction report").Action("Index", "Transaction");
});
menu.Add().Text("About").Action("About", "Home");
}))
</div>
答案 0 :(得分：1)
我一直在努力解决这个问题，并得出结论，你需要使用Kendo菜单或Bootstrap菜单。
两者都依赖于自己的JS库，所以你不能轻易使用它们。
相反，我使用以下代码创建自己的HTML帮助程序，为Bootstrap生成很好的分层菜单。
public static MvcHtmlString MenuLink(this HtmlHelper htmlHelper, string itemText, string actionName, string controllerName, MvcHtmlString[] childElements = null)
{
var currentAction = htmlHelper.ViewContext.RouteData.GetRequiredString("action");
var currentController = htmlHelper.ViewContext.RouteData.GetRequiredString("controller");
string finalHtml;
var linkBuilder = new TagBuilder("a");
var liBuilder = new TagBuilder("li");
if (childElements != null && childElements.Length > 0)
{
linkBuilder.MergeAttribute("href", "#");
linkBuilder.AddCssClass("dropdown-toggle");
linkBuilder.InnerHtml = itemText + " <b class=\"caret\"></b>";
linkBuilder.MergeAttribute("data-toggle", "dropdown");
var ulBuilder = new TagBuilder("ul");
ulBuilder.AddCssClass("dropdown-menu");
ulBuilder.MergeAttribute("role", "menu");
foreach (var item in childElements)
{
ulBuilder.InnerHtml += item.ToString() + "\n";
}
liBuilder.InnerHtml = linkBuilder.ToString() + "\n" + ulBuilder.ToString();
liBuilder.AddCssClass("dropdown");
if (controllerName == currentController)
{
liBuilder.AddCssClass("active");
}
finalHtml = liBuilder.ToString() + ulBuilder.ToString();
}
else
{
UrlHelper urlHelper = new UrlHelper(htmlHelper.ViewContext.RequestContext, htmlHelper.RouteCollection);
linkBuilder.MergeAttribute("href", urlHelper.Action(actionName, controllerName));
linkBuilder.InnerHtml = itemText;
liBuilder.InnerHtml = linkBuilder.ToString();
if (controllerName == currentController && actionName == currentAction)
{
liBuilder.AddCssClass("active");
}
finalHtml = liBuilder.ToString();
}
return new MvcHtmlString(finalHtml);
}
信用：
http://madushaonline.wordpress.com/2013/09/24/active-links-on-bootstrap-navbar-with-asp-net-mvc/
答案 1 :(得分：0)
最后，由于它花了这么多时间而我可能有一个紧迫的截止日期，我的TEMPORARY解决方案是：
我仍然想知道是否有办法在某处扩展kendo.menu.js，但如上所述，它是一个临时解决方案;希望有人提出一个很酷的答案
谢谢！