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

Вот сома 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; } Тогда он будет работать, однако, с видом панели меню сверху (который содержит только значок).

Вы также можете оставить этот фоновый цвет и вместо этого добавить отрицательный margin-top к .header-slides (около -50px), который сначала выглядит красиво (изображение за иконкой меню, без темного верхнего бара), но непоследовательно, когда меню открыто, так как в последнем элементе меню будет отображаться обратное изображение, а другие нет.

Вот скрипка: https://jsfiddle.net/ebn7syun/