创建适合屏幕下拉菜单的最佳方式

Question

Im trying to create a dropdown menu which always covers the exact screen width/height on mobile, not leaving any of the page showing at the bottom like this

http://www.clairehartley.com

What's the best way of going about this?

At the moment I have this:

<div class="module widget-handle mobile-toggle right 
 visible-sm visible-xs"><a id="mobile-nav" href="#">
 <div class="container1" onclick="myFunction(this)">
      <div class="bar1"></div>
      <div class="bar2"></div>
      <div class="bar3"></div>
     <div class="page-id-8122"></div>



                        </div>
</a> 
 <script>
function myFunction(x){
 x.classList.toggle('change');
}
</script>

 </div>
                    <div class="module-group right">
                        <div class="module left">
                            <div class="collapse 
navbar-collapse navbar-ex1-
collapse"><ul id="menu" class="menu"><li id="menu-item- 
15050" class="menu-item menu-item-type-post_type 
menu-item-object-page menu-item-has-children menu- 
item-15050 dropdown"><a title="Contact" 
 href="url">Contact 
<ul role="menu" class=" dropdow
n-menu"><li id="menu-item-12515" class="menu-item 
menu-item-type-post_type menu-item-object-page menu- 
item-12515"><a title="DRAWING DEVELOPMENT" 
href="url">DRAWING DEVELOPMENT</a></li>
<li id="menu-item-2997" class="menu-item menu-item- 
type-post_type menu-item-obje
ct-page menu-item-2997"><a title="SK
ETCHES" url">SKET
CHES</a></li>

And css:

@media(max-width: 768px){.collapse {position: absolute; height: 775px; background-color:white; z-index: 99999 !important; top:75px; left: -50px; line-height: 10px;}} 

This drops down to certain height but doesn't cover screen height as, on some pages, page shows below.

Css for bars animation:

.container1 {
display: inline-block;
cursor: pointer;} 

.bar1, .bar2, .bar3 {
width: 25px;
height: 4px;
background-color: black;
margin: 6px 0;
transition: 0.4s;}
.change .bar1 {
-webkit-transform: rotate(-45deg) 
translate(-9px, 6px);
transform: rotate(-45deg) 
translate(-7px, 6px);}
.change .bar2 {opacity: 0;}
.change .bar3 {
-webkit-transform: rotate(45deg) 
translate(-8px, -8px);
transform: rotate(45deg) 
translate(-8px, -7px);}

Answer 1

1 - Add HTML:

<!-- The overlay -->
<div id="myNav" class="overlay">

  <!-- Button to close the overlay navigation -->
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>

  <!-- Overlay content -->
  <div class="overlay-content">
    <a href="#">About</a>
    <a href="#">Services</a>
    <a href="#">Clients</a>
    <a href="#">Contact</a>
  </div>

</div>

<!-- Use any element to open/show the overlay navigation menu -->
<span onclick="openNav()">open</span>

2 - Add CSS:

/* The Overlay (background) */
.overlay {
  /* Height & width depends on how you want to reveal the overlay (see JS below) */   
  height: 100%;
  width: 0;
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  background-color: rgb(0,0,0); /* Black fallback color */
  background-color: rgba(0,0,0, 0.9); /* Black w/opacity */
  overflow-x: hidden; /* Disable horizontal scroll */
  transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}

/* Position the content inside the overlay */
.overlay-content {
  position: relative;
  top: 25%; /* 25% from the top */
  width: 100%; /* 100% width */
  text-align: center; /* Centered text/links */
  margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
}

/* The navigation links inside the overlay */
.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #818181;
  display: block; /* Display block instead of inline */
  transition: 0.3s; /* Transition effects on hover (color) */
}

/* When you mouse over the navigation links, change their color */
.overlay a:hover, .overlay a:focus {
  color: #f1f1f1;
}

/* Position the close button (top right corner) */
.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}

/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
@media screen and (max-height: 450px) {
  .overlay a {font-size: 20px}
  .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
}

3 - Add JavaScript:

/* Open when someone clicks on the span element */
function openNav() {
  document.getElementById("myNav").style.width = "100%";
}

/* Close when someone clicks on the "x" symbol inside the overlay */
function closeNav() {
  document.getElementById("myNav").style.width = "0%";
}