如何在导航下方的响应式布局中显示 Div/ul/List 但与我的内容重叠？

Posted

技术标签:

【中文标题】如何在导航下方的响应式布局中显示 Div/ul/List 但与我的内容重叠？【英文标题】：How can i show the Div/ul/List in a resposive layout below the navigation but overlaying my content? 【发布时间】：2021-04-02 10:56:13 【问题描述】：

我正在尝试构建响应式导航。这个想法是构建类似于 Apple 的子导航的东西（例如在 Apple Submenu 上）

到目前为止，我构建的是一个基于 Flexbox 的导航，带有汉堡菜单、动画和通过媒体查询的响应能力。从我作为非 html/CSS/UX/UI 构建器的角度来看，它看起来不错。我想要弄清楚并实施的是以下内容

点击汉堡图标 在导航栏下方打开一个ul/li列表 确保内容被覆盖而不是被下推

我现在尝试了三天，阅读了数百篇博客，但找不到任何解决方案。也许有人可以帮我解决我的私人圣诞节个人博客布局问题:)？

这是我的代码：

$('.toggle').click(function() 
  $(this).toggleClass('active');
);
body 
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  font-size: 12px;
  background-color: white;


.wrapper 
  min-width: 375px;
  max-width: 900px;
  margin: 0 auto;


.header 
  padding: 5px 10px 5px 10px;
  background-color: #c6c6c6;
  color: #000;
  height: 42px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;



.hamburger 
  display: block;


/* HAMBURGER ICON BEGIN */
.toggle 
  padding: 0;
  margin: 0;
  border: 0;
  background-color: transparent;
  /* display: block; */
  /* position: absolute; */
  position: relative;
  height: 2.66667em;
  width: 2.66667em;
  outline: none;
  -moz-transition: -moz-transform 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99);
  -o-transition: -o-transform 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99);
  -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99);
  transition: transform 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99);


.gh-svg 
  position: absolute;
  left: 0;
  top: 0;
  font-size: 18px;
  fill: #000;
  -moz-transform: translateZ(0) rotate(0deg);
  -ms-transform: translateZ(0) rotate(0deg);
  -webkit-transform: translateZ(0) rotate(0deg);
  transform: translateZ(0) rotate(0deg);
  -moz-transition: -moz-transform 0.45s cubic-bezier(0.4, 0.01, 0.165, 0.99);
  -o-transition: -o-transform 0.45s cubic-bezier(0.4, 0.01, 0.165, 0.99);
  -webkit-transition: -webkit-transform 0.45s cubic-bezier(0.4, 0.01, 0.165, 0.99);
  transition: transform 0.45s cubic-bezier(0.4, 0.01, 0.165, 0.99);


.toggle .gh-svg-rect-top 
  -moz-transform: translate3d(0, -8px, 0);
  -webkit-transform: translate3d(0, -8px, 0);
  transform: translate3d(0, -8px, 0);


.toggle .gh-svg-rect-bottom 
  -moz-transform: translate3d(0, 8px, 0);
  -webkit-transform: translate3d(0, 8px, 0);
  transform: translate3d(0, 8px, 0);


.toggle.active .gh-svg-top 
  -moz-transform: translateZ(0) rotate(135deg);
  -ms-transform: translateZ(0) rotate(135deg);
  -webkit-transform: translateZ(0) rotate(135deg);
  transform: translateZ(0) rotate(135deg);


.toggle.active .gh-svg-bottom 
  -moz-transform: translateZ(0) rotate(-135deg);
  -ms-transform: translateZ(0) rotate(-135deg);
  -webkit-transform: translateZ(0) rotate(-135deg);
  transform: translateZ(0) rotate(-135deg);


.toggle.active .gh-svg-rect-top, .toggle.active .gh-svg-rect-bottom 
  -moz-transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);


/* HAMBURGER ICON END */

.logo 
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: 18px;


.nav 
  display: flex;
  align-items: center;
  list-style-type: none;
  margin: 0;
  padding: 0;
  
  display: none;


.nav li 



.nav li a, .nav li a:visited 
  color: #000;
  text-decoration: none;
  margin-left: 10px; 


.nav li a:hover 
  color: #06c;
  text-decoration: none;



