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

user21427607
June 28, 2023
144 views
0 votes
2 Answers

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>

Answers

Chosen as BEST ANSWER

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

(Edit)

Try adding a overflow-y:scroll;

Edit = if your hidden div is on position:absolute, you have to put the exact height of your header , here : top:53px;

$(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;
 top:53px;
 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;
}

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

Please signup or login to give your own answer.

Click here to cancel reply.

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

Answers