htmljquerycssnavigationsidenav

How to create a navigation section that falls from top to bottom?


When I open the navigation by clicking the button, the height of the header-overflow changes because it's in percentage. Also the links inside the header-overflow aren't spaced evenly.

I tried the display: flex; flex-direction: column; place-content: space-evenly; but then the links inside the header-overflow aren't scrollable perfectly.

I want to create a navigation section that drops from top to bottom without pushing the content below (overlay on them). The four links should be equally spaced and have a scrollbar when it shrinks small.

$(document).ready(function() {
  $("li.third-link a").click(function() {
    if ($("li.third-link a").hasClass("opened-nav")) {
      $("li.third-link a").removeClass("opened-nav");
      $("div#header-overflow").css("display", "none");
    } else {
      $("li.third-link a").addClass("opened-nav");
      $("div#header-overflow").css("display", "block");
    }
  });
});
body {
  margin: 0;
}

div#header {
  background: #f1f1f1;
  box-shadow: 0 2px 14px #ccc;
  position: sticky;
  top: 0;
  padding: 10px 5px;
}

div#header ul {
  display: flex;
  align-items: center;
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

div#header ul li.third-link {
  display: flex;
  place-content: flex-end;
  flex: 50%;
}

div#header ul li a {
  font-family: sans-serif;
  text-transform: uppercase;
  color: #000;
  font-size: 18px;
  text-decoration: none;
  padding: 6px 18px;
  display: flex;
}

div#header-overflow {
  display: none;
  height: 91%;
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: #111;
  overflow: auto;
}

div#header-overflow a {
  color: #fff;
  text-decoration: none;
  padding: 15px 25px;
  font-size: 28px;
  font-family: sans-serif;
  display: flex;
  align-items: center;
  height: 19%;
}

section {
  padding: 0 15px;
  font-size: 25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<div id="header">
  <ul>
    <li class="first-link">
      <a href="javascript:void(0);">Link 1</a>
    </li>
    <li class="second-link">
      <a href="javascript:void(0);">Link 1</a>
    </li>
    <li class="third-link">
      <a href="javascript:void(0);">Open nav</a>
    </li>
  </ul>
</div>

<div id="header-overflow">
  <a href="javascript:void(1);">Link 1</a>
  <a href="javascript:void(2);">Link 2</a>
  <a href="javascript:void(3);">Link 3</a>
  <a href="javascript:void(4);">Link 4</a>
</div>

<section>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
</section>


Solution

  • $(document).ready(function(){
     $("li.third-link a").click(function(){
      if($("li.third-link a").hasClass("opened-nav")) {
       $("li.third-link a").removeClass("opened-nav");
       $("div#header-overflow").css("height", "0");
      } else {
       $("li.third-link a").addClass("opened-nav");
       $("div#header-overflow").css("height", "calc(100% - 53px)");
      }
     });
    });
    body {margin: 0;}
    
    div#header {
     background: #f1f1f1;
     box-shadow: 0 2px 14px #ccc;
     position: sticky;
     top: 0;
     padding: 10px 5px;
    }
    
    div#header ul {
     display: flex;
     align-items: center;
     list-style-type: none;
     margin: 0;
     padding: 0;
     width: 100%;
    }
    
    div#header ul li.third-link {
     display: flex;
     place-content: flex-end;
     flex: 50%;
    }
    
    div#header ul li a {
     font-family: sans-serif;
     text-transform: uppercase;
     color: #000;
     font-size: 18px;
     text-decoration: none;
     padding: 6px 18px;
     display: flex;
    }
    
    div#header-overflow {
     height: 0;
     width: 100%;
     position: fixed;
     bottom: 0;
     left: 0;
     background-color: #111;
     overflow: auto;
     transition: all 1s;
     display: flex;
     flex-direction: column;
    }
    
    div#header-overflow a {
     color: #fff;
     text-decoration: none;
     padding: 15px 25px;
     font-size: 28px;
     font-family: sans-serif;
     display: flex;
     align-items: center;
     flex: auto;
    }
    
    section {
     padding: 0 15px;
     font-size: 25px;
    }
    <div id="header">
     <ul>
      <li class="first-link">
       <a href="javascript:void(0);">Link 1</a>
      </li>
      <li class="second-link">
       <a href="javascript:void(0);">Link 1</a>
      </li>
      <li class="third-link">
       <a href="javascript:void(0);">Open nav</a>
      </li>
     </ul>
    </div>
    
    <div id="header-overflow">
     <a href="javascript:void(1);">Link 1</a>
     <a href="javascript:void(2);">Link 2</a>
     <a href="javascript:void(3);">Link 3</a>
     <a href="javascript:void(4);">Link 4</a>
     <a href="javascript:void(4);">Link 5</a>
     <a href="javascript:void(4);">Link 6</a>
    </div>
    
    <section>
     <p>This is a paragraph.</p>
     <p>This is a paragraph.</p>
     <p>This is a paragraph.</p>
     <p>This is a paragraph.</p>
     <p>This is a paragraph.</p>
    </section>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>