隐藏带有按钮的响应式导航以打开

Question

我试图在页面太小时隐藏我的菜单，并且有一个按钮可以在需要时打开它。我正在努力实现它。我可以在屏幕缩小时隐藏导航并显示 div 按钮以重新打开它，但无法让菜单重新出现。我曾尝试使用焦点调出原始的侧边导航 div 但收效甚微，认为它不会覆盖代码以将其隐藏在屏幕尺寸上。我该如何解决这个问题？

非常感谢任何指导。

.sidenav {
  height: 100%; 
  width: 220px; 
  position: fixed; 
  z-index: 1; 
  top: 0; 
  left: 0;
  background-color: #111; 
  overflow-x: hidden; 
  padding-top: 20px;
  -webkit-box-shadow: 2px 0px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 2px 0px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 2px 0px 5px 0px rgba(0,0,0,0.75);
}


.sidenav a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 25px;
  color: #00aad4;
  display: block;
}


.sidenav a:hover {
  color: #000;
}

/* Style page content */
.main {
  margin-left: 220px; /* Same as the width of the sidebar */
  padding: 0px 10px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
} 


.HideMenu { display:none; }
.ShowMenu { display:block; }

/* Desktop*/
@media screen and (min-width: 768px) {
  .HideMenu  { display: block; }
}

/* Mobile*/
@media screen and (max-width: 768px) {
  .ShowMenu:focus ~ .sidenav { display: block; }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="HideMenu">
<div class="sidenav">
<img src="images/logo.png">
  <a href="#">Textures</a>
  <a href="#">HDRI's</a>
</div>  
</div>
<!-- Content
–––––––––––––––––––––––––––––––––––––––––––––––––– -->

 <div class="grid-container halves full"  style="background-color: #000;">
        <div>Centre whole</div> 
 </div>
 <div class="ShowMenu" tabindex="0">Show Me</div>
 <div class="grid-container halves">
      <div>
        50 L
      </div>
      <div>
          50 R
      </div>
    </div>

<div class="grid-container thirds">
    <div>Third L</div>
    <div>Thirs M</div>
    <div>Third R</div>
</div>

Answer 1

这是 HTML 代码

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="HideMenu">
<div class="sidenav">
<img src="images/logo.png">
  <a href="#">Textures</a>
  <a href="#">HDRI's</a>
</div>  
</div>
<!------------------------------- Content ------------------------------->

 <div class="grid-container halves full"  style="background-color: #000;">
        <div>Centre whole</div> 
 </div>
 <div class="ShowMenu" tabindex="0">Show Me</div>
 <div class="grid-container halves">
      <div>
        50 L
      </div>
      <div>
          50 R
      </div>
    </div>

<div class="grid-container thirds">
    <div>Third L</div>
    <div>Thirs M</div>
    <div>Third R</div>
</div>

<!-- You'll need to import the javascript file with the <script> tag -->
<script type="text/javascript" src="/path/to/desktop-mobile-layout-handler.js"></script>

这是CSS代码

.sidenav {
  height: 100%; 
  width: 220px; 
  position: fixed; 
  z-index: 1; 
  top: 0; 
  left: 0;
  background-color: #111; 
  overflow-x: hidden; 
  padding-top: 20px;
  -webkit-box-shadow: 2px 0px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 2px 0px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 2px 0px 5px 0px rgba(0,0,0,0.75);
}


.sidenav a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 25px;
  color: #00aad4;
  display: block;
}


.sidenav a:hover {
  color: #000;
}

/* Style page content */
.main {
  margin-left: 220px; /* Same as the width of the sidebar */
  padding: 0px 10px;
}

/*
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}
*/


.HideMenu { display:none; }
.ShowMenu { display:block; }

/* Desktop*/
/*
@media screen and (min-width: 768px) {
  .HideMenu  { display: block; }
}
*/

/* Mobile*/
/*
@media screen and (max-width: 768px) {
  .ShowMenu:focus ~ .sidenav { display: block; }
}
*/

最后，JavaScript 代码

// desktop-mobile-layout-handler.js

var screenHeight = window.screen.availHeight;
var screenWidth = window.screen.availWidth;

var hideMenuElement = document.querySelector(".HideMenu");
var sideNavElement = document.querySelector(".sidenav");
var sideNavLinks = document.querySelectorAll(".sidenav a");

function desktopLayout () {
    hideMenuElement.style.display = "block"; // hide the .HideMenu element
}

function mobileLayout () {
    sideNavElement.onfocus = function () { // when the .sidenav element is being focused
        sideNavElement.style.display = "block"; // display the .sidenavelement
    }
    sideNavElement.onblur = function () { // when the .sidenav element is not being focus
        sideNavElement.style.display = "none"; // hide the .sidenav element
    }
}

if (screenHeight <= 450) {
    sideNavElement.style.paddingTop = "15px";
    sideNavLinks.forEach(function (elem) {
        elem.style.fontSize = "18px";
    });
}

if (screenWidth >= 768) { // use Desktop layout
    desktopLayout();
}
else { // use Mobile Layout
    mobileLayout();
}

javascript 代码将帮助您修复上述 CSS 错误。

希望对您有所帮助

隐藏带有按钮的响应式导航以打开

Hiding a responsive navigation with button to open

html

css

navigation

menu