Question

我在背景图片上有一个响应菜单。

<div 
    class="header-slides" 
    data-slides='["https://picjumbo.imgix.net/HNCK1654.jpg?q=40&w=1650&sharp=30", 
        "https://picjumbo.imgix.net/HNCK2106.jpg?q=40&w=1650&sharp=30"]' 
> 
<ul class="topnav"> 
    <li><a class="active" href="#home">Home</a></li> 
    <li><a href="#news">News</a></li> 
    <li><a href="#contact">Contact</a></li> 
    <li><a href="#about">About</a></li> 
    <li class="icon"> 
    <a href="javascript:void(0);" style="font-size:15px;" onclick="myFunction()">&#9776;</a> 
    </li> 
</ul> 
    <h2>Header Message</h2> 
</div> 

菜单工作正常，除非我切换它，菜单停留在背景图像的顶部。我想实现的是当我切换时，我想让菜单按下背景图片并将其放置在页面的顶部。

这是可行的吗？

You can find the code sample here

Answer 1

我认为你必须把<ul class="topnav"></ul><div class"header-slides">之前，它是可能的。

Here is a Fiddle

这里是SOM HTML：

<ul class="topnav"> 
    <li><a class="active" href="#home">Home</a></li> 
    <li><a href="#news">News</a></li> 
    <li><a href="#contact">Contact</a></li> 
    <li><a href="#about">About</a></li> 
    <li class="icon"> 

    </li> 
</ul> 
<div 
    class="header-slides" 
    data-slides='["https://picjumbo.imgix.net/HNCK1654.jpg?q=40&w=1650&sharp=30", 
        "https://picjumbo.imgix.net/HNCK2106.jpg?q=40&w=1650&sharp=30"]' 
> 
    <a id="menuIcon" href="javascript:void(0);" style="font-size:15px;" onclick="myFunction()">&#9776;</a> 
    <h2>Header Message</h2> 
</div> 

和CSS：

[data-slides] { 
    background-image: url(http://lorempixel.com/500/300/); /* Default image. */ 
    background-repeat: no-repeat; 
    background-position: center top; 
    background-size: cover; 
    transition: background 1s linear; 
} 

/* Use additional CSS to control the `height` of `[data-slides]`, like so: */ 

.header-slides { 
    height: 500px; 
    border: 1px solid black; 
    position: relative; 
} 

@media all and (min-width: 48em) { 
    .header-slides { height: 500px; } 
} 

h2 { 
    position: absolute; 
    top: 100px; 
    color: white; 
    font-size: 4em; 
    line-height: 1em; 
    text-align: center; 
    left: 0; 
    width: 100%; 
} 

ul.topnav { 
    position: absolute; 
    z-index: 1; 
    width: 97%; 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
} 

#menuIcon{ 
    display:none; 
} 

ul.topnav li {float: right; padding-right} 

ul.topnav li a { 
    display: inline-block; 
    color: #f2f2f2; 
    text-align: center; 
    padding: 14px 16px; 
    text-decoration: none; 
    transition: 0.3s; 
    font-size: 17px; 
} 

ul.topnav li a:hover {background-color: #333;} 

ul.topnav li.icon {display: none;} 

@media screen and (max-width:680px) { 
    ul.topnav li:not(:last-child) {display: none;} 
    ul.topnav li.icon { 
    float: right; 
    display: inline-block; 
    } 
} 

@media screen and (max-width:680px) { 
    ul.topnav.responsive { 
    position: relative; 
    background-color: #000; 
    width:100%; 
    } 
    ul.topnav.responsive li.icon { 
    position: absolute; 
    right: 0; 
    top: 0; 
    } 
    #menuIcon { 
    display: block; 
    position: absolute; 
    top: 0; 
    right: 0px; 
    padding: 14px 17px; 
    color: #ffffff; 
    text-decoration: none; 
} 
    #menuIcon:hover{ 
    background-color: #000; 
    } 
    ul.topnav.responsive li { 
    float: none; 
    display: inline; 
    } 
    ul.topnav.responsive li a { 
    display: block; 
    text-align: left; 
    } 
} 

Answer 2

由于@stannersuperior写道，第一移到高于 “头滑梯” 你的资产净值名单 - DIV。然后你不会看到图标（白色的白色），所以你必须添加一些背景，如ul.topnav { background: #444; }然后，它会工作，但是，顶部的一种菜单栏（只包含图标）。

您也可以省略背景颜色，而是在.header-slides（大约-50px）处添加一个负边距顶部，起初看起来不错（图像位于菜单图标后面，没有深色顶部条），但在菜单是开放的，因为最后的菜单条目将具有图像背景，其他则不是。

这是小提琴：https://jsfiddle.net/ebn7syun/