如何创建自定义下拉菜单类似于Chrome书签栏？

Question

我想创建一个下拉菜单，其中可以包含主div中的一些书签。如果用户添加了更多书签，并且书签不能包含在主div中，则它们将隐藏在下拉菜单中。然后，用户可以将鼠标悬停在箭头上，隐藏的菜单会显示其余的书签。

我需要检查下一个书签是否可以添加到主div并基于此（如果主div空间不足）将下一个书签附加到下拉菜单。

如果网上有任何类似的教程，请告诉我，任何帮助都表示赞赏。

Answer 1

将其创建为单个无序列表。

检查适合的人数：

noOfLi = width of ul / width of li

$(ul.normal).width() to get width of ul and same function for li

检查是否

noOfLi > $('ul.normal li').length //if not no problem yyay

获取所有李的副本进行处理。

var lis = $('ul.normal li').clone(); //now you have an array of li nodes

将其分成两部分，一部分用于常规ul，一部分用于下拉。

normalLis = lis.slice( 0, noOfLi - 1 );
dropdownLi = lis.slice( noOfLi, lis.length );

现在将normalLis放入正常的ul，下拉列表是下拉ul

$('ul.normal').html(normalLis)
$('ul.dropdown').html(dropdownLis)

如果lis溢出，您还可以激活更多链接，并在其上添加悬停事件以显示悬停时的下拉列表。

以上所有代码仅供参考，请勿复制粘贴。