静态HTML菜单

除了通常的下拉菜单，我需要一个静态菜单，用户可以切换隐藏/可见状态，UI应该记住状态。静态HTML菜单

菜单是在左边，应该是这样的：

Link 
> Menu 
v Open Menu 
    Sub Menu

这意味着要在浏览器历史记录来回应该恢复菜单状态，因为它是被留下的页面时。菜单中的更改不应在浏览器历史记录中注册，只应点击实际链接。

来源

2011-05-16 Aaron Digulla

而你想在JavaScript中使用它？任何图书馆可用？ – alex 2011-05-16 07:54:21

它绝对正面*有*是静态的吗？我认为做你所描述的唯一方法是将菜单信息保存在cookie中，并使用javascript来使用这些信息重新创建它。 – Neil 2011-05-16 07:56:48

没有JavaScript没有办法做到这一点。 – Babiker 2011-05-16 07:57:06

我相信你可以称之为“树视图”。

为了在客户端实现树状视图的Web控件，您需要JavaScript，因为raw（X）HTML和CSS与此无关。

如果你有机会使用JavaScript库，你想知道jQuery有很多插件来完成这样的任务。寻找他们在谷歌，你会发现一些这样的：

http://bassistance.de/jquery-plugins/jquery-plugin-treeview/

约状态管理的其他话题，我相信你需要泰勒自己的解决方案，它似乎你“马上有两个选择：

客户端：使用Cookie，可以存储一些JSON代表树视图的层次结构和标记每个级别和项目与布尔值，这样你就可以迭代此树并在页面刷新和回发期间恢复状态。
服务器端：几乎我有建议的具体解决方案的机会，因为我不知道您目前使用中的项目，该项目的服务器技术，但你需要模拟客户端通过在某些会话或视图状态管理中存储这样的层次结构并发送客户端解决方案的这种JSON，但是从服务器发送并执行一些客户端状态JavaScript恢复功能。

来源

2011-05-16 08:09:59

有趣的解决方案。我喜欢。 – 2011-05-16 08:26:00

谢谢，如果你需要一些其他的细节随时评论，我会尽力更新我的答案。 – 2011-05-16 08:30:43

如果您希望使用JavaScript更简单地使用树形菜单，请尝试使用此代码。

<html> 
<head> 
<title>Sample HTML Tree Menu</title> 
<style type="text/css"> 
a { 
    color: black; 
    text-decoration: none; 
} 
div { 
    display: inline-block; 
    _display: inline; 
} 
</style> 
<script language="JavaScript"> 
//<![CDATA[ 
function treeMenu(treeName) { 
    branch = document.getElementById(treeName + "_branch").style; 
    icon = document.getElementById(treeName + "_icon") 
    if(branch.display == 'none') { 
    branch.display = "block"; 
    icon.innerHTML = "v"; 
    } else { 
    branch.display = "none"; 
    icon.innerHTML = ">"; 
    } 
} 
//]]> 
</script> 
</head> 
<body> 
<a href="javaScript:treeMenu('menu1')"><div id="menu1_icon">&gt;</div> Menu 1</a><br/> 
<div id="menu1_branch" style="display:none"> 
&nbsp;&nbsp;&nbsp;+ Sub Menu 1<br/> 
&nbsp;&nbsp;&nbsp;+ Sub Menu 2<br/> 
&nbsp;&nbsp;&nbsp;+ Sub Menu 3<br/> 
</div> 
<A href="javaScript:treeMenu('menu2')"><div id="menu2_icon">&gt;</div> Menu 2</a><br/> 
<div id="menu2_branch" style="display:none"> 
&nbsp;&nbsp;&nbsp;+ Sub Menu 1<br/> 
&nbsp;&nbsp;&nbsp;+ Sub Menu 2<br/> 
&nbsp;&nbsp;&nbsp;+ Sub Menu 3<br/> 
</div> 
<A href="javaScript:treeMenu('menu3')"><div id="menu3_icon">&gt;</div> Menu 3</a><br/> 
<div id="menu3_branch" style="display:none"> 
&nbsp;&nbsp;&nbsp;+ Sub Menu 1<br/> 
&nbsp;&nbsp;&nbsp;+ Sub Menu 2<br/> 
&nbsp;&nbsp;&nbsp;+ Sub Menu 3<br/> 
</div> 
</body> 
</html>

来源

2011-05-16 08:36:39

回答

相关问题