Question

我脑子里有个主意，但是我被卡住了。我正在寻找带有固定导航栏的页面，其中包含以下链接：投资组合关于接触

现在，我不想将“关于”部分加载到新页面中，而是希望拥有一旦我点击“关于”链接，一个大约470x330px的div框从“导航栏”本身下滑下来。

以下是我为导航格式化代码的方法：

<li><a href="#" class="menu-button menu-drop"><span class="menu-label">Portfolio</span></a>
<div class="menu-dropdown menu-dropdown2">
<ul class="menu-sub">
<li><a href="index1.php?page=peoples" class="menu-subbutton"><span class="menu-label">People</span>
<div class="menu-desc">portraits/full figure</div></a></li>
<li><a href="#" class="menu-subbutton"><span class="menu-label">Products</span>
<div class="menu-desc">commercial base</div></a></li>
<li><a href="#" class="menu-subbutton"><span class="menu-label">Landscapes</span>
<div class="menu-desc">various landscapes</div></a></li>
<li><a href="index1.php?page=personal" class="menu-subbutton"><span class="menu-label">Personal</span>
<div class="menu-desc">personal aspects</div></a></li>
<li><a href="#" class="menu-subbutton"><span class="menu-label">Graphic Design</span>
<div class="menu-desc">various designs</div></a>
</li></ul></div></li> 
<li><a href="#" class="menu-button"><span class="menu-label">About</span></a></li>
<li><a href="#" class="menu-button"><span class="menu-label">Contact</span></a></li>

这是一个非常酷的例子，只需点击“关于”：http://www.nicolastarierphotography.com/

Answer 1

怎么样......

A Pure CSS Solution?

HTML

<ul>
    <li><input id='dropdown' type='checkbox' /><label for='dropdown'>Dropdown</label>
        <div>content content content content content content content content content content content content content content content content content content</div>
    </li>
</ul>

CSS

ul {
    list-style:none;
    margin:0;
    padding:0;
}
li {
    float:right;
    margin-right:50px;
}
li input[type=checkbox] ~ div{ 
    position:absolute;
    max-height:0;
    overflow:hidden;
    transition:all 200ms ease-in;
}
li label{
    margin-left:-20px;
    background:white;
}
li input[type=checkbox]:checked ~ div{
    max-height:200px;
}

jQuery显示隐藏的内容

1 个答案:

A Pure CSS Solution?