189 8069 5689

jQuery制作菜单-创新互联

在网站的世界里，菜单是不可或缺的元素。菜单的作用主要是告诉用户网站的基本功能，引导用户完成一系列的功能操作。一个简洁明快的菜单，可以让用户很快接受并最终认可；相反，复杂无序的菜单只会让用户陷入迷茫，甚至因此被用户抛弃。

目前创新互联已为成百上千的企业提供了网站建设、域名、网页空间、网站托管、服务器租用、企业网站设计、陆河网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。

  做网页设计，包括菜单的设计，都会用到一些基本的网页制作工具。以菜单为例，本文以下面两种形式实现菜单：

    1.div + css + javascript

    2.div + css + jQuery

  这两种形式的主要区别是在实现菜单栏目点击响应时，分别采用了javascript和jQuery。

  为突出重点，这里只列举核心代码。首先是菜单的html代码，如下：




	
    
		
			账户管理
			
      
				
    • 密码修改
      • 
				
    • 信息修改
      • 
			
    
		
		
			文章管理
			
      
				
    • 博文管理
      • 
				
    • 随笔管理
      • 
			
    
		
		兴趣设置

  用javascript实现菜单点击的代码如下：


function init()
{
	var obj = document.getElementById("menu");
	var nodes = obj.children[0].children;
	for(var i = 0; i < nodes.length; ++i){
		var node = nodes[i].children[0];
		if(node.tagName === "A"){
			if(nodes[i].children.length > 1){
				var tag = nodes[i].children[1];
				node.onclick = function(tag)
				{
					return function(){
						if(tag.style.display === "block")
							refresh();
						else {
							refresh();
							tag.style.display = "block";
						}
					}
				}(tag);
			}
		}
	}
}

function refresh()
{
	var obj = document.getElementById("menu");
	var nodes = obj.children[0].children;
	
	var i;
	for(i = 0; i < nodes.length; ++i) {
		var temp =  nodes[i].children[1];
		if(temp && temp.tagName === "UL")
			temp.style.display = "none";
		}
}

  用jQuery实现点击一级菜单时二级菜单的收缩


function init()
{
	$(".level1 > a").click(function(){
		$(this).next().show().parent().siblings().children("a").next().hide();
	});
}

  以上两种手段比较，不难发现，相比javascript复杂的逻辑实现，使用jQuery实现菜单的点击更为简洁有效。

附1：菜单点击效果图：

jQuery制作菜单

附2：菜单css样式代码：

{
	text-decoration:none;
}

ul, li
{
	list-style-type:none;
	margin:0px;
	padding:0px;
}

.menu
{
	width:150px;
}

.menu ul
{
	border-width:0px 1px 1px;
	border-style:solid;
	border-color:#C4D5DF;
}

.menu ul li a
{
	display:block;
	height:28px;
	line-height:28px;
	background:#EBF3F8;
	font-size:12px;
	color:#5893B7;
	text-indent:14px;
	border-top:1px solid #C4D5DF;
}

.menu ul li a:hover
{
	color:#bd0a01;
	text-decoration:underline;
}

.menu ul li ul
{
	display:none;
	border:0px solid;
}

.menu ul li ul li a
{
	background:#FFFFFF;	
	text-indent:28px;
}

.menu ul li ul li a:hover
{
	color:green;
}

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。


新闻标题：jQuery制作菜单-创新互联
文章源于：http://cdxtjz.cn/article/csdshc.html

其他资讯