darthlaroque darthlaroque - 7 months ago 89
HTML Question

How do I make fixed nav-bar with jQuery slidetoggle method push content down rather than overlap it?

I was wondering if someone out there could help me find a solution to this problem. I'm currently designing a responsive mobile web page and I currently have a fixed navigation bar on scroll with a jQuery slide-toggle method that expands the menu.

My issue is that when I click on the 'menu-trigger' button, instead of pushing the rest of the content down like I would want it to, the menu overlaps the content beneath it.

I've tried searching for answers here and elsewhere, but I couldn't find a definitive answer. I'm sorry if this has already been posted.

I didn't post any code on this post but here is a hypothetical jfiddle I made replicating the same exact issue. I hope someone can help, I'm ready to rip my hair out!!



jQuery(document).ready(function() {

jQuery(".menu-trigger").click(function() {

jQuery(".menu-bar ul").slideToggle();

});

});

/*For Scrolling Purposes*/
body {
background:url(
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAPklEQVQYV2O8dOnSfwYg0NPTYwTRuAAj0QqxmYBNM1briFaIzRbi3UiRZ75uNgUHGbfvabgfsHqGaIXYPAMAD8wgC/DOrZ4AAAAASUVORK5CYII=
) repeat;
height: 2000px;
}


.menu-bar {
position: fixed;
top: 0;
width: 100%;
background: orange;
}

.menu-bar ul {
display: none;
}

.content {
margin-top: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>

<!--Menu Bar Div-->
<div class="menu-bar">
<div class="menu-trigger">
<p>
Button
</p>
</div><!--/Menu Trigger-->
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div><!--/Menu Bar-->

<!--Content Div-->
<div class="content">
<ul>
<li>Some Content</li>
<li>Some Content</li>
<li>Some Content</li>
<li>Some Content</li>
</ul>
</div><!--/Content-->

</body>





Here is the jfiddle link. https://jsfiddle.net/Lq7qqnn9/

Background: Pretty good with HTML and CSS not so much with javascript!

Tom Tom
Answer

One option would be to use a placeholder item instead of a margin on your content. I.E. add a block behind your fixed block that maintains the height with it's fixed overlay.

jQuery(document).ready(function() {

  jQuery(".menu-trigger").click(function() {

    $(".menu-placeholder").css("height", $(".menu-bar").height());
    jQuery(".menu-bar ul").slideToggle({
      progress: function() {

        $(".menu-placeholder").css("height", $(".menu-bar").height());
      }
    });

  });

});
/*For Scrolling Purposes*/

body {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAPklEQVQYV2O8dOnSfwYg0NPTYwTRuAAj0QqxmYBNM1briFaIzRbi3UiRZ75uNgUHGbfvabgfsHqGaIXYPAMAD8wgC/DOrZ4AAAAASUVORK5CYII=
) repeat;
  height: 2000px;
}
.menu-placeholder {
  width: 100%;
  height: 50px;
}
.menu-bar {
  position: fixed;
  top: 0;
  width: 100%;
  background: orange;
}
.menu-bar ul {
  display: none;
}
.content {}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>

  <!--Menu Bar Div-->
  <div class="menu-bar">
    <div class="menu-trigger">
      <p>
        Button
      </p>
    </div>
    <!--/Menu Trigger-->
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </div>
  <!--/Menu Bar-->

  <!--Content Div-->
  <div class="menu-placeholder"></div>

  <div class="content">
    <ul>
      <li>Some Content</li>
      <li>Some Content</li>
      <li>Some Content</li>
      <li>Some Content</li>
    </ul>
  </div>
  <!--/Content-->

</body>