[英]jQuery menu - How to add mouse events?
My goal is this - a simple mouseover on my menu that stay active
while the mouse is in a submenu, and triggers the close()
function when the mouse leaves the main tab or the submenu. 我的目标是-在菜单上进行简单的鼠标悬停,当鼠标位于子菜单中时保持active
,并在鼠标离开主选项卡或子菜单时触发close()
函数。
I understand that I will need an event handler in order to trigger close()
but I would really appreciate any input I can get. 我知道我将需要一个事件处理程序来触发close()
但我将非常感谢我可以获得的任何输入。
Currently the jquery re-writes the parent class 'cbp-hrclosed'
to 'cpb-hropen'
当前,jQuery将父类'cbp-hrclosed'
为'cpb-hropen'
Here is an example of what i'm trying to achieve: http://tympanus.net/codrops/2013/03/05/horizontal-drop-down-menu/ 这是我要实现的目标的示例: http : //tympanus.net/codrops/2013/03/05/horizontal-drop-down-menu/
The jQuery jQuery的
var cbpHorizontalMenu = (function() {
var hover = 1;
var $listItems = $( '#cbp-hrmenu > ul > li' ),
$menuItems = $listItems.children( 'a' ),
$body = $( 'body' ),
current = -1;
function init() {
$menuItems.on( 'click', open );
$listItems.on( 'click', function( event ) { event.stopPropagation();
hover=1;
} );
}
function open( event ) {
if( current !== -1) {
$listItems.eq( current ).removeClass( 'cbp-hropen' ).addClass('cbp-hrclosed');
}
var $item = $( event.currentTarget ).parent( 'li' ),
idx = $item.index();
if( current === idx ) {
$item.removeClass( 'cbp-hropen' ).addClass('cbp-hrclosed');
current = -1;
}
else {
$item.addClass( 'cbp-hropen' );
$item.removeClass('cbp-hrclosed').addClass('cbp-hropen');
current = idx;
$body.off( 'click' ).on( 'click', close );
$body.on( 'click', close );
}
return false;
}
function close( event ) {
$listItems.eq( current ).removeClass( 'cbp-hropen' ).addClass('cbp-hrclosed');
current = -1;
}
return { init : init };
})();
HTML 的HTML
<?php echo'<div class="container">
<div class="main">
<nav id="cbp-hrmenu" class="cbp-hrmenu">
<ul>
<!-- Tab -->
<li class="cbp-hrclosed">
<a href="#">Antique</a>
<div class="cbp-hrsub">
<div class="cbp-hrsub-inner">
<div>
<h4>Heading</h4>
<ul>
<li><a href="#">Selection</a></li>
<li><a href="#">Selection</a></li>
<li><a href="#">Selection</a></li>
<li><a href="#">Selection</a></li>
<li><a href="#">Selection</a></li>
<li><a href="#">Selection</a></li>
</ul>
</div>
<div>
<h4>Heading</h4>
<ul>
<li><a href="#">Selection</a></li>
<li><a href="#">Selection</a></li>
<li><a href="#">Selection</a></li>
<li><a href="#">Selection</a></li>
<li><a href="#">Selection</a></li>
<li><a href="#">Selection</a></li>
</ul>
</div>
<div>
<h4>Heading</h4>
<ul>
<li><a href="#">Selection</a></li>
<li><a href="#">Selection</a></li>
<li><a href="#">Selection</a></li>
<li><a href="#">Selection</a></li>
<li><a href="#">Selection</a></li>
<li><a href="#">Selection</a></li>
</ul>
</div>
</div><!-- /cbp-hrsub-inner -->
</div><!-- /cbp-hrsub -->
</li>
<!-- Tab -->
<li class="cbp-hrclosed">
<a href="#">Modern</a>
<div class="cbp-hrsub">
<div class="cbp-hrsub-inner">
<div>
<h4>Heading</h4>
<ul>
<li><a href="#">Selection</a></li>
<li><a href="#">Selection</a></li>
<li><a href="#">Selection</a></li>
<li><a href="#">Selection</a></li>
<li><a href="#">Selection</a></li>
<li><a href="#">Selection</a></li>
</ul>
</div>
<div>
<h4>Heading</h4>
<ul>
<li><a href="#">Selection</a></li>
<li><a href="#">Selection</a></li>
<li><a href="#">Selection</a></li>
<li><a href="#">Selection</a></li>
<li><a href="#">Selection</a></li>
<li><a href="#">Selection</a></li>
</ul>
</div>
<div>
<h4>Heading</h4>
<ul>
<li><a href="#">Selection</a></li>
<li><a href="#">Selection</a></li>
<li><a href="#">Selection</a></li>
<li><a href="#">Selection</a></li>
<li><a href="#">Selection</a></li>
<li><a href="#">Selection</a></li>
</ul>
</div>
</div><!-- /cbp-hrsub-inner -->
</div><!-- /cbp-hrsub -->
</li>
<!-- Tab -->
<li class="cbp-hrclosed">
<a href="#">Contemporary</a>
<div class="cbp-hrsub">
<div class="cbp-hrsub-inner">
<div>
<h4>Heading</h4>
<ul>
<li><a href="#">Selection</a></li>
<li><a href="#">Selection</a></li>
<li><a href="#">Selection</a></li>
<li><a href="#">Selection</a></li>
<li><a href="#">Selection</a></li>
<li><a href="#">Selection</a></li>
</ul>
</div>
<div>
<h4>Heading</h4>
<ul>
<li><a href="#">Selection</a></li>
<li><a href="#">Selection</a></li>
<li><a href="#">Selection</a></li>
<li><a href="#">Selection</a></li>
<li><a href="#">Selection</a></li>
<li><a href="#">Selection</a></li>
</ul>
</div>
<div>
<h4>Heading</h4>
<ul>
<li><a href="#">Selection</a></li>
<li><a href="#">Selection</a></li>
<li><a href="#">Selection</a></li>
<li><a href="#">Selection</a></li>
<li><a href="#">Selection</a></li>
<li><a href="#">Selection</a></li>
</ul>
</div>
</div><!-- /cbp-hrsub-inner -->
</div><!-- /cbp-hrsub -->
</li>
<!-- Tab -->
<li class="cbp-hrclosed">
<a href="#">Exhibitions</a>
<div class="cbp-hrsub">
<div class="cbp-hrsub-inner">
<div>
<h4>Heading</h4>
<ul>
<li><a href="#">Selection</a></li>
<li><a href="#">Selection</a></li>
<li><a href="#">Selection</a></li>
<li><a href="#">Selection</a></li>
<li><a href="#">Selection</a></li>
<li><a href="#">Selection</a></li>
</ul>
</div>
<div>
<h4>Heading</h4>
<ul>
<li><a href="#">Selection</a></li>
<li><a href="#">Selection</a></li>
<li><a href="#">Selection</a></li>
<li><a href="#">Selection</a></li>
<li><a href="#">Selection</a></li>
<li><a href="#">Selection</a></li>
</ul>
</div>
<div>
<h4>Heading</h4>
<ul>
<li><a href="#">Selection</a></li>
<li><a href="#">Selection</a></li>
<li><a href="#">Selection</a></li>
<li><a href="#">Selection</a></li>
<li><a href="#">Selection</a></li>
<li><a href="#">Selection</a></li>
</ul>
</div>
</div><!-- /cbp-hrsub-inner -->
</div><!-- /cbp-hrsub -->
</li>
</ul>
</nav>
</div>
</div>
';?>
CSS 的CSS
@keyframes slideDown
{
from {top:0em;}
to {top:22.1em;}
}
@-webkit-keyframes slideDown /*Safari and Chrome*/
{
from {top:0em;}
to {top:22.1em;}
}
@keyframes slideUp
{
from {top:22.1em;
background-color:#cfcfcf;
}
to {top:0em;
background-color:#575757;
}
}
@-webkit-keyframes slideUp /*Safari and Chrome*/
{
from {top:22.1em;}
to {top:0em;}
}
.cbp-hrmenu {
width: 100%;
border-bottom: 4px solid #ECECEC;
}
.container{
background-color:#eee;
}
/* general ul style */
.cbp-hrmenu {
width: 100%;
/* margin-top: 2em; */
border-bottom: 6px solid #D6D6D6;
padding-top: 20px;
/* font-size: 10px; */
}
/* first level ul style */
.cbp-hrmenu > ul,
.cbp-hrmenu .cbp-hrsub-inner {
width: 90%;
max-width: 90em;
margin: 0 auto;
padding: 0 1.875em;
}
.cbp-hrmenu > ul > li {
display: inline-block;
}
.cbp-hrmenu > ul > li > a {
font-weight: 300;
padding: 1em 2em;
color: #999;
display: inline-block;
font-size:160%;
font-family:Francois One;
}
.cbp-hrmenu > ul > li > a:hover {
color: #4D4D4D;
}
.cbp-hrmenu > ul > li.cbp-hropen a,
.cbp-hrmenu > ul > li.cbp-hropen > a:hover {
color: #fff;
background: #D6D6D6;
font-family:Francois One;
font-weight:300;
}
/* sub-menu */
.cbp-hrmenu .cbp-hrsub {
display: block;
position: absolute;
background-color: #cfcfcf;
width: 100%;
left: 0;
z-index:-1;
top:0;
animation:slideUp 500ms ;
-webkit-animation:slideUp 500ms ease-in-out; /*Safari and Chrome*/
animation-timing-function: ease;
-webkit-animation-timing-function: ease;
top:0;
}
.cbp-hropen .cbp-hrsub {
display: block;
animation:slideDown 1000ms ;
-webkit-animation:slideDown 1000ms ease-in-out; /*Safari and Chrome*/
animation-timing-function: ease;
-webkit-animation-timing-function: ease;
z-index:-1000;
position:absolute;
top:22em;
}
html.js body#home.big div#header div div.container div.main nav#cbp-hrmenu.cbp-hrmenu ul li.cbp-hropen div.cbp-hrsub{
top:22em;
display:block;
background-color:#d6d6d6;
}
.cbp-hrmenu .cbp-hrsub-inner > div {
width: 33%;
float: left;
padding: 0 2em 0;
}
.cbp-hrmenu .cbp-hrsub-inner:before,
.cbp-hrmenu .cbp-hrsub-inner:after {
content: " ";
display: table;
}
.cbp-hrmenu .cbp-hrsub-inner:after {
clear: both;
}
.cbp-hrmenu .cbp-hrsub-inner > div a {
line-height: 2em;
color: #fff;
font-family: Francois One;
font-weight: 300;
}
.cbp-hrsub h4 {
padding: 2em 0 0.6em;
margin: 0;
font-size: 160%;
font-weight: 300;
}
/* Examples for media queries
@media screen and (max-width: 52.75em) {
.cbp-hrmenu {
font-size: 80%;
}
}
*/
@media screen and (max-width: 43em) {
.cbp-hrmenu .cbp-hrsub {
display: block;
}
.cbp-hrmenu {
font-size: 120%;
border: none;
}
.cbp-hrmenu > ul,
.cbp-hrmenu .cbp-hrsub-inner {
width: 100%;
padding: 0;
}
.cbp-hrmenu .cbp-hrsub-inner {
padding: 0 2em;
font-size: 75%;
}
.cbp-hrmenu > ul > li {
display: block;
border-bottom: 4px solid #ECECEC;
}
.cbp-hrmenu > ul > li > a {
display: block;
padding: 1em 3em;
}
.cbp-hrmenu .cbp-hrsub {
position: relative;
}
.cbp-hrsub h4 {
padding-top: 0.6em;
}
}
@media screen and (max-width: 43em) {
.cbp-hrmenu .cbp-hrsub-inner > div {
width: 100%;
float: none;
padding: 0 2em;
}
.cbp-hropen .cbp-hrsub {
padding-bottom: 0em;
animation:inital;
-webkit-animation:inital; /*Safari and Chrome*/
z-index:inital;
position:inital;
}
div .cbp-hrmenu .cbp-hrsub {
position: static;
}
#cbp-hrmenu > ul > li:nth-child(1) > div,
#cbp-hrmenu > ul > li:nth-child(2) > div,
#cbp-hrmenu > ul > li:nth-child(3) > div,
#cbp-hrmenu > ul > li:nth-child(4) > div
{display:none;}
#cbp-hrmenu > ul > li.cbp-hropen > div{display:block;}
}
It would be much easier if you were to complete this menu using pure css. 如果您要使用纯CSS完成此菜单,将会容易得多。
For example if you use an unordered list - using the following css, you can achieve what you are doing but will a lot less hassle with using jquery. 例如,如果您使用无序列表-使用以下CSS,则可以实现您正在做的事情,但是使用jquery会减少很多麻烦。
HTML 的HTML
<ul><li>Home</li>
<li>
Antique
<ul>
<li>Heading</li>
<li>Heading</li>
<li>Heading</li>
</ul>
</li>
<li>
Modern
<ul>
<li>Heading</li>
<li>Heading</li>
<li>Heading</li>
</ul>
</li>
<li>
Contemporary
<ul>
<li>Heading</li>
<li>Heading</li>
<li>Heading</li>
</ul>
</li>
<li>
Exhibitions
<ul>
<li>Heading</li>
<li>Heading</li>
<li>Heading</li>
</ul>
</li>
</ul>
CSS 的CSS
body {
font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
padding: 20px 50px 150px;
font-size: 13px;
text-align: center;
background: #E3CAA1;
}
ul {
text-align: left;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
list-style: none;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
ul li {
font: bold 12px/18px sans-serif;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 15px 20px;
background: #fff;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
ul li:hover {
background: #555;
color: #fff;
}
ul li ul {
padding: 0;
position: absolute;
top: 48px;
left: 0;
width: 150px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
}
ul li ul li {
background: #555;
display: block;
color: #fff;
text-shadow: 0 -1px 0 #000;
}
ul li ul li:hover { background: #666; }
ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
I hoped I have helped, this is the type of css menu I used on my project and it was very easy to style and manipulate to different needs. 我希望能有所帮助,这是我在项目中使用的css菜单的类型,可以很容易地设置样式和操作以适应不同的需求。
Here is a working example: http://cssdeck.com/labs/tanipt0r 这是一个工作示例: http : //cssdeck.com/labs/tanipt0r
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.