In my quest to perfect a mobile menu, I encountered an issue with jQuery's slideToggle animation causing jumpiness despite setting specified widths and heights for the element. One potential fix I discovered was to apply overflow: hidden to the toggled div. However, this led me to another problem that seems to be exacerbating the slideToggle issue:
I observed that when I set overflow-y: hidden on my navigation bar, certain elements were cut off unexpectedly. For instance, if I give the nav a height: 240px; overflow: hidden, one would assume there should be no overflowing content to conceal. Instead, in Chrome it cuts off around 102px and in Firefox, the nav doesn't display at all.
I've experimented with setting the CSS in the stylesheet as well as dynamically through JavaScript by calculating the height of the nav's contents. I've attempted clearing the nav. I've tried enclosing it within a div. I've tested various display methods. Unfortunately, none of these approaches seem to resolve the issue.
So, my question is straightforward: What exactly is causing the irregularities in the nav's height? What am I missing here?
While using min-height does provide a workaround, it interferes with the slideToggle effect and doesn't address why merely utilizing height fails to suffice.
For code examples, visit http://codepen.io/cjl750/pen/xRdoRW.
$('header span').click(function(){
$('nav').slideToggle(400);
});html {
font-family: 'Raleway', sans-serif;
}
header {
background-color: mediumaquamarine;
padding: 5px 15px;
}
nav {
font-family: 'Oswald', sans-serif;
color: white;
overflow-y: hidden;
/* display: none; */
height: 240px;
}
#body {
width: 360px;
height: 616px;
overflow-y: scroll;
display: flex;
flex-direction: column;
box-sizing: border-box;
}
main {
background-color: slategray;
display: flex;
flex-direction: column;
}
section, aside {
width: 100%;
box-sizing: border-box;
padding: 0 20px;
}
section {
background-color: powderblue;
}
aside {
background-color: cadetblue;
}
h1, h2, h3 {
font-weight: 400;
}
h2 {
font-size: 1.33em;
}
#slogan {
font-size: 2em;
font-weight: 900;
float: left;
}
header span {
float: right;
margin-top: 5px;
}
header span:hover {
cursor: pointer;
text-decoration: underline;
}
nav ul {
list-style-type: none;
font-size: 1.5rem;
margin: 0;
padding: 0;
}
nav ul li + ul {
display: none;
}
nav ul.topLvl li {
padding: 2.5px 0 2.5px 15px;
background-color: rgba(220,220,220,0.7);
border: 3px outset rgba(255,255,255,0.65);
border-top-style: inset;
border-right-style: inset;
border-right-width: 4.5px;
border-bottom-color: rgba(255,255,255,1);
border-left-width: 4.5px;
}
nav ul.topLvl li:first-of-type {
border-top-width: 4.5px;
}
nav ul.topLvl li:last-of-type {
border-bottom-width: 4.5px;
}
nav ul.topLvl li:hover {
background-color: rgba(220,220,220,0.80);
border-top-style: outset;
border-right-style: outset;
border-bottom-style: inset;
border-left-style: inset;
border-bottom-color: rgba(255,255,255,0.45);
border-top-color: rgba(255,255,255,0.45);
}<div id="body">
<header>
<div id="slogan">Octavian</div>
<span>Menu</span>
</header>
<nav>
<ul class="topLvl">
<li>Giraffes</li>
<ul class="secondLvl">
<li>Tall</li>
<li>Spots</li>
<li>Weird horn things</li>
<li>Head-whacking battles</li>
</ul>
<li>Elephants</li>
<ul class="secondLvl">
<li>Real big</li>
<li>Eat lots of plants</li>
<li>Floppy ears</li>
<li>Get feet stuck in tires</li>
</ul>
<li>Cheetas</li>
<ul class="secondLvl">
<li>Spots</li>
<li>Real fast</li>
<li>Tire out quickly</li>
<li>Gazelle's arch nemesis</li>
</ul>
<li>Vultures</li>
<ul class="secondLvl">
<li>Ominous death circle</li>
<li>Super gnarley stoach acid</li>
<li>Flap, flap, flap</li>
<li>Big wingspan</li>
</ul>
<li>Zebras</li>
<ul class="secondLvl">
<li>Stripy horses</li>
<li>Black and white</li>
<li>Neeeeeiiiiiigh</li>
<li>Big herds</li>
</ul>
</ul>
</nav>
<main>
<section>
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent rutrum iaculis scelerisque. Nulla ligula nibh, venenatis a leo vel, varius tincidunt magna. Nulla consequat justo at lacus sodales ornare. Aenean quis faucibus est.</p>
<p><em>Ut dapibus id justo tempor iaculis. Vestibulum elementum quis diam a consectetur. Nunc pellentesque purus sapien.</em></p>
<p>Phasellus volutpat felis id libero bibendum euismod. Donec urna eros, euismod quis nisl cursus, placerat ultricies nulla. Vivamus finibus neque sit amet vestibulum posuere. Sed euismod, justo nec varius lacinia, tellus eros suscipit velit, sit amet dignissim leo nisi aliquet augue.</p>
<h3>Fusce sagittis eleifend enim</h3>
<p>Egestas sollicitudin. Nam at dui vel risus bibendum fringilla.</p>
<p>Mauris tincidunt nunc lorem, vel mollis sapien sollicitudin id. Nunc aliquam nulla enim, sit amet porta quam euismod a. Sed varius vel ligula quis laoreet. Sed commodo ornare semper. Etiam ac pellentesque erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pretium turpis elit, eu auctor velit suscipit non.</p>
</section>
<aside>
<h2>Dulce et decorum est</h2>
<p>Mauris sit amet eleifend tortor. Praesent vitae aliquam turpis. Quisque auctor maximus ante ac fermentum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur vel fermentum lacus.</p>
<ul>
<li>cras feugiat justo non lacus auctor</li>
<li>eget sollicitudin mi eleifend</li>
<li>quisque pulvinar pretium risus et accumsan</li>
<li>praesent lacus sapien</li>
</ul>
<p>Sed commodo ornare semper. Etiam ac pellentesque erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</aside>
</main>
<link href="https://fonts.googleapis.com/css?family=Oswald|Raleway:400,900" rel="stylesheet">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>