Question

我制作了这个动画导航栏，按预期工作。唯一让我感到困惑的是，菜单项列表会在导航栏的前面中滑动，而不是在导航栏后面。

我已经设置了一个JSFiddle来演示这个问题： JSFiddle

这是一个快速的代码视图（完整的代码在小提琴中）：

HTML：

<header class="header"> <div id="logo"> <a href="#top"> <img src="http://lorempixel.com/125/25/abstract" alt="Logo"/> </a> </div> <nav class="main-nav"> <ul> <li><a href="#projects">Projects</a> </li> <li><a href="#about">About</a> </li> <li><a href="#contact">Contact</a> </li> </ul> <button type="button" role="button" aria-label="Toggle Navigation" class="lines-button x"> <span class="lines"></span> </button> </nav>  </header>

CSS：

.main-nav ul { position: absolute; top: 0; left: 0; width: 100%; -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -ms-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease; } .main-nav ul.is-visible { -webkit-transform: translateY(50px); -moz-transform: translateY(50px); -ms-transform: translateY(50px); -o-transform: translateY(50px); transform: translateY(50px); }

Answer 1

请检查：http://jsfiddle.net/5ydhgxay/3/

$('.lines-button').on('click', function (event) {
        $('.header').toggleClass('absolute');
        $('.main-nav').children('ul').slideToggle(500);
    });

<强> CSS

.main-nav ul {
    position: absolute;
    top: 50px;
    left: 0;
    width: 100%;
    margin:0;
    display:none;

}

Answer 2

这是一个简单的Z-index问题我相信。它是一个css属性，用于命令元素相互之间的可见性。如果您希望导航栏位于前面，请添加

.main-nav {
    z-index:1;
 }

Answer 3

关闭徽标div后面的标题部分，并添加以下CSS：

.lines-button {    
    position: relative;
    z-index: 9999; 
}

JSFiddle

Answer 4

我在div的标题中包含了除导航之外的所有内容，并为div提供了我的菜单应该具有的背景。

<强> HTML：

<header class="header">
    <div class="header-wrapper">
        <div id="logo">
            <a href="#top">
                <img src="img/logo.svg" alt="Logo">
            </a>
        </div>

        <button type="button" role="button" aria-label="Toggle Navigation" class="lines-button x">
            <span class="lines"></span>
        </button>
    </div>

    <nav class="main-nav">
        <ul>
            <li><a href="#projects">Projects</a>
            </li>
            <li><a href="#about">About</a>
            </li>
            <li><a href="#contact">Contact</a>
            </li>
        </ul>
    </nav>
    <!-- main-nav -->
</header>

<强> CSS：

.header-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    z-index: 1000;
    background-color: rgba(255,255,255,.95);
}

导航栏幻灯片切换应在导航栏后面滑动，但在前面滑动

4 个答案: