A simple example of a jQuery infinite menu
- 2020-03-30 02:04:41
- OfStack
I've separated out the CSS completely and added styles with jQuery for multiple levels of coloring, and it's easy to generate a directory tree and control styles without thinking about styles. It is recommended that the data table be sorted by Order in advance, rather than by rank when the data is read, so that the performance will be better.
I made it a.Net control, as a lightweight infinite directory tree, is quite useful. It's just not perfect yet. I'll revise it slowly and release it when it's almost there.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>jQuery Infinite menu </title>
<style type="text/css">
#menu a {
color:#fff;
}
#menu div {
}
#menu div a {
padding-left:20px;
}
#menu div.root {
display:block;
}
.list { background:url(list.gif) no-repeat 6px 6px; }
</style>
<script type="text/javascript" language="javascript" src="jquery-1.2.3.min.js"></script>
<script type="text/javascript" language="javascript">
$(function(){
//Color list, if you want to support the infinite level, it is best to automatically generate a color list, but my color matching a poor, with the generated is even worse...
_cor = ['#003366', '#0066CC', '#3399FF', '#990000', '#CC0000', '#FF3300', '#FF9900', '#FFCC66', '#FFFFFF'];
//Initialize the class
(function Init(i,obj){
i++;
//Find child node
_obj = obj.children('div');
//If there are child nodes, add a proprietary style
if (_obj.length > 0)
obj.addClass('list');
$.each(_obj, function(j,o){
//If the subdirectory is hidden
if (i > 0)
$(o).hide();
//According to the directory level to find the color dictionary on the background color, can be changed to a picture or something.
$(o).css('background-color',_cor[i]);
//Find subdirectories
Init(i,$(o));
});
})(-1,$('#menu'));
});
//Skip links
function GotoURL(obj) {
// If the last bit of the link is not a symbol." # " Skip links Because take href Get the absolute path of the link, so you can only take the last bit, in fact, you can pass the value to judge or generate the directory tree does not produce onclick All right
if (obj.href.substring(obj.href.length - 1, obj.href.length) != "#") return true;
//Special effects for pull-out and indentation
$.each($(obj).parent().children('div'), function(i,o){
$(o).slideToggle('slow');
});
return false;
}
</script>
</head>
<body>
<div id="menu">
<div> <a href="#" onclick="return GotoURL(this)"> The first level </a> </div>
<div> <a href="#" onclick="return GotoURL(this)"> The first level </a>
<div> <a href="#" onclick="return GotoURL(this)"> The second level </a> </div>
<div> <a href="#" onclick="return GotoURL(this)"> The second level </a>
<div> <a href="#" onclick="return GotoURL(this)"> In the third grade </a>
<div> <a href="#" onclick="return GotoURL(this)"> The fourth </a> </div>
<div> <a href="#" onclick="return GotoURL(this)"> The fourth </a> </div>
</div>
<div> <a href="#" onclick="return GotoURL(this)"> In the third grade </a>
<div> <a href="#" onclick="return GotoURL(this)"> The fourth </a> </div>
<div> <a href="#" onclick="return GotoURL(this)"> The fourth </a>
<div> <a href="#" onclick="return GotoURL(this)"> The first five </a> </div>
<div> <a href="#" onclick="return GotoURL(this)"> The first five </a> </div>
<div> <a href="#" onclick="return GotoURL(this)"> The first five </a>
<div> <a href="#" onclick="return GotoURL(this)"> The first level 6 </a> </div>
<div> <a href="#" onclick="return GotoURL(this)"> The first level 6 </a> </div>
</div>
</div>
</div>
</div>
<div> <a href="#" onclick="return GotoURL(this)"> The second level </a> </div>
</div>
<div> <a href="#" onclick="return GotoURL(this)"> The first level </a>
<div> <a href="#" onclick="return GotoURL(this)"> The second level </a> </div>
<div> <a href="#" onclick="return GotoURL(this)"> The second level </a> </div>
<div> <a href="#" onclick="return GotoURL(this)"> The second level </a>
<div> <a href="#" onclick="return GotoURL(this)"> In the third grade </a>
<div> <a href="#" onclick="return GotoURL(this)"> The fourth </a> </div>
<div> <a href="#" onclick="return GotoURL(this)"> The fourth </a> </div>
</div>
<div> <a href="#" onclick="return GotoURL(this)"> In the third grade </a>
<div> <a href="#" onclick="return GotoURL(this)"> The fourth </a> </div>
<div> <a href="#" onclick="return GotoURL(this)"> The fourth </a>
<div> <a href="#" onclick="return GotoURL(this)"> The first five </a> </div>
<div> <a href="#" onclick="return GotoURL(this)"> The first five </a> </div>
<div> <a href="#" onclick="return GotoURL(this)"> The first five </a>
<div> <a href="#" onclick="return GotoURL(this)"> The first level 6 </a> </div>
<div> <a href="#" onclick="return GotoURL(this)"> The first level 6 </a> </div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>