Dynamic/Infinate UL/LI Hover扩展....？

我已经创建了一个PHP脚本，使一个可爱的列表....Dynamic/Infinate UL/LI Hover扩展....？

使用数据库，它会创建大量的项目和子项目。就像它来自数据库一样，它们可以是不确定的深层列表和子列表。

我如何使用CSS（或直接将代码放在UL/LI中）以允许INFINITE子项显示为当父母被逗留时？

例子：

<ul> 
    <li>Welcome! - LevelNo:0 ID:1 Parent:0 Order:0</a> 
    <ul> 
     <li>Test - LevelNo:0 ID:13 Parent:1 Order:-3</a></li> 
     <li>Cars - LevelNo:1 ID:2 Parent:1 Order:0</a> 
     <ul> 
      <li>Bugatti - LevelNo:2 ID:5 Parent:2 Order:0</a></li> 
      <li>BMW - LevelNo:2 ID:6 Parent:2 Order:1</a> 
      <ul> 
       <li>1 Series - LevelNo:3 ID:8 Parent:6 Order:0</a> 
       <ul> 
        <li>1 Series D- LevelNo:0 ID:14 Parent:8 Order:0</a></li> 
       </ul> 
       </li> 
       <li>3 Series - LevelNo:3 ID:9 Parent:6 Order:1</a></li> 
       <li>5 series - LevelNo:3 ID:10 Parent:6 Order:2</a> 
      <ul> 
       <li>525 - LevelNo:4 ID:11 Parent:10 Order:0</a></li> 
       <li>M5 - LevelNo:4 ID:12 Parent:10 Order:1</a></li> 
      </ul> 
      </li> 
     </ul> 
     </li> 
     <li>Noble - LevelNo:2 ID:7 Parent:2 Order:2</a></li> 
    </ul> 
    </li> 
    <li>Vans - LevelNo:1 ID:3 Parent:1 Order:1</a></li> 
    <li>Trucks - LevelNo:1 ID:4 Parent:1 Order:2</a></li> 
</ul> 
<br>

我已经找到了很多的例子来说明如何与一个孩子（两个深）或儿童与儿童（深三），但没有什么是动态显示它做如果这是增加的子项目的数量，则为15深度。

任何人有任何想法呢？

我可以改变生成列表的代码，使用CSS ...任何人都可以指向正确的方向吗？

来源

2010-11-16 Slimjim

我不完全确定，但我怀疑任何允许无限深度菜单**的系统可能不是最好的用户界面... – 2010-11-16 16:09:32

也检查这个.. 它显示如何make dynamic ul li http://www.movedl.com/web-development-client-side-server-side-9/dynamic-ul-li-list-aspx-asp-.net-40/ – 2011-08-08 21:14:59

我建议你尝试这样：

ul { display:none; } 
*:hover > * { display: block; } 
* *:hover { display: block; } 
*:hover { display: block; }

当你将鼠标悬停在UL将显示所有子UL（2章），将显示所有父元素（第三规则）和元素本身显示（第4条规则）。

这只是一个草图，我没有在任何浏览器中尝试过，我预计会有很多不兼容的情况。

来源

2010-11-16 16:07:53 ordnungswidrig

首先，让我说一个无限大的列表是一个很棒的UI - 哦。它越深入，用户友好度越低。这就是说，我有这些列表之一，我一直在护理，直到应用程序可以重新设计。正如你所做的那样，我的前同事选择输出有效的HTML嵌套UL。对于演示，我们找不到任何可以击败jQuery Superfish。

它有多深？无穷。我在我的应用程序中看到它在7。再次，如果给出选择，我不会这样做......但你可以。

为什么jQuery技术上它 - 可以 - 用纯CSS完成？初学者的渐进式增强。低开销与优雅的后备。演示文稿允许转换，动态调整大型元素等。如果您有时间构建，部署和运行数百个单元测试，那么您将执行这些代码。

全部用简单的$('#id').superfish()调用。

来源

2011-08-08 21:24:59 bpeterson76

Dynamic/Infinate UL/LI Hover扩展....？

回答

相关问题