@media screen and (min-width: 480px) 
  .hamburger 
    display: none;
   
  
  .nav 
    display: flex;
  
  
  body 
    background-color: #666;
  


@media screen and (min-width: 900px) 
  .hamburger 
    display: none;
   
  
  .nav 
    display: flex;
  
  
  body 
    background-color: #888;
  

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700;800&display=swap" rel="stylesheet">

<div class="wrapper">

  <div class="header">

    <!-- Page Logo #begin# -->
    <div class="logo">BLOG Y</div>
    <!-- Page Logo #end# -->

    <!-- The Navigation Items #begin# -->
    <div class="items">
      <ul class="nav">
        <li><a href="#">About</a></li>
        <li><a href="#">Products</a></li>
        <li><a href="#">Topics</a></li>
        <li><a href="#">Support</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
    <!-- The Navigation Items #end# -->

    <!-- The Hamburger Menu Icon #begin# -->
    <div class="hamburger">
      <button class="toggle">
        <svg x="0px" y="0px"  viewBox="0 0 96 96" class="gh-svg gh-svg-top" enable-background="new 0 0 96 96">
          <rect   x="32" y="46" class="gh-svg-rect gh-svg-rect-top"></rect>
        </svg>
        <svg x="0px" y="0px"  viewBox="0 0 96 96" class="gh-svg gh-svg-bottom" enable-background="new 0 0 96 96">
          <rect   x="32" y="46" class="gh-svg-rect gh-svg-rect-bottom"></rect>
        </svg>
      </button>
    </div>
    <!-- The Hamburger Menu Icon #end# -->

  </div>

  <div class="content">

  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

  <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>

  </div>
</div>

【问题讨论】：

【参考方案1】：

很好的例子： https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_responsive_navbar_dropdown

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body margin:0;font-family:Arial

.topnav 
  overflow: hidden;
  background-color: #333;


.topnav a 
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;


.active 
  background-color: #4CAF50;
  color: white;


.topnav .icon 
  display: none;


.dropdown 
  float: left;
  overflow: hidden;


.dropdown .dropbtn 
  font-size: 17px;    
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;


.dropdown-content 
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;


.dropdown-content a 
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;


.topnav a:hover, .dropdown:hover .dropbtn 
  background-color: #555;
  color: white;


.dropdown-content a:hover 
  background-color: #ddd;
  color: black;


.dropdown:hover .dropdown-content 
  display: block;


@media screen and (max-width: 600px) 
  .topnav a:not(:first-child), .dropdown .dropbtn 
    display: none;
  
  .topnav a.icon 
    float: right;
    display: block;
  


@media screen and (max-width: 600px) 
  .topnav.responsive position: relative;
  .topnav.responsive .icon 
    position: absolute;
    right: 0;
    top: 0;
  
  .topnav.responsive a 
    float: none;
    display: block;
    text-align: left;
  
  .topnav.responsive .dropdown float: none;
  .topnav.responsive .dropdown-content position: relative;
  .topnav.responsive .dropdown .dropbtn 
    display: block;
    width: 100%;
    text-align: left;
  

</style>
</head>
<body>

<div class="topnav" id="myTopnav">
  <a href="#home" class="active">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <div class="dropdown">
    <button class="dropbtn">Dropdown 
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div> 
  <a href="#about">About</a>
  <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a>
</div>

<div style="padding-left:16px">
  <h2>Responsive Topnav with Dropdown</h2>
  <p>Resize the browser window to see how it works.</p>
  <p>Hover over the dropdown button to open the dropdown menu.</p>
</div>

<script>
function myFunction() 
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") 
    x.className += " responsive";
   else 
    x.className = "topnav";
  

</script>

</body>
</html>

【讨论】：

这个例子的问题是内容的下推。 尝试使用：transform: translateY(100%);或变换： translateY(-100%);

以上是关于如何在导航下方的响应式布局中显示 Div/ul/List 但与我的内容重叠？的主要内容，如果未能解决你的问题，请参考以下文章

为小型显示器显示彼此下方的表格列（响应式布局）

Bootstrap实战 - 响应式布局

案例HTML5响应式导航菜单特效

需要帮助将图像添加到响应式布局

响应式导航栏布局空间

第33章 项目实战-兼容式响应布局2