navigation drawer opens by pulling down other web blocks

问题

navigation drawer opens by pulling down other web blocks. when it closes blocks come up. additionally drawer menu has occupied more space of my web sites top space. unable to keep blocks near the navigation bar. A big empty space there. But drawer menu works fine. how to solve this issue?

HTML

<html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My web</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
            
  <header>
     <i id="hamburger" class="fa fa-bars"></i>
     <h2>MY WEB</h2>
  </header>
  <nav>
    <a href="#"><i class="fa fa-user-secret"></i><span>A</span></a>
    <a href="#"><i class="fa fa-check-circle-o"></i><span>B</span></a>
    <a href="#"><i class="fa fa-lightbulb-o"></i><span>C</span></a>
    <a href="#"><i class="fa fa-id-badge"></i><span>D</span></a>
    <a href="#"><i class="fa fa-lightbulb-o"></i><span>E</span></a>
    <a href="#"><i class="fa fa-lightbulb-o"></i><span>F</span></a>
  </nav>
            
  <p><span style="font-size: 14pt"><p style="text-align: justify">   <b>Sigiriya
            From Wikipedia, the free encyclopedia</b><br>
            
            &nbsp;&nbsp;&nbsp;&nbsp;Location    Central Province, Sri Lanka
            Coordinates 07°57′25″N 80°45′35″ECoordinates: 07°57′25″N 80°45′35″E
            Elevation   349 metres[1]
            UNESCO World Heritage Site
            Official name: Ancient City of Sigiriya
            Type    Cultural
            Criteria    ii, iii, iv
            Designated  1982 (6th session)
            Reference no.   202
            UNESCO Region   Asia-Pacific
            Sigiriya is located in Sri LankaSigiriya
            Location of Sigiriya in Sri Lanka
            Sigiriya or Sinhagiri (Lion Rock Sinhala: සීගිරිය, Tamil: சிகிரியா / aசிங்ககிரி, pronounced see-gi-ri-yə) is an ancient rock fortress located in the northern Matale District near the town of Dambulla in the Central Province, Sri Lanka. The name refers to a site of historical and archaeological significance that is dominated by a massive column of rock nearly 200 metres (660 ft) high.[citation needed]
            
            According to the ancient Sri Lankan chronicle the Culavamsa, this site was selected by King Kashyapa (477 – 495 CE) for his new capital. He built his palace on the top of this rock and decorated its sides with colourful frescoes. On a small plateau about halfway up the side of this rock he built a gateway in the form of an enormous lion. The name of this place is derived from this structure — Sīnhāgiri, the Lion Rock (an etymology similar to Sinhapura, the Sanskrit name of Singapore, the Lion City).
            
            The capital and the royal palace was abandoned after the king's death. It was used as a Buddhist monastery until the 14th century.[2] Sigiriya today is a UNESCO listed World Heritage Site. It is one of the best preserved examples of ancient urban planning.[3]
            </p></span>
             </p>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">. 
  </script>
  </body>
</html>

CSS

header, nav {
 background-color: #06C;font-family:'Open Sans';
}
    
header {
  width: 100%;display:flex;align-items:center;
  height: 80px;color:#FFF;justify-content:flex-start;
} /* we use flex display to position the hamburger icon on the side of the AndroiCSS h2 element */
    
#hamburger {
  cursor: pointer;
} /* add the small hand cursor pointer to indicate this element is clickable; it triggers the jQuery on click */

header * {
  margin: 0 15px;
}
  
.fa-bars, header h2 {
  font-size: 28px!important;
}
    
header h2 {
  font-weight: 400!important;
}
    
nav {
  display: flex;flex-direction:column;width:0;align-items:center;
  transition: width 0.2s ease;
}
    
nav.open {
  width: 250px;
  height: 100%;
}
    
nav.close {
  width:0;
}
    
nav * {
  color: #FFF!important;font-family:'Open Sans';font-size:20px!important;margin-right:15px;
}
    
nav a {
  text-decoration:none!important;
  border-top:2px solid gray;width:100%;text-align:left;display:flex;align-items:center;justify-content:center;height:55px;
}
    
nav a:hover {
  background-color:rgba(0, 0, 0, 0.1);
} /* this changes the bg color on hover over the nav element */

Javascript

$("#hamburger").click(function(){
  $("nav").toggleClass('open', 'close');
});
    
$("a").click(function(){
  $("nav").toggleClass('open', 'close');
});

回答1:

Just give an absolute positioning to your header and nav and add this code to your header and nav CSS:

header {
position:absolute;
top:0;left:0;
}

nav {
position:absolute;
top:80px /* which is the height of header... */
left:0;
}

also you can add a wrapping div to your text elements like this :

<div class="text-c">
   <!-- text elements -->
</div>

and then add this css code

.text-c {
  margin-top:150px;
}

working codepen https://codepen.io/larrytherabbit/pen/qBNZpjZ

来源：https://stackoverflow.com/questions/64382711/navigation-drawer-opens-by-pulling-down-other-web-blocks

标签

javascript

html

jquery

css