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

Question

I am trying to hide my menu when a page gets too small and has a button to open it if required. I am struggling to make it happen. I can hide the navigation when the screen shrinks and display the div button to reopen it but cannot get the menu to reappear. I have tried to use focus to bring up the original side nav div with little success thinking that it is not overwriting the code to hide it on screen size. How do I get around this?

Any guidance greatly appreciated.

 .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

Here's the HTML code

<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>

Here's the CSS code

.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; }
}
*/

And finally, the JavaScript code

// 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();
}

The javascript code will help you fix the CSS error you had above.

I hope this helps