育才学习网1.html5中侧边栏导航·怎样写
侧边栏导航标签：
<aside>
<nav>
<ul>
<li>；菜单一</li>
<li>；菜单二</li>
<li>；菜单三</li>
<li>；菜单四</li>
<li>；菜单五</li>
</ul>
</nav>
</aside>
样式自己加。
2.滑动门导航栏在html中怎么制作
不知道你说的是不是，很像在一些网站侧边栏上看到的“分享到”，碰一下移出来，鼠标移开又回去。先写了再说吧。.
<style>
#share{
width: 150px;
height: 200px;
background-color: green;
position: absolute;
left:-150px;
}
#share span{
position: absolute;
width: 20px;
height: 60px;
line-height: 20px;
background-color: yellow;
right: -20px;
top: 70px;
}
</style>
<div id="share">
<span>；分享到</span>
</div>
<script>
var oDiv6=document.getElementById("share");
var timer4=null;
oDiv6.onmouseover=function()
{
startshare(0);
}
oDiv6.onmouseout=function()
{
startshare(-150);
}
function startshare(iTarget)
{
var oDiv6=document.getElementById("share");
clearInterval(timer4);
timer4=setInterval(function()
{
var speed1=0;
if (oDiv6.offsetLeft>iTarget)
{
speed1=-10;
}
else
{
speed1=10;
}
if (oDiv6.offsetLeft==iTarget)
{
clearInterval(timer4);
}
else
{
oDiv6.style.left=oDiv6.offsetLeft+speed1+'px';
}
},30)
}
</script>
我这里是鼠标移入移出有效果，你可以改成点击某个元素有效果，等等等等
3.html框架如何实现左边为导航栏,右边为连接页面,代码写出来
你直接运行就可以了：：
<html xmlns=""><head>
<script type="text/javascript">
function setTab(m,n){
var tli=document.getElementById("leftmenu"+m).getElementsByTagName("li");
var mli=document.getElementById("mcont"+m).getElementsByTagName("ul");
for(i=0;i<tli.length;i++){
tli[i].className=i==n?"hover":"";
mli[i].style.display=i==n?"block":"none";
}
}</script>
<style type="text/css">
.aa{ width:200px; float:left;}
.aa li{ padding:5px; background:#ff0000; cursor:pointer;}
.bb{ width:700px; float:left; background:#00ff00;}
</style>
</head>
<body>
<div class="aa">
<ul id="leftmenu0">
<li class="hover" onclick="setTab(0,0)">；操作流程</li>
<li onclick="setTab(0,1)">；付款方式</li>
<li onclick="setTab(0,2)">；免责声明</li>
<li onclick="setTab(0,3)">；隐私声明</li>
</ul>
</div>
<div id="mcont0" class="bb">
<ul class="block" style="display: block">1111111111</ul>
<ul class="block" style="display: none">222222222</ul>
<ul class="block" style="display: none">333333333</ul>
<ul class="block" style="display: none">4444444444</ul>
</div>
</body>
</html>
4.html如何点击左边的导航,右边弹出对应的内容
这个是点击2113之后触发事件，是要用到js代码的，我5261这大概给一个框架，4102css代码你自己设置一下：
html代码如下：
<div class="main">
<div class="left">
<ul>
<li onclick="choose(1);" class="select">；玄界1653</li>
<li onclick="choose(2);">；阶位</li>
<li onclick="choose(3);">；坐骑</li>
<li onclick="choose(4);">；佣兵</li>
<li onclick="choose(5);">；骑士</li>
</ul>
</div>
<div class="right">
<div id="1"><img src="01.png"/></div>
<div id="2" class="ycdiv"><img src="02.png"/></div>
<div id="3" class="ycdiv"><img src="03.png"/></div>
<div id="4" class="ycdiv"><img src="04.png"/></div>
<div id="5" class="ycdiv"><img src="05.png"/></div>
</div>
</div>
JS代码如下：
<script type="text/javascript">
for(var i=2;i<=5;i++){
document.getElementById(i).style.display="none"； //让多余的div隐藏
}
function choose(obj){
//隐藏所有的div
for(var i=1;i<=5;i++){
document.getElementById(i).style.display="none"； //让div隐藏
}
document.getElementById(obj).style.display="block"； //给li加样式
var lis = document.getElementsByTagName("li")； //下标从0开始
for(var i=0;i<lis.length;i++){
lis[i].className = "";
}
lis[obj-1].className = "select";
}
</script>
其他的你自己去琢磨下，原理和代码已给到。
5.html文件,实现上方导航和左侧边栏不变,而右侧边栏信息变换
用框架可以做：1.建立主页面，就是你打开就能看到的页面
<meta ; charset=gb2312">| 导航1 | 导航2 |