1

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

http://elevensix.de/

当我点击“投资组合”时，只有到子导航链接才会显示出来。现在我只设法让一个典型的垂直“悬停菜单上的显示子导航”工作。

需要的是，一旦它点击了适当的菜单项，它的子菜单就会显示出来。当子菜单项悬停在然后被选中时，该子菜单仍然显示。当子菜单项被选中时，内容显示，菜单和子菜单都保持可见（选定的菜单和子菜单项被赋予不同的颜色以显示导航路径）。唷。

这是我的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 值的方式有误吗？

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

4

1 回答 1

1

您想通过使用 JQuery 单击主菜单项来显示/隐藏子菜单吗？如果是这样，您应该包含 jquery.js 文件并编写脚本，例如：

<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：

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

您应该排除悬停的 li 从 css 中取消隐藏的规则：

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

我建议对链接使用大纲规则：

#nav ul a{outline:none;}

现在子菜单将通过单击主菜单项慢慢出现和消失。JQuery 中有许多动画函数。你可以在这里学习他们

于 2010-06-02T19:57:26.577 回答