垂直菜单悬停在下方，处于活动状态？答案

【问题标题】：Vertical menu hover drop below with active state?垂直菜单悬停在下方，处于活动状态？
【发布时间】：2012-07-23 01:29:40
【问题描述】：

我需要像这样创建一个垂直菜单：

项目 1
- 项目 1.1
- 项目 1.2
第 2 项
项目 3
第 4 项

我需要子菜单来展开/折叠下面它是悬停时的父项。我需要它具有页面指示器或使用活动状态的能力，以便菜单显示您当前所在的页面。此外，这将在整个站点中多次自定义，因此我只需将标题/链接保留在 html 中。

我无法找到或创建满足所有这些要求的解决方案。我已经研究了几天，一直空手而归。任何建议和/或解决方案将不胜感激！

【问题讨论】：

在你的 CSS 中创建 active_state 类并使用 javascript 将 class active_state 添加到
。

【解决方案1】：

可能是一个简单的滑动 jQuery 菜单会帮助你。

Here is an example fiddle.

如果对你有帮助，请告诉我。

编辑

对于这个 active-state 问题，我不得不更多地使用代码，最后我得到了你想要的它（我猜是这样）......

这里是NEW FIDDLE。

现在我也在这里使用class selectors，这使得代码更小更易于阅读......:)

干杯..

更新：

可能这就是你想要的：http://jsfiddle.net/Zx2EU/3/

【讨论】：

这正是我所需要的！谢谢！现在我需要找到一种方法来添加 active_state 功能。此外，如果我能够添加此功能，如果“内部”元素处于活动状态，它是否能够在不悬停的情况下保持打开状态？对此的任何帮助或教程将不胜感激！
@MrsSecker 看看更新后的代码，如果有什么困扰你，请告诉我。我没有写太多作为答案，因为代码已经非常自我解释了。。
@Mrs Secker 如果这正是您所需要的，那就是正确答案，您应该选择它作为正确答案。
@Asif - 我很难实现你的代码。我和我的客户谈过，他们想删除动画（一开始）所以我想出了这个小提琴：jsfiddle.net/Zx2EU 但是，现在他们希望添加回来的动画带有橙色箭头，以便在有子菜单时显示。关于如何使用我当前的代码来解决这个问题的任何建议？我是 CSS 新手，所以我花了一段时间才让一切看起来和功能都符合我的要求。
我尝试将我的代码编辑到您的代码中 - 使用 ID 和类更合适。悬停动画不起作用。在这一点上，我会满足于它在点击时展开/折叠。同样，不确定如何将此功能添加到我当前的代码中。这是我尝试添加您的代码：jsfiddle.net/Zx2EU/2

【解决方案2】：

可能类似于 jQuery EasyUI“异步树”，然后只需添加一些 Javascript/PHP/whatever 来确定它是否是当前页面，然后在每个页面之前打印类似 的内容（和最后）。

http://www.jeasyui.com/demo/index.php

例如：

<?php

$currentFile = $_SERVER["SCRIPT_NAME"];
$parts = Explode('/', $currentFile);
$currentFile = $parts[count($parts) - 1];

?>
...
<li<?php 
    if ($currentFile == "index.php") {
        echo " class=\"selected\"";
    } else {

    } 
    ?>>
    <a href="index.php">Homepage</a>
</li>

在样式表中：

.selected { font-weight: bold; }

Dynamic Drive 可能会更轻一些：http://www.dynamicdrive.com/dynamicindex1/navigate1.htm

另外查找 Apycom，他们可能有一个，但它们不是免费的。

【讨论】：