垂直菜单在悬停时保持打开，然后在悬停时关闭 [英] Vertical Menu to stay open on hover then close when another is hovered

问题描述

我有一个垂直轮播菜单，其中两个菜单项打开以显示子菜单.当您将鼠标悬停在菜单上时，它们将再次关闭并返回到正常的菜单状态.

我正在寻找的是一种使其悬停并保持打开状态的方法，然后当悬停任何一个菜单时，它们将关闭并悬停激活...

我正在使用Joomla！同样，显示站点等信息可能很棘手，但这是JavaScript，希望如果需要更多信息，我可以将其发布.谢谢！

<script type="text/javascript">
$(function(){
  $("ul li.parent").hover(function(){
     $(this).children("ul").slideDown(300);
     $(".contact-details-container p").fadeOut(200);
  },function(){
     $(this).children("ul").stop(true, true).slideUp(300); 
     $(".contact-details-container p").stop(true, true).fadeIn(2000);
  });
});
</script>

HTML

<nav>

<ul class="menu-main">
<li class="item-108"><a href="#">Home</a></li>
<li class="item-111 deeper parent"><a href="#">History and Restoration</a>
<ul>
<li class="item-125"><a href="#">History</a></li>
<li class="item-126"><a href="#">The Kennaway Connection</a></li>
<li class="item-127"><a href="#">Previous Residents</a></li>
<li class="item-128"><a href="#">Restoration</a></li>
<li class="item-129"><a href="#">Sidmouth / Heritage Coast</a></li>
</ul>
</li>
<li class="item-112"><a href="#">Wedding Venue</a></li>
<li class="item-113"><a href="#">Hiring Rooms</a>       </li>
<li class="item-114 current active"><a href="#">Virtual Tour</a></li>
<li class="item-115"><a href="#">Art and Exhibitions</a></li>
<li class="item-116"><a href="#">Learning</a></li>
<li class="item-117 deeper parent"><a href="#">How Can I help</a>
<ul>
<li class="item-130"><a href="#">Friends of Kennaway House</a></li>
<li class="item-131"><a href="#">Volunteer Opportunities</a></li></ul></li>
<li class="item-118"><a href="#">Gallery</a></li>
<li class="item-119"><a href="#">Contact</a></li>
</ul>


</nav><!-- #nav -->

nav {
position:absolute;
top:190px;
left:0;
width:200px;
min-width:200px;
height:900px;
background:transparent;
z-index:9999;
}

#nav-bg {
position:absolute;
top:200px;
left:0;
width:200px;
height:80%;
background:<?php echo $contactscheme ?>;
}

nav:before {
content:'';
position:absolute;
top:-10px;
right:0;
width:0;
border-top:10px solid transparent; /* height of right point */
border-right:200px solid #570C2A;
z-index:2;
}

nav:after {
content:'';
position:absolute;
top:0;
left:135px;
width:50px;
height:500px;
background:transparent;
-webkit-transform:rotate(2deg);
-moz-transform:rotate(2deg);
-ms-transform:rotate(2deg);
transform:rotate(2deg);
-webkit-box-shadow:<?php echo $boxshadownav ?>;
-moz-box-shadow:<?php echo $boxshadownav ?>;
box-shadow:<?php echo $boxshadownav ?>;
z-index:-1;
}

.menu-main,
.menu-main ul {
max-height:900px;
margin:0;
padding:0;
list-style:none;
text-align:center;
font-size:1.2em;
background:#570C2A;
}

.menu-main li {
line-height:70px;
margin:0;
padding:0;
}

.menu-main a {
display:block;
color:beige;
text-decoration:none;
}

.menu-main a:hover, a:focus {
color:darkslategray;
text-decoration:none;
text-shadow:none;
outline:0 none;
-webkit-transition:250ms linear 0s;
-moz-transition:250ms linear 0s;
-o-transition:250ms linear 0s;
transition:250ms linear 0s;
}

.menu-main a:hover, a:focus {
color:beige;
text-shadow:1px -1px 14px beige;
}

.menu-main ul {
height:auto;
display:none;
}

.menu-main ul li {
font-size:0.6em;
line-height:30px;
}

