Transition

Hi,

Ik heb een dropdown menu op mijn forum, maar nu vind ik hem wel heel snel naar beneden 'vallen' zeg maar. Ik wil graag (net zoiets als bij de linkjes mouseovers) dat hij langzaam tevoorschijn komt en langzaam weer verdwijnt. Helaas lukt het mij niet zelf.

Code:

#primary_nav_wrap
{
 margin-top:-96px;
}

#primary_nav_wrap ul
{
 list-style:none;
text-color: #ffffff;
 position:absolute;
 margin:0;
margin-left: -50px;
 padding:0;
display:block;
  transition:4s;
}

#primary_nav_wrap ul a
{
 display:block;
 color:#ffffff;
text-decoration:none;
font-weight:10;
 font-size:10px;
 line-height:32px;
 padding:0 15px;
 font-family: verdana;
font-color: #ffffff;
}

#primary_nav_wrap ul li
{
 position:relative;
 float:left;
 margin: 0;
 padding:0;
}

#primary_nav_wrap ul li:hover
{
 background:rgba(0,0,0,0);
  opacity: 0.7;
    filter: alpha(opacity=70); /* For IE8 and earlier */
}

#primary_nav_wrap ul li:hover
{
  transition: background-color 5s ease-in-out;
  background-color: #000;
}
#primary_nav_wrap ul ul
{
 display:none;
 position:absolute;
 top:100%;
 left:0px;
 background:rgba(0,0,0,0.9);
 padding:0;
margin-top: 0px;
  margin-left: 10px;
}

#primary_nav_wrap ul ul li
{
 float:none;
 width:100px;
}

#primary_nav_wrap ul ul a
{
 line-height:100%;
 padding:10px 15px;
display:block;
 color:#ffffff;
margin-top: -5px;
}

#primary_nav_wrap ul ul ul
{
 top:70px;
 left:100%
}

#primary_nav_wrap ul li:hover > ul
{
 display:block
}

.hover-box {
position:left;
}

.hb-content {
background:rgba(255,255,255,0.0);
border:0px solid #CCC;
position:absolute;
z-index:1;
left: 50px;
height: 0px;
top: 60px;
width: 600px;
opacity: 0,0%;
height: 0px;
}

.hover-box:hover .hb-content {
opacity: 0,5%;
height: 120px;
}

alvast bedankt voor het kijken ernaar ^^.

Je kan eens kijken of deze code voldoet aan je idee:

Code:

#primary_nav_wrap {
    margin-top: -93px;
}
/* eerste niveau */
#primary_nav_wrap  > ul {
    list-style: none;
    margin: 0 0 0 -50px;
    padding: 0;
    position: absolute;
    transition: 0.5s;
}
#primary_nav_wrap > ul a {
    color: #fff;
    font-family: 'verdana';
    font-size: 10px;
    line-height: 28px;
    padding: 0 15px;
    text-decoration: none;
}
#primary_nav_wrap > ul > li {
    float: left;
    margin: 0;
    padding: 0;
    position: relative;
    background-color: rgba(0,0,0,0);
   transition: background-color 0.5s ease-in-out;
   -webkit-transition: background-color 0.5s ease-in-out;
}
#primary_nav_wrap > ul > li:hover {
    background-color: rgba(0,0,0,0.3);
}
/* tweede niveau */
#primary_nav_wrap ul li > ul {
    background: rgba(0, 0, 0, 0.6);
   list-style: none;
    left: 0;
    margin-left: 10px;
    margin-top: 0;
    padding: 0;
    position: absolute;
    top: 100%;
    visibility:  hidden;
    filter: alpha(opacity=00);
    opacity: 0;
   transition: all 0.5s ease 0s, visibility 0s linear 0.5s;
   -webkit-transition: all 0.5s ease 0s, visibility 0s linear 0.5s;
}
#primary_nav_wrap ul li:hover > ul {
    visibility: visible;
    filter: alpha(opacity=1);
    opacity: 1;
   transition-delay: 0s;
   -webkit-transition-delay: 0s;
}
#primary_nav_wrap ul ul li {
    width: 100px;
    background-color: rgba(0,0,0,0);
   transition: background-color 0.5s ease-in-out;
   -webkit-transition: background-color 0.5s ease-in-out;
}
#primary_nav_wrap ul ul li:hover {
    background-color: rgba(0,0,0,0.3);
}
#primary_nav_wrap ul ul a {
    color: #fff;
    display: block;
    line-height: 100%;
    padding: 7px 15px;
}

Het zou het dropdown-menu in je beeld doen vervagen.

Ziet er goed uit, alleen komt het deel dat naar beneden gaat eerder dan dat de tekst een overlay krijgt (voor voorbeeld moet je maar naar de site gaan, ik kan het niet zo goed uitleggen xD: www.sanctuary.actieforum.com) en ik zou dat graag andersom willen c: Kan dat?

Oke, zoek eens naar dit stukje:

Code:

#primary_nav_wrap ul li > ul {
    background: rgba(0, 0, 0, 0.6);
    list-style: none;
    left: 0;
    margin-left: 10px;
    margin-top: 0;
    padding: 0;
    position: absolute;
    top: 100%;
    visibility:  hidden;
    filter: alpha(opacity=00);
    opacity: 0;
    transition: all 0.5s ease 0s, visibility 0s linear 0.5s;
    -webkit-transition: all 0.5s ease 0s, visibility 0s linear 0.5s;
}

en vervang het door:

Code:

#primary_nav_wrap ul li > ul {
    background: rgba(0, 0, 0, 0.6);
    list-style: none;
    left: 0;
    margin-left: 10px;
    margin-top: 0;
    padding: 0;
    position: absolute;
    top: 100%;
    visibility:  hidden;
    filter: alpha(opacity=00);
    opacity: 0;
    transition: all 0.5s ease 0.4s;
    -webkit-transition: all 0.5s ease 0.4s;
}

Je kan de uitsteltijd voor het verschijnen van het dropdown-menu aanpassen door de waarde '0.4s' te wijzigen.

Heb hetzelfde probleem, ze verschijnen nog steeds tegelijkertijd maar hij verdwijnt alleen maar veel later (wat ook niet mooi is xD).

Oeps, kzat ook bij de foute te prutsen. :s

Kzal gewoon nog eens heel de code posten met de goede waarden.

Code:

#primary_nav_wrap {
    margin-top: -93px;
}
/* eerste niveau */
#primary_nav_wrap  > ul {
    list-style: none;
    margin: 0 0 0 -50px;
    padding: 0;
    position: absolute;
    transition: 0.5s;
}
#primary_nav_wrap > ul a {
    color: #fff;
    font-family: 'verdana';
    font-size: 10px;
    line-height: 28px;
    padding: 0 15px;
    text-decoration: none;
}
#primary_nav_wrap > ul > li {
    float: left;
    margin: 0;
    padding: 0;
    position: relative;
    background-color: rgba(0,0,0,0);
  transition: background-color 0.2s ease-in-out;
  -webkit-transition: background-color 0.2s ease-in-out;
}
#primary_nav_wrap > ul > li:hover {
    background-color: rgba(0,0,0,0.3);
}
/* tweede niveau */
#primary_nav_wrap ul li > ul {
    background: rgba(0, 0, 0, 0.6);
  list-style: none;
    left: 0;
    margin-left: 10px;
    margin-top: 0;
    padding: 0;
    position: absolute;
    top: 100%;
    visibility:  hidden;
    filter: alpha(opacity=00);
    opacity: 0;
  transition: all 0.4s ease 0s;
  -webkit-transition: all 0.4s ease 0s;
}
#primary_nav_wrap ul li:hover > ul {
    visibility: visible;
    filter: alpha(opacity=1);
    opacity: 1;
  transition-delay: 0.3s;
  -webkit-transition-delay: 0.3s;
}
#primary_nav_wrap ul ul li {
    width: 100px;
    background-color: rgba(0,0,0,0);
  transition: background-color 0.2s ease-in-out;
  -webkit-transition: background-color 0.2s ease-in-out;
}
#primary_nav_wrap ul ul li:hover {
    background-color: rgba(0,0,0,0.3);
}
#primary_nav_wrap ul ul a {
    color: #fff;
    display: block;
    line-height: 100%;
    padding: 7px 15px;
}

Nu is hij inderdaad helemaal goed, heel erg bedankt weer!

Geen probleem.

..	Ondersteunings Vraag opgelost en gesloten.