Question

我是HTML和Javascript的新手。我需要创建一个页面，如下所示http://livedemo00.template-help.com/wt_37383/index-4.html

我不想使用插件，而是试图自己创建它。

以下是我提出的代码

<!DOCTYPE html>
<html>
<head>
<style> 

#div1
{
    width:100px;
    height:100px;
    background:gray;
    transition:width 2s;
    -webkit-transition:width 2s; /* Safari */
    float: left;
    border: 2px solid;
}

#div1:hover
{
    width:300px;
}

#div2
{
    width: 150px;
    background-color: red;
    -moz-transform:    rotate(-90deg);            
    -ms-transform:     rotate(-90deg);            
    -o-transform:      rotate(-90deg);
    -webkit-transform: rotate(-90deg);
}

#div3
{
    background:red;
    float: left;
}
</style>
</head>

<body>
<div id="div1">
      <Table style="width:100%;height:100%">
        <col width="20">
        <col width="120">
        <td>
            <div id="div2"> HELLO </div>
        </td>
        <td>
        <ul>
            <li> Text 1 </li>
            <li> Text 2 </li>
        </ul>
        </td>
    </table>     
</div>

<div id ="div3"></div>
<div id="div1">
<ul>
<li>checking 1 </li>
<li> checking 2 </li>
</ul>
</div>

</body>
</html>

我面临两个问题，我无法将红色div块放在左端，如另一个链接所示。我希望在div崩溃时隐藏文本。

http://jsfiddle.net/dipz_26/e9mvS/

提前谢谢。

Answer 1

这就是所谓的手风琴导航，尝试搜索该风格并查看您可以提出的教程。

如果您想使用点击展开标签，我建议您注意劫持后退按钮。就个人而言，我不喜欢导航劫持后退按钮，如果你从来没有真正切换文件，特别是如果它已经在已经有导航链接的页面中使用。但同样，这正是我对它的看法。

祝你好运！

Answer 2

做了一些快速的骚扰 - 让红色标题框正确对齐似乎相当棘手（可能是因为表格元素形成不正确？）

下面的代码并不是你问题的真正答案（就像你为什么要得到那种疲惫的行为）而是另一种解决同样问题的方法：

小提琴：http://jsfiddle.net/Varinder/e9mvS/2/

这笔交易是尽可能地重新上课：

HTML：

<div class="awesome-thing">
    <div class="awesome-thing-section">
        <div class="awesome-thing-header">
            Some title
        </div>
        <div class="awesome-thing-body">
            <ul>
                <li>checking 1 </li>
                <li> checking 2 </li>
            </ul>
        </div>
    </div>

    <div class="awesome-thing-section">
        <div class="awesome-thing-header">
            Some title 2
        </div>
        <div class="awesome-thing-body">
            <ul>
                <li>checking 1 </li>
                <li> checking 2 </li>
            </ul>
        </div>
    </div>
</div>

CSS：

.awesome-thing {
    overflow:hidden;
}

.awesome-thing-section {
     width:100px;
     height:300px;
     background:gray;
     border: 2px solid;
     position:relative;
     float:left;
     transition:width 2s ease;
     overflow:hidden;
}



.awesome-thing-header {
    position:relative;
    width:300px;
    height:100px;

    -moz-transform:    rotate(-90deg);            
    -ms-transform:     rotate(-90deg);            
    -o-transform:      rotate(-90deg);
    -webkit-transform: rotate(-90deg);

    transform-origin: center 150px 0;
    background:red;
}

.awesome-thing-body {
    position:absolute;
    top:0;
    bottom:0;
    left:100px;
    width:200px;
    opacity:0;
    transition:opacity 2s ease;
}

.awesome-thing-section:hover {
    width:300px;
}
.awesome-thing-section:hover .awesome-thing-body {
    opacity:1;
}

滑块类似于HTML中的kiwks控件

2 个答案: