css折叠菜单样式,html折叠菜单

用JS+CSS实现折叠式导航菜单,当点击第一菜单后,自动打开第二次菜单,如下图:

style

成都创新互联公司是一家专业的成都网站建设公司,我们专注成都网站设计、网站建设、网络营销、企业网站建设,买链接1元广告为企业客户提供一站式建站解决方案,能带给客户新的互联网理念。从网站结构的规划UI设计到用户体验提高,创新互联力求做到尽善尽美。

/*样式自己补一下*/

.parent .son{display: none;}

/style

ul class="parent"

li class="pli"

spanphp/span

ul class="son"

liphp1/li

liphp1/li

/ul

/li

li class="pli"

spanphp/span

ul class="son"

liphp1/li

liphp1/li

/ul

/li

li class="pli"

spanphp/span

ul class="son"

liphp1/li

liphp1/li

/ul

/li

li class="pli"

spanphp/span

ul class="son"

liphp1/li

liphp1/li

/ul

/li

li class="pli"

spanphp/span

ul class="son"

liphp1/li

liphp1/li

/ul

/li

/ul

var pli = document.querySelectorAll(".parent .pli span");

for(var i = 0;ipli.length;i++){

pli[i].index = i;

pli[i].onclick = function(){

for(var j = 0;jpli.length;j++){

document.querySelectorAll(".parent .pli .son")[j].style.display="none";

}

this.parentNode.querySelector(".son").style.display="block";

}

}

css四层向下折叠菜单

道理和二级菜单是一样的,就是嵌套的层级多了要注意样式的书写!

你实在用css写不出来,也可以用jq插件来写

如何使用纯CSS技术实现一个可折叠树形菜单

利用伪类可以实现点击打开折叠菜单,但是再次点击收起貌似就没法实现了。跟楼下说的一样,利用:hover、:active 可以设置二级菜单的样式(如height、visibility、display)以达到展开的效果。


当前名称:css折叠菜单样式,html折叠菜单
链接分享:http://myzitong.com/article/dsihcsg.html