如何在滑动导航面板中包装文本?

How do I wrap my text within a sliding navigation panel?

本文关键字：包装 文本 导航      更新时间：2023-09-26

我有一个面板，当你点击它时，它会上下滑动。当面板向下滑动时，会出现一些导航文本。当面板向上滑动时，文本应该随之向上滑动，但事实并非如此。面板滑动，文字留在背面。它可以隐藏，但不能随着面板滑动。

HTML: 

<div id="panel">
    <ul class="nav">
        <a href="#sec1" id="home">home</a>
        <a href="#sec2" id="proj">proj</a>
        <a href="#sec3" id="about">about</a>
    </ul>
</div>
<div id="flip"></div>
Javascript: 

$('a.panel').click(function() {
    $('a.panel').removeClass('selected');
    $(this).addClass('selected');
    current = $(this);
    $('#wrapper').scrollTo($(this).attr('href'), 800);
    return false;
});
CSS: 

#flip {
    content: url("Some image to click on");
    margin: auto;
    z-index: 100;
}
#panel {
    padding: 5px;
    text-align: right;
    background-color: #fff;
    display: block;
    z-index: 100;
    opacity: 0.7;
    /* position:fixed;
    width: 100%; */
}

对不起，我不知道jQuery，但很快你可以尝试通过CSS过渡实现这一点。

一旦你将过渡设置为

transition: property duration timing-function delay, property duration timing-function delay;

。

transition: height 0.5s ease-in, opacity 0.25 ease-in 0.5s;

当你将鼠标悬停在#panel(伪类:hover)上时，你可以为#panel的高度和不透明度设置不同的值。不要忘记厂商特定版本的过渡属性(如-webkit-， -o-等)。

相关文章：