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

Question

我想创建一个下拉菜单，其中可以包含主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，下拉LIS到下拉UL

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

您也可以激活，如果LIS溢出更多的链接，并就添加悬停事件悬停时显示的下拉列表。

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