【发布时间】:2012-09-11 22:08:22
【问题描述】:
我不确定实现侧边导航菜单的最佳选择,它最多有 4 个嵌套的 UL。我遇到的最大问题是一些需要扩展以显示子元素的标题也链接到各个页面。
我认为最好的方法是默认不链接到那个单独的页面,而是在它旁边有一个链接到那个页面的图标。我在这里遇到的问题是手风琴在导航和选择活动项目时似乎不喜欢这样。
我对 jQuery Tree 导航菜单做了一些研究,但我不确定:
1) 它们的可定制性如何,
2)我可以让标题显示孩子并以某种方式转到单个页面。
请问这里对我来说最好的选择是什么?哦,解决方案只需要基于 HTML / CSS / jQuery,谢谢。
HTML(删减,总共大约有 100 个链接):
<ul class="menu">
<li class="menu_level_1"><a href="/" >Home</a></li>
<li class="menu_level_1"><a href="/link2" >Link 2</a></li>
<li class="menu_level_1">
<a href="#" >Link 3</a>
<ul class="sub_menu_2">
<li class="menu_level_2"><a href="/link4" >Link 4</a></li>
<li class="menu_level_2"><a href="/link5" >Link 5</a></li>
<li class="menu_level_2">
<a href="#" >Link 6</a>
<a href="/link6" >Go to Link 6</a>
<ul class="sub_menu_3">
<li class="menu_level_3"><a href="/link7" >Link 7</a></li>
</ul>
</li>
</ul>
</li>
</ul>
【问题讨论】:
-
你试过 jsTree 的 contextmenu (jstree.com/documentation/contextmenu) 插件了吗?它允许带有子菜单的上下文菜单,可以绑定clic事件对应的动作,而且我想你也可以把图片绑定到图片的“onclic”事件。
-
感谢 Ric,我仔细查看了上下文菜单。我对它的理解是,它允许您绑定事件以打开“右键单击”菜单。当我将它用作导航树时,右键单击并不常见,我认为对于这项任务,该菜单不是正确的答案。如果我理解错了,请纠正我,谢谢,
-
我不明白你的问题。你能提供jsfiddle示例吗?
-
当然,忘了 jsfiddle。 jsfiddle.net/bNbBK - 还没有任何 js。我只希望第一级 LI 显示 onload(以及当前页面的路径)。在 jsfiddle 上,“链接 6”在 LI 中有两个链接。 1 用于扩展嵌套的 UL,另一个用于跟踪该单个页面的 URL(这是我在使用插件时遇到的主要问题)。我不确定实现这一点的最佳方法,尽管我想现在我会尝试从头开始编写。
标签: jquery navigation nested accordion jstree