求助，怎么做出如内容中的效果？

如下图所示，我想应该是js操作的，怎样做一个图中所示可开启、关闭侧边栏？
开启效果：点击一下后的关闭效果：
就是点击显示会出现一个侧边栏，然后点击关闭，就消失，左边的内容填充过来，名字也会随点击做出相应变化。跪求大神帮忙。

解决方案 »

  1.   

    其实就是，“关闭边栏”就是触发了相应的事件，
    将导航栏的DIV的宽度，设置为了0。
      

  2.   

    刚刚接触JS??只想要效果的话,JQuery可以让你很快上手,JQeury插件应该会有这种现成的
      

  3.   

    给你写了一个例子：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title> New Document </title>
    <meta name="Generator" content="EditPlus">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <script type="text/javascript">
    <!--
    function side(a){
    if(a.innerHTML == "关闭边栏"){
    document.getElementById("div2").style.display= "none";
    document.getElementById("div1").style.width = "400px";
    document.getElementById("div2").style.width = "0px";
    a.innerHTML = "打开边栏";
    }else{
    document.getElementById("div2").style.display= "";
    document.getElementById("div1").style.width = "300px";
    document.getElementById("div2").style.width = "100px";
    a.innerHTML = "关闭边栏";
    }
    }
    //-->
    </script>
    </head><body>
    <div style="margin-left: 320px;" onclick="side(this)" >关闭边栏</div><br />
    <div id="div1"   style="float: left;width:300px;height:300px;background-color:#697896">
    11111111
    </div>
    <div id="div2"   style="float: left;width:100px;height:300px;background-color:#eeeeee" >
    222222222
    </div>
    </body>
    </html>
    运行效果如下：
    截图一：截图二：
      

  4.   

    其实就是用JS去控制层的样式，不碍乎就是宽度啊，是否显示啊这些，如果是要有动画效果，建议使用jQuery或者其他封装，人家写的效率高，好用！
    话说楼主的头像亮了……
      

  5.   

    word-break:break-all;
    word-wrap:break-word;
      

  6.   


    只要在div的style中加“word-wrap:break-word;”就可以了。