css3折叠导航（css3折叠导航栏问题）
本文目录一览：
- 1、用JS+CSS实现折叠式导航菜单，当点击第一菜单后，自动打开第二次菜单，如下图：
- 2、用CSS如何做导航条？
- 3、用css做导航时.导航有两行、怎么折行？？
- 4、网站代码html设置折叠效果？网站产品导航设置
- 5、html5css3左侧折叠菜单怎么做
用JS+CSS实现折叠式导航菜单，当点击第一菜单后，自动打开第二次菜单，如下图：
style
/*样式自己补一下*/
.parent .son{display: none;}
/style
ul class="b87e-06d8-ffc5-d817 parent"
li class="06d8-ffc5-d817-3e1b pli"
spanphp/span
ul class="ffc5-d817-3e1b-355f son"
liphp1/li
liphp1/li
/ul
/li
li class="d817-3e1b-355f-0280 pli"
spanphp/span
ul class="3e1b-355f-0280-1298 son"
liphp1/li
liphp1/li
/ul
/li
li class="355f-0280-1298-e410 pli"
spanphp/span
ul class="0280-1298-e410-af20 son"
liphp1/li
liphp1/li
/ul
/li
li class="1298-e410-af20-1d0e pli"
spanphp/span
ul class="e410-af20-1d0e-16de son"
liphp1/li
liphp1/li
/ul
/li
li class="af20-1d0e-16de-03fa pli"
spanphp/span
ul class="1d0e-16de-03fa-e2c0 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是无法完成导航条的，需要结合html，一般导航条的制作都是通过一个div包裹着ul，使用li来排列完成导航条的html部分，css中，我们需要给这个div宽高，还需要设置好li的宽，高，还有一个float属性，这样基本上导航条就制作完成，请看代码：
html
head
style
#div1{
width:600px;
height:40px;
font-size:13px;
}
#div1 ul li{
list-style:none;
width:50px; //具体的高宽需要根据实际要求
height:30px;
}
/head
body
div id='div1'
ul
lia href=''目录1/a/li
lia href=''目录2/a/li
lia href=''目录3/a/li
lia href=''目录4/a/li
/ul
/div
/body
/html
用css做导航时.导航有两行、怎么折行？？
如果你要只用一个ul包住的话，你就把li的width增大到一行只能容纳两个li咯，如果不是的话，只能放两个ul咯
网站代码html设置折叠效果？网站产品导航设置
放上去的话，用css的hover，先设置默认隐藏
.name{}display:none;}
.name:hover .list{display:block;}
点击的话，用JQ的click
$(".name").click(function(){
if($(".name").is(":hidden"))
$(".name").css("display","block");
else
$(".name").css("display","none");
});
如果需要带点动画效果，你就要看看CSS3了........
html5css3左侧折叠菜单怎么做
h1p折叠1/p/h1
h1p折叠2/p/h1
h1p折叠3/p/h1
h1p折叠4/p/h1
需要js来，最好用jquery来实现
只需要给h1绑定事件，单件它的时候，设置它的p属性，display:none。