.menu-main ul a {
background:transparent;
}

li.item-111.parent {
background:#486060;
line-height:22px;
padding:12px 3%;
}

/* -- sub menu styles for History and Restoration  -- */
.item-125, .item-126, .item-127, .item-128, .item-129 {
    background:#486060;
}

.item-125 {
    border-top:2px dotted <?php echo $listborders ?>;
}

.item-129 {
    border-bottom:2px dotted <?php echo $listborders ?>;
}

/* -- ===end=== -- */

.item-112 {
background:#557171;
}

.item-113 {
background:#663366;
}

.item-114 {
background:#86ACA8;
}

.item-115 {
background:#CD7F72;
}

.item-116 {
background:#BD8A16;
}

li.item-117.parent {
background:#C59F92;
line-height:50px;
padding:12px 3%;
}

/* -- sub menu styles for How Can I Help -- */
.item-130, .item-131 {
    background:#C59F92;
}

.item-130 {
    border-top:2px dotted <?php echo $listborders ?>;
}

.item-131 {
    border-bottom:2px dotted <?php echo $listborders ?>;
}

/* -- ===end=== -- */

.item-118 {
background:#869175;
}

.item-119 {
background:<?php echo $contactscheme ?>;
}

解决方案

在悬停函数中，为什么不添加具有属性display:block的新类.在进行此设置之前，请为任何已经具有所选类的打开子菜单调用关闭函数.

可能看起来像这样:

$(function () {
     $("ul.menu-main > li").hover(function () {
        //Don't do this again if the same menu is hovered
        if (!$(this).hasClass('selected')) {
            //Ensure any open sub-menu is closed.
            $("li.selected").children("ul").stop(true, true).slideUp(300);
            $(".contact-details-container p").stop(true, true).fadeIn(2000);
            $("li.selected").removeClass('selected');

            //Open sub-menu
            $(this).addClass('selected');
            $(this).children("ul").slideDown(300);
            $(".contact-details-container p").fadeOut(200);
        }
    });
});

由于(我认为)菜单的工作方式，实际上您实际上不需要display:block属性，但是您仍将需要类来标识打开的子菜单，以便可以应用效果. /p>

I have a vertical carousel menu that on two of the items opens to reveal sub menus. When you hover off the menu they close again and return to the normal menu state.

What I am looking for is a way for it to hover and remain open, then when another of any of the menus are hovered, they close and the hovered activates...

As I am using Joomla! as well it may be tricky to show the site etc but here is the JavaScript, and hopefully if more info is needed I can post it. Thanks!

<script type="text/javascript">
$(function(){
  $("ul li.parent").hover(function(){
     $(this).children("ul").slideDown(300);
     $(".contact-details-container p").fadeOut(200);
  },function(){
     $(this).children("ul").stop(true, true).slideUp(300); 
     $(".contact-details-container p").stop(true, true).fadeIn(2000);
  });
});
</script>

HTML

<nav>

<ul class="menu-main">
<li class="item-108"><a href="#">Home</a></li>
<li class="item-111 deeper parent"><a href="#">History and Restoration</a>
<ul>
<li class="item-125"><a href="#">History</a></li>
<li class="item-126"><a href="#">The Kennaway Connection</a></li>
<li class="item-127"><a href="#">Previous Residents</a></li>
<li class="item-128"><a href="#">Restoration</a></li>
<li class="item-129"><a href="#">Sidmouth / Heritage Coast</a></li>
</ul>
</li>
<li class="item-112"><a href="#">Wedding Venue</a></li>
<li class="item-113"><a href="#">Hiring Rooms</a>       </li>
<li class="item-114 current active"><a href="#">Virtual Tour</a></li>
<li class="item-115"><a href="#">Art and Exhibitions</a></li>
<li class="item-116"><a href="#">Learning</a></li>
<li class="item-117 deeper parent"><a href="#">How Can I help</a>
<ul>
<li class="item-130"><a href="#">Friends of Kennaway House</a></li>
<li class="item-131"><a href="#">Volunteer Opportunities</a></li></ul></li>
<li class="item-118"><a href="#">Gallery</a></li>
<li class="item-119"><a href="#">Contact</a></li>
</ul>


