静态 HTML 菜单

发布于 2024-11-07 18:52:10 字数 226 浏览 2 评论 0原文

我需要一个静态菜单，而不是通常的下拉菜单，用户可以在其中切换隐藏/可见状态，并且 UI 应该记住该状态。

菜单位于左侧，应如下所示：

  Link
> Menu
v Open Menu
    Sub Menu

这意味着在浏览器历史记录中来回操作应将菜单状态恢复为离开页面时的状态。菜单中的更改不应记录在浏览器历史记录中，只有点击实际链接才应记录。

原文

Instead of the usual drop down menus, I need a static menu where users can toggle the hidden/visible state and the UI should remember the state.

The menu is on the left and should look like this:

  Link
> Menu
v Open Menu
    Sub Menu

That means going back and forth in the browser history should restore the menu state as it was when the page was left. Changes in the menu should not register in the browser history, only clicks on actual links should.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

吖咩 2024-11-14 18:52:10

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

为了在客户端实现类似树视图的 Web 控件，您需要 JavaScript，因为原始 (X)HTML 和 CSS 与此无关。

如果您有机会使用 JavaScript 库，您会想知道 jQuery 有许多插件可以完成此类任务。在 Google 中查找它们，您会发现如下内容：

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

关于状态管理的另一个主题，我相信您需要泰勒自己的解决方案，并且似乎您有两个选择：

客户端：使用cookie，您可以存储一些代表树视图层次结构的JSON，并用布尔值标记每个级别和项目，以便您可以迭代此树并在页面刷新和回发之间恢复状态。
服务器端：我几乎没有机会提出具体的解决方案，因为我不知道您当前在项目中使用哪种服务器技术，但您需要在服务器逻辑中模仿客户端解决方案，通过将此类层次结构存储在某些会话或视图状态管理中，并从服务器发送此类客户端解决方案的 JSON，并执行某些客户端状态 JavaScript 恢复功能。

回复收藏 0 原文

流年已逝 2024-11-14 18:52:10

如果您希望使用 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">></div> Menu 1</a><br/>
<div id="menu1_branch" style="display:none">
   + Sub Menu 1<br/>
   + Sub Menu 2<br/>
   + Sub Menu 3<br/>
</div>
<A href="javaScript:treeMenu('menu2')"><div id="menu2_icon">></div> Menu 2</a><br/>
<div id="menu2_branch" style="display:none">
   + Sub Menu 1<br/>
   + Sub Menu 2<br/>
   + Sub Menu 3<br/>
</div>
<A href="javaScript:treeMenu('menu3')"><div id="menu3_icon">></div> Menu 3</a><br/>
<div id="menu3_branch" style="display:none">
   + Sub Menu 1<br/>
   + Sub Menu 2<br/>
   + Sub Menu 3<br/>
</div>
</body>
</html>

If you wish very simply tree menu with JavaScript, try this code.

<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">></div> Menu 1</a><br/>
<div id="menu1_branch" style="display:none">
   + Sub Menu 1<br/>
   + Sub Menu 2<br/>
   + Sub Menu 3<br/>
</div>
<A href="javaScript:treeMenu('menu2')"><div id="menu2_icon">></div> Menu 2</a><br/>
<div id="menu2_branch" style="display:none">
   + Sub Menu 1<br/>
   + Sub Menu 2<br/>
   + Sub Menu 3<br/>
</div>
<A href="javaScript:treeMenu('menu3')"><div id="menu3_icon">></div> Menu 3</a><br/>
<div id="menu3_branch" style="display:none">
   + Sub Menu 1<br/>
   + Sub Menu 2<br/>
   + Sub Menu 3<br/>
</div>
</body>
</html>

回复收藏 0 原文

~没有更多了~