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/

背景图片上的响应式菜单

2 个答案: