CODEWITHSUNDEEP
javascriptjquerycss
Alison Dyer
Alison Dyer

Reputation: 69

Why Does My slideToggle Have A Strange Jump Glitch?

I created a slideToggle menu that for some reason seems to jump around when it slides up and down. The border bottom of the sliding header just flies around and glitches when the menu slides up and down, but otherwise the slideToggle works fine.

I've tried setting the position of the .headermenu to relative as well as hiding the overflow, but neither of these seemed to have fixed the issue. Does slide toggle just not work properly with a border bottom or is the issue in my code?

The glitch is difficult to explain, but the glitch shows in my code snippet, so I suggest you view it to get an understanding of what's happening. Basically the border bottom is bouncing around when the menu slides down.

In order to activate the drop down header you have to click the little broken image in the corner, which will activate the menu (so you can see the glitch in action.)

Is it related to some sort of start height for the animation? Do I need the animation to start at a specific point in the page or is it something else entirely?

$(document).ready(function(){
    $("button").click(function(){
        $(".headermenu").slideToggle();
        $(".headermenu").height('150')
    });
});
* {
  box-sizing: border-box;
}
@font-face {
    font-family: 'monaco';
    src: url('monaco-webfont.woff2') format('woff2'),
         url('monaco-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
a {
  font-family: 'monaco';
  font-size: 16px;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
a:visited {
  color: blue;
}
body {
  margin: 0px;
}
button {
  background: none;
  border: none;
  float: right;
  margin-right: 40px;
  margin-top: 15px;
  padding: 0px;
}
#hamburger {
  padding-top: 2px;
  width: 27px;
}
header {
  background-color: blue;
  border-bottom: solid white 1px;
  color: white;
  float: left;
  height: 60px;
  padding-top: 4px;
  position: fixed;
  width: 100%;
  z-index: 150px;
}
.headermenu {
  background-color: blue;
  border-bottom: solid white 1px;
  color: white;
  display: none;
  font-family: 'monaco';
  height: 200px;
  overflow: hidden;
  padding-top: 40px;
  position: relative;
  width: 100%;
  /*-webkit-transition: all .5s;
  transition: all .5s;
  height: 0;*/
}
.headermenu a {
  color: white;
  float: right;
  padding-right: 40px;
  text-decoration: none;
}
.headermenu a:hover {
  text-decoration: underline;
}
.headermenu a:visited {
  color: white;
}
#headermenuleft {
  float: right;
  line-height: 25px;
  text-align: left;
}
#headermenuleft ul {
  list-style-type: none;
}
#headermenuright {
  float: right;
  line-height: 25px;
  text-align: left;
}
#headermenuright ul {
  list-style-type: none;
}
<!DOCTYPE HTML>
<html>
  <head>
    <link href="css/main.css" rel="stylesheet"/>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
    <script src="js/main.js"></script>
    <title>Why Have There Been No Great Women Artists?</title>
  </head>
  <body>
    <header>
      <button><img id="hamburger" src="images/Menu,_Web_Fundamentals_(White).svg.png"></button>
      <a id="home" href="index.html">Why Have There Been No Great Women Artists?</a>
      <div class="headermenu">
        <div id="headermenuleft">
          <ul>
            <li><a href="./georgia.html">Georgia O'Keeffe</a></li>
            <li><a href="./frida.html">Frida Kahlo</a></li>
            <li><a href="./artemesia.html">Artemisia Gentileschi</a></li>

          </ul>
        </div>
        <div id="headermenuright">
          <ul>
            <li><a href="essay/essay.pdf">The Essay</a></li>
            <li><a href="./judy.html">Judy Chicago</a></li>
            <li><a href="./kara.html">Kara Walker</a></li>
            <li><a href="./mendieta.html">Ana Mendieta</a></li>
          </ul>
        </div>
      </div>
    </header>
  </body>
</html>

Upvotes: 0

Views: 359

Answers (2)

K Scandrett
K Scandrett

Reputation: 16540

The problem is you have a white bottom border in .headermenu. If you remove that that fixes the problem.

There are other issues however, you are using pixels in the z-index, when that parameter only accepts a number.

Also, it doesn't look to me like you need $(".headermenu").height('150');. If you do, then it should be $(".headermenu").height(150); - without the quote around the number of pixels.

EDIT

It appears you need to add top: 6px; to .headermenu (at least to look correct to me in Firefox). I can't tell you why exactly, but it appears to be to do with the hamburger button being floated and not taking up enough vertical height (padding/margin).

$(document).ready(function(){
    $("button").click(function(){
        $(".headermenu").slideToggle();
    });
});
* {
  box-sizing: border-box;
}
@font-face {
    font-family: 'monaco';
    src: url('monaco-webfont.woff2') format('woff2'),
         url('monaco-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
a {
  font-family: 'monaco';
  font-size: 16px;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
a:visited {
  color: blue;
}
body {
  margin: 0px;
}
button {
  background: none;
  border: none;
  float: right;
  margin-right: 40px;
  margin-top: 15px;
  padding: 0px;
}
#essay {
  background-color: white;
  height: 400px;
  padding-top: 60px;
  width: 100%;
}
#essaytext {
  width: 830px;
  margin: auto;
  padding-top: 30px;
}
#gallery {
  background-color: blue;
  height: 1000px;
  width: 100%;
}
#gallery a{
  color: white;
}
#gallery h2 {
  color: white;
  font-size: 28px;
}
#gallerytext {
  margin: auto;
  padding-bottom: 50px;
  padding-top: 50px;
  width: 830px;
}
#grid {
  margin: auto;
  padding-top: 30px;
  width: 830px;
}
#gridone {
  background-color: white;
  color: blue;
  display: block;
  float: left;
  height: 200px;
  padding-top: 20px;
  padding-left: 25px;
  width: 400px;
}
#gridtwo {
  background-color: white;
  color: blue;
  display: block;
  float: right;
  height: 200px;
  padding-top: 20px;
  padding-left: 25px;
  width: 400px;
}
#gridthree {
  background-color: white;
  color: blue;
  display: block;
  float: left;
  height: 200px;
  margin-top: 30px;
  padding-top: 20px;
  padding-left: 25px;
  width: 400px;
}
#gridfour {
  background-color: white;
  color: blue;
  display: block;
  float: right;
  height: 200px;
  margin-top: 30px;
  padding-top: 20px;
  padding-left: 25px;
  width: 400px;
}
#gridfive {
  background-color: white;
  color: blue;
  display: block;
  float: right;
  height: 200px;
  margin-top: 30px;
  padding-top: 20px;
  padding-left: 25px;
  width: 400px;
}
#gridsix {
  background-color: white;
  color: blue;
  display: block;
  float: left;
  height: 200px;
  margin-top: 30px;
  padding-top: 20px;
  padding-left: 25px;
  width: 400px;
}
#hamburger {
  padding-top: 2px;
  width: 27px;
}
header {
  background-color: blue;
  border-bottom: solid red 1px;
  color: white;
  float: left;
  height: 60px;
  padding-top: 4px;
  position: fixed;
  width: 100%;
  z-index: 150;
}
.headermenu {
  background-color: green;
  border-bottom: solid red 1px;
  color: white;
  display: none;
  font-family: 'monaco';
  height: 200px;
  overflow: hidden;
  padding-top: 60px;
  position: relative;
  width: 100%;
  top: 6px;
  /*-webkit-transition: all .5s;
  transition: all .5s;
  height: 0;*/
  z-index: 200;
}
.headermenu a {
  color: white;
  float: right;
  padding-right: 40px;
  text-decoration: none;
}
.headermenu a:hover {
  text-decoration: underline;
}
.headermenu a:visited {
  color: white;
}
#headermenuleft {
  float: right;
  line-height: 25px;
  text-align: left;
}
#headermenuleft ul {
  list-style-type: none;
}
#headermenuright {
  float: right;
  line-height: 25px;
  text-align: left;
}
#headermenuright ul {
  list-style-type: none;
}
#home {
  color: white;
  display: block;
  font-family: 'monaco';
  font-size: 16px;
  padding-left: 40px;
  padding-right: 0px;
  padding-top: 17px;
  margin: auto;
}
h2 {
  color: blue;
  font-family: 'monaco';
  font-size: 28px;
  font-weight: normal;
}
nav#mobile-nav {
    display: none;
    z-index: 100;
    width: 100%;
}
p {
  font-family: 'monaco';
  font-size: 16px;
  line-height: 21px;
}
<!DOCTYPE HTML>
<html>
  <head>
    <link href="css/main.css" rel="stylesheet"/>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
    <script src="js/main.js"></script>
    <title>Why Have There Been No Great Women Artists?</title>
  </head>
  <body>
    <header>
      <button><img id="hamburger" src="images/Menu,_Web_Fundamentals_(White).svg.png"></button>
      <a id="home" href="index.html">Why Have There Been No Great Women Artists?</a>
      <div class="headermenu">
        <div id="headermenuleft">
          <ul>
            <li><a href="./georgia.html">Georgia O'Keeffe</a></li>
            <li><a href="./frida.html">Frida Kahlo</a></li>
            <li><a href="./artemesia.html">Artemisia Gentileschi</a></li>

          </ul>
        </div>
        <div id="headermenuright">
          <ul>
            <li><a href="essay/essay.pdf">The Essay</a></li>
            <li><a href="./judy.html">Judy Chicago</a></li>
            <li><a href="./kara.html">Kara Walker</a></li>
            <li><a href="./mendieta.html">Ana Mendieta</a></li>
          </ul>
        </div>
      </div>
    </header>
  </body>
</html>

Upvotes: 1

Bob Dust
Bob Dust

Reputation: 2460

$(document).ready(function () {
    $("button").click(function () {
        $(".headermenu").slideToggle('slow', function () {
            $(this).height('150');
        });
    });
});
* {
  box-sizing: border-box;
}
@font-face {
    font-family: 'monaco';
    src: url('monaco-webfont.woff2') format('woff2'),
         url('monaco-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
a {
  font-family: 'monaco';
  font-size: 16px;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
a:visited {
  color: blue;
}
body {
  margin: 0px;
}
button {
  background: none;
  border: none;
  float: right;
  margin-right: 40px;
  margin-top: 15px;
  padding: 0px;
}
#essay {
  background-color: white;
  height: 400px;
  padding-top: 60px;
  width: 100%;
}
#essaytext {
  width: 830px;
  margin: auto;
  padding-top: 30px;
}
#gallery {
  background-color: blue;
  height: 1000px;
  width: 100%;
}
#gallery a{
  color: white;
}
#gallery h2 {
  color: white;
  font-size: 28px;
}
#gallerytext {
  margin: auto;
  padding-bottom: 50px;
  padding-top: 50px;
  width: 830px;
}
#grid {
  margin: auto;
  padding-top: 30px;
  width: 830px;
}
#gridone {
  background-color: white;
  color: blue;
  display: block;
  float: left;
  height: 200px;
  padding-top: 20px;
  padding-left: 25px;
  width: 400px;
}
#gridtwo {
  background-color: white;
  color: blue;
  display: block;
  float: right;
  height: 200px;
  padding-top: 20px;
  padding-left: 25px;
  width: 400px;
}
#gridthree {
  background-color: white;
  color: blue;
  display: block;
  float: left;
  height: 200px;
  margin-top: 30px;
  padding-top: 20px;
  padding-left: 25px;
  width: 400px;
}
#gridfour {
  background-color: white;
  color: blue;
  display: block;
  float: right;
  height: 200px;
  margin-top: 30px;
  padding-top: 20px;
  padding-left: 25px;
  width: 400px;
}
#gridfive {
  background-color: white;
  color: blue;
  display: block;
  float: right;
  height: 200px;
  margin-top: 30px;
  padding-top: 20px;
  padding-left: 25px;
  width: 400px;
}
#gridsix {
  background-color: white;
  color: blue;
  display: block;
  float: left;
  height: 200px;
  margin-top: 30px;
  padding-top: 20px;
  padding-left: 25px;
  width: 400px;
}
#hamburger {
  padding-top: 2px;
  width: 27px;
}
header {
  background-color: blue;
  border-bottom: solid white 1px;
  color: white;
  float: left;
  padding-top: 4px;
  position: fixed;
  width: 100%;
  z-index: 150;
}

header > div:first-child
{
  height: 60px;
}

.headermenu {
  background-color: blue;
  border-bottom: solid white 1px;
  color: white;
  display: none;
  font-family: 'monaco';
  height: 200px;
  overflow: hidden;
  padding-top: 40px;
  position: relative;
  width: 100%;
  /*-webkit-transition: all .5s;
  transition: all .5s;
  height: 0;*/
}
.headermenu a {
  color: white;
  float: right;
  padding-right: 40px;
  text-decoration: none;
}
.headermenu a:hover {
  text-decoration: underline;
}
.headermenu a:visited {
  color: white;
}
#headermenuleft {
  float: right;
  line-height: 25px;
  text-align: left;
}
#headermenuleft ul {
  list-style-type: none;
}
#headermenuright {
  float: right;
  line-height: 25px;
  text-align: left;
}
#headermenuright ul {
  list-style-type: none;
}
#home {
  color: white;
  display: block;
  font-family: 'monaco';
  font-size: 16px;
  padding-left: 40px;
  padding-right: 0px;
  padding-top: 17px;
  margin: auto;
}
h2 {
  color: blue;
  font-family: 'monaco';
  font-size: 28px;
  font-weight: normal;
}
nav#mobile-nav {
    display: none;
    z-index: 100;
    width: 100%;
}
p {
  font-family: 'monaco';
  font-size: 16px;
  line-height: 21px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
        <div>
            <button><img id="hamburger" src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d9/Menu,_Web_Fundamentals.svg/2000px-Menu,_Web_Fundamentals.svg.png"></button>
            <a id="home" href="index.html">Why Have There Been No Great Women Artists?</a>
        </div>
        <div class="headermenu">
            <div id="headermenuleft">
                <ul>
                    <li><a href="./georgia.html">Georgia O'Keeffe</a></li>
                    <li><a href="./frida.html">Frida Kahlo</a></li>
                    <li><a href="./artemesia.html">Artemisia Gentileschi</a></li>

                </ul>
            </div>
            <div id="headermenuright">
                <ul>
                    <li><a href="essay/essay.pdf">The Essay</a></li>
                    <li><a href="./judy.html">Judy Chicago</a></li>
                    <li><a href="./kara.html">Kara Walker</a></li>
                    <li><a href="./mendieta.html">Ana Mendieta</a></li>
                </ul>
            </div>
        </div>
    </header>
    <div id="essay">
        <div id="essaytext">
            <h2>The Essay</h2>
            <p>“Why Have There Been No Great Women Artists?” is an essay by Linda Nochlin that details how centuries of oppression and misogyny has led to a male dominated art world. Nochlin explains through her essay how sexism has prevented women from fully being recognized as historically significant artists.</p>
            <a href="essay/essay.pdf">Read The Essay &rarr;</a>
        </div>
    </div>
    <div id="gallery">
        <div id="gallerytext">
            <h2>The Gallery</h2>
            <p>This website is intended to shed a light on the many incredible women in art who have been overshadowed due to their gender. By viewing the gallery you can see the incredible works of women artists whose significant contributions to the art world have been cast aside because of their womanhood.</p>
            <div id="grid">
                <a href="./judy.html">
                    <div id="gridone">
                        "The Dinner Party"<br>
                        Judy Chicago
                    </div>
                </a>
                <a href="./kara.html">
                    <div id="gridtwo">
                        "A Subtlety"<br>
                        Kara Walker
                    </div>
                </a>
                <a href="./mendieta.html">
                    <div id="gridthree">
                        "Alma Silueta en Fuego"<br>
                        Ana Mendieta
                    </div>
                </a>
                <a href="./georgia.html">
                    <div id="gridfour">
                        "Black Iris"<br>
                        Georgia O'Keeffe
                    </div>
                </a>
                <a href="./frida.html">
                    <div id="gridfive">
                        "The Two Fridas"<br>
                        Frida Kahlo
                    </div>
                </a>
                <a href="./artemesia.html">
                    <div id="gridsix">
                        "Judith Slaying Holofernes"<br>
                        Artemisia Gentileschi
                    </div>
                </a>
            </div>
        </div>
    </div>

Upvotes: 1

Related Questions