我正在使用YAMM为Bootstrap创建一个大型菜单,但我无法弄清楚如何在mouseover/hover上显示菜单.目前它只出现在点击.
<div class="container">
<div class="navbar yamm">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target="#nav1">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="#"> Yamm Megamenu </a>
<div class="nav-collapse collapse" id="nav1">
<ul class="nav">
<!-- Classic list -->
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"> List <b class="caret"></b> </a>
<ul class="dropdown-menu">
<li>
<!-- Content container to add padding -->
<div class="yamm-content">
<ul class="span2 unstyled">
<li><p><strong>Section Title</strong></p></li>
<li>
List Item
</li>
<li>
List Item
</li>
<li>
List Item
</li> …我使用bootstrap 3并设计大型菜单导航.
HTML:
<div class="container">
<nav class="navbar navbar-default">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".js-navbar-collapse"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button> <a class="navbar-brand" href="#">MegaMenu</a>
</div>
<div class="collapse navbar-collapse js-navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown mega-dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Collection <span class="glyphicon glyphicon-chevron-down pull-right"></span></a>
<ul class="dropdown-menu mega-dropdown-menu row">
<li class="col-sm-3">
<ul>
<li class="dropdown-header">New in Stores</li>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active"> <a href="#"><img src="http://placehold.it/254x150/3498db/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 1"></a>
<h4><small>Summer dress floral prints</small></h4>
<button class="btn …我真的想要整合angular2材质,注意以下菜单示例:
https://material.angularjs.org/1.1.4/demo/menuBar
这是一个美女:http://codepen.io/anon/pen/zrdQwP
我喜欢你可以使用嵌套菜单,但是对于Angular 2/4演示,你看到的只有:
https://material.angular.io/components/component/menu
嵌套菜单没有示例!这是否可以使用Angular2 + Material？如果是这样,有人可以演示如何使用它吗？或者这是不可能的？如果Angular 2/4不能支持这个,而Angular 1.x可以...
我是Drupal的新手.我正在使用Megamenu下拉列表显示我正在处理的网站中的主菜单.但我需要覆盖Megamenu模块文件中的函数(megamenu_theme_menu_tree)以向megamenu输出添加一些html.编辑模块文件对我有用,但我不确定它是否正确.
还有其他办法吗？
请帮忙
谢谢
我有UIX要求实现多列/超级下拉.有人可以提供代码,可用的jquery插件,编程最佳实践/建议来实现这个UI功能(是的,我已经google了,并没有真正看到任何吸引人的东西？
编辑免责声明:这是一般问题.不确定需要在这里调用哪些"技术"标准,但如果您需要更多信息,请查询我可以包含哪些内容以使其有用或不那么暧昧,我可以编辑我的回复(或者随时编辑,请thx!) .
我在网上找到的大型下拉菜单有问题。它非常适合我的目的，但有时它的行为很奇怪，并且有闪烁和闪烁的问题。我找到它的链接在这里：http : //bootsnipp.com/snippets/featured/mega-menu-slide-down-on-hover-with-carousel。作者已经知道这个问题，但基本上它可以在移动设备上正常工作，如果它会被隐藏。在桌面版本上，我认为这是一个非常好的主意，我在我建立的网站上使用：http : //napoleon.larchedigitalmedia.com/。
我之前告诉过你的问题是调情，我猜问题出在 jquery 中：
$(".dropdown").hover(
function() {
$('.dropdown-menu', this).not('.in .dropdown-menu').stop(true,true).slideDown("400");
$(this).toggleClass('open');
},
function() {
$('.dropdown-menu', this).not('.in .dropdown-menu').stop(true,true).slideUp("400");
$(this).toggleClass('open');
});
我不明白这是引导程序问题（引导程序主要使用大型下拉菜单的 onclick 事件）还是问题出在此代码段中。本质上，类 open 添加（切换）到一个 div 的速度太快了，有时它会同时应用于两个 div。谁能帮我解决这个问题？
这是我基本上想要做的事情.
http://jsfiddle.net/miiicheellee/aHwS8/151/
HTML:
<ul id="Navigation_T5C241A8C018_ctl00_ctl00_ctl03_ctl00_childNodesContainer">
<li><a href="" class="mainPage">1</a></div>
<li><a href="" class="mainPage">2</a></div>
<li><a href="" class="mainPage">3</a></div>
</ul>
CSS:
.mainPage:nth-of-type(2) a{
background: red;
}
<!-- how would I get this to work if the list items do NOT have an identification? --!>
问题是我无法使用列表项的标识,因为我的网站上有ul和li的复杂嵌套,虽然我知道这样可行.有没有其他方法可以使用我在jsfiddle上的方法来做到这一点？换句话说,请不要操纵HTML - 遗憾的是,我无法控制ID和类名.