垂直导航，使用JQuery单击时显示隐藏的子菜单 [英] vertical navigation that shows hidden submenu on click using JQuery

问题描述

我正在尝试制作一个与该Flash网站上的菜单类似的菜单:

I am trying to make a menu that works like the one on this flash site:

http://elevensix.de/

当我单击作品集"时，只有到子导航的链接才会显示出来.现在，我只能设法完成一个典型的垂直悬停菜单上的显示子导航".

When I click "portfolio", only then to the subnavigation links reveal themselves. Right now I have only managed to get a typical vertical "reveal subnavigation on hover menu" working.

所需要的是，一旦选中了适当的菜单项，便会显示其子菜单.当子菜单项悬停然后选择时，该子菜单仍然显示.选择子菜单项时，将显示内容，并且菜单和子菜单均保持可见(为选定的菜单和子菜单项提供不同的颜色以显示导航路径).哇.

What is required is that once the appropriate menu item it cicked, its submenu shows. This submenu remains revealed as the submenu items are hovered over then selected. When the submenu item is selected, the content shows, and both the menu and submenu remain visible (the selected menu and submenu item are given a distinct colour to show the navigation path). Whew.

这是我的html:

<div id="nav">
<ul>
    <li><a href="#">about</a></li>
    <li><a href="#">testimonials</a>
        <ul>
          <li><a href="#">testimonial1</a></li>
          <li><a href="#">testimonial2</a></li>
          <li><a href="#">testimonial3</a></li>
          <li><a href="#">testimonial4</a></li>
        </ul>
    </li> 
     <li><a href="#">Services</a>
        <ul>
           <li><a href="#">services1</a></li>
           <li><a href="#">services2</a></li>
           <li><a href="#">services3</a></li>
           <li><a href="#">services4</a></li>
       </ul>
    </li> 
    <li><a href="#">Gallery</a></li>
    <li><a href="#">Contact</a></li>
  </ul>

</div><!--end #nav-->

这是我的CSS:

  #nav {
  width:160px;
  position: relative;
  top: 250px;
  left: 20px;
  }

 #nav ul {
 margin:0px; 
 padding:0px; 
 }

#nav ul li {
line-height:24px; 
list-style:none; 
}

#nav a {
text-decoration: none;
color: #9d9fa2;
}

#nav ul li a:hover {
position:relative;
color: #00aeef;
}

#nav ul ul {
display:none; 
position:absolute; 
left:160px; 
top:4px; 
}

#nav ul li:hover ul {
display:block;
color: #00aeef;
}

#nav ul ul li { 
width:160px; 
float:left; 
display:inline; 
line-height:16px; 
}

.selected {
color: #00aeef !important;
}

我应该给子菜单一个类，以便我可以隐藏然后显示它们吗?以及该类将在哪里应用?对ul?我可以为两个子菜单使用相同的类吗?为此，我在应用display:none值时是否错了?

Should I be giving the submenus a class so that I can hide then show them? And where would the class be applied? To the ul? could I use the same class for both submenus? Am I wrong in how I am applying the display:none values for this purpose?

非常感谢这里所有聪明的人.

Many thanks to all the clever people on here.

推荐答案

是否要通过使用JQuery单击主菜单项来显示/隐藏子菜单?如果是这样，则应包括jquery.js文件并编写脚本，例如:

Do you want to show/hide submenu by click on item of main menu using JQuery? If it's so, you should include jquery.js file and write script, such as:

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
        var $j = jQuery.noConflict();
        $j(document).ready(function() {
        });
        function Reveal(a){
            var ul = a.parentNode.getElementsByTagName("UL").item(0);
            $j(ul).animate({height: 'toggle' ,opacity: 'toggle'}, "slow");
        }
</script>

然后您应该在菜单的单击链接上调用函数Reveal:

Then you should call function Reveal on click link of menu:

<li><a href="#" onclick="Reveal(this);">testimonials</a>

对于悬停的li，您应该从css中排除取消隐藏的规则:

You should exclude rule of unhidding from css for hovered li:

#nav ul li:hover ul {
/*display:block;*/
color: #00aeef;
}

我建议对链接使用概述规则:

And I recommend to use rule of outlining for links:

#nav ul a{outline:none;}

现在，通过单击主菜单项，子菜单将缓慢出现并消失. JQuery中有许多用于动画处理的功能.您可以在此处

Now submenu will slowly appear and disappear by click on item of main menu. There are many functions for animating in JQuery. You can learn their here

这篇关于垂直导航，使用JQuery单击时显示隐藏的子菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！