user-interface - 如何相对于其父级定位子菜单？

Question

我正在设计一个多列嵌套菜单控件。我试图找出飞出子菜单的位置。子菜单当前在悬停在“>”上时飞出，而不是项目的文本。

假设这是菜单。

-------------------
|item 1 >|item 2 >|
|item 3 >|item 3 >|
-------------------

选项1：

-------------------
|item 1 >|item 2 >|
|item -------------------
------|item 1.1|item 1.2|
      |item 1.3|item 1.4|
      -------------------

选项 2：

-------------------
|item 1 >|item 2 >|
-------------------
|item 1.1|item 1.2|
|item 1.3|item 1.4|
-------------------

选项 3：

-------------------
|item 1 >|-------------------
|item 3 >||item 1.1|item 1.2|
----------|item 1.3|item 1.4|
          -------------------

选项 4：

-----------------------------
|item 1 >||item 1.1|item 1.2|
|item 3 >||item 1.3|item 1.4|
-----------------------------

你觉得哪一个更人性化？

Answer 1

我建议没有一个选项是可行的。您需要将框放置在您悬停的项目下方 1.5 行处，这样如果您按下鼠标，您就不会卡在打开的框上。实际上同样适用于水平例如：

-------------------
|item 1 >|item 2 >|
|item    |        |
--------------+------------------
              |item 1.1|item 1.2|
              |item 1.3|item 1.4|
              -------------------

我不能在 ascii 中显示半行，但你应该有希望得到这个想法