Question

Good evening,

I have a piece of code that toggles a drop-down menu. In the menu, there are some DIVs positioned ‘outside’ their containing DIV. A jsFiddle can be found here: http://jsfiddle.net/nGSPg/3/

The problem is, when the ‘sliding’ animation is playing, the triangles are hidden. My questions are:

• Why is this?
• How do I solve this? I want the triangles to slide down and up just like their containing div.

Thanks in advance,
Silox

Answer 1

Update: The real problem actually is that slide() sets overflow to hidden on the element, so it will hide anything outside of it. When it is finished it will remove it making them appear again.

---

Because the triangles have position:absolute, they will only appear after the slide is finsished.
To fix this I would give them a position: relative and move them outside that box and put it all in a container div that itself gets the slide applied to it.

The updated HTML:

<span class="toggle">Admin</span> |

<div class="slidetoggle">
  <div class="triangle-big"></div>
  <div class="triangle-small"></div>

  <div class="slideHolder"> <a href="" title="" target="_blank">Forum</a>
    <br /> <a href="" title="" target="_blank">Website</a>
  </div>
</div> <span class="toggle">My account</span>

<div class="slidetoggle">
  <div class="triangle-big"></div>
  <div class="triangle-small"></div>

  <div class="slideHolder"> <a href="" title="">My profile</a>
    <br /> <a href="" title="">User panel</a>
    <br /> <a href="" title="">Log out</a>
    <br />
  </div>
</div>​

and the CSS:

.toggle {
    cursor: pointer;
    padding: 2px 2px 0px 3px;
}

.slidetoggle {
    position: absolute;
    display: none;
}

.slideHolder{
    position: relative;
    background-color: white;
    padding:10px;
    top:0px;
    left: 0px;
    border: 1px solid #ccc;
    -moz-box-shadow: 0 0 5px #c8c8c8;
    -webkit-box-shadow: 0 0 5px #c8c8c8;
    box-shadow: 0 0 5px #c8c8c8;
    text-align: left;
}

#login-links {
    padding: 2px 10px 0px 3px;
}

.triangle-big {
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #C8C8C8;
    position: relative;
    top: 6px;
    left: 8px;
    z-index: 99;
}

.triangle-small {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid white;
    position: relative;
    top:1px;
    left: 10px;
    z-index: 100;
}​

Here’s a forked example that shows it working.