</nav><!-- #nav -->

nav {
position:absolute;
top:190px;
left:0;
width:200px;
min-width:200px;
height:900px;
background:transparent;
z-index:9999;
}

#nav-bg {
position:absolute;
top:200px;
left:0;
width:200px;
height:80%;
background:<?php echo $contactscheme ?>;
}

nav:before {
content:'';
position:absolute;
top:-10px;
right:0;
width:0;
border-top:10px solid transparent; /* height of right point */
border-right:200px solid #570C2A;
z-index:2;
}

nav:after {
content:'';
position:absolute;
top:0;
left:135px;
width:50px;
height:500px;
background:transparent;
-webkit-transform:rotate(2deg);
-moz-transform:rotate(2deg);
-ms-transform:rotate(2deg);
transform:rotate(2deg);
-webkit-box-shadow:<?php echo $boxshadownav ?>;
-moz-box-shadow:<?php echo $boxshadownav ?>;
box-shadow:<?php echo $boxshadownav ?>;
z-index:-1;
}

.menu-main,
.menu-main ul {
max-height:900px;
margin:0;
padding:0;
list-style:none;
text-align:center;
font-size:1.2em;
background:#570C2A;
}

.menu-main li {
line-height:70px;
margin:0;
padding:0;
}

.menu-main a {
display:block;
color:beige;
text-decoration:none;
}

.menu-main a:hover, a:focus {
color:darkslategray;
text-decoration:none;
text-shadow:none;
outline:0 none;
-webkit-transition:250ms linear 0s;
-moz-transition:250ms linear 0s;
-o-transition:250ms linear 0s;
transition:250ms linear 0s;
}

.menu-main a:hover, a:focus {
color:beige;
text-shadow:1px -1px 14px beige;
}

.menu-main ul {
height:auto;
display:none;
}

.menu-main ul li {
font-size:0.6em;
line-height:30px;
}

.menu-main ul a {
background:transparent;
}

li.item-111.parent {
background:#486060;
line-height:22px;
padding:12px 3%;
}

/* -- sub menu styles for History and Restoration  -- */
.item-125, .item-126, .item-127, .item-128, .item-129 {
    background:#486060;
}

.item-125 {
    border-top:2px dotted <?php echo $listborders ?>;
}

.item-129 {
    border-bottom:2px dotted <?php echo $listborders ?>;
}

/* -- ===end=== -- */

.item-112 {
background:#557171;
}

.item-113 {
background:#663366;
}

.item-114 {
background:#86ACA8;
}

.item-115 {
background:#CD7F72;
}

.item-116 {
background:#BD8A16;
}

li.item-117.parent {
background:#C59F92;
line-height:50px;
padding:12px 3%;
}

/* -- sub menu styles for How Can I Help -- */
.item-130, .item-131 {
    background:#C59F92;
}

.item-130 {
    border-top:2px dotted <?php echo $listborders ?>;
}

.item-131 {
    border-bottom:2px dotted <?php echo $listborders ?>;
}

/* -- ===end=== -- */

.item-118 {
background:#869175;
}

.item-119 {
background:<?php echo $contactscheme ?>;
}

解决方案

In your hover function, why don't you add a new class that has the attribute display:block. Prior to setting this, call the close function for any open sub-menu that already has the selected class.

It may look something like this:

$(function () {
     $("ul.menu-main > li").hover(function () {
        //Don't do this again if the same menu is hovered
        if (!$(this).hasClass('selected')) {
            //Ensure any open sub-menu is closed.
            $("li.selected").children("ul").stop(true, true).slideUp(300);
            $(".contact-details-container p").stop(true, true).fadeIn(2000);
            $("li.selected").removeClass('selected');

            //Open sub-menu
            $(this).addClass('selected');
            $(this).children("ul").slideDown(300);
            $(".contact-details-container p").fadeOut(200);
        }
    });
});

Edit: Due to the way (I think) your menu is working, you shouldn't actually need the display:block attribute, but you will still need the class to identify the open submenus so you can apply your effects.

这篇关于垂直菜单在悬停时保持打开，然后在悬停时关闭的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！