Nederlands Ondersteuningsforum :
Wilt u reageren op dit bericht? Maak met een paar klikken een account aan of log in om door te gaan.

Transition

2 plaatsers

Vorige onderwerp Volgende onderwerp Ga naar beneden

Opgeloste Topic Transition

Bericht van Chukia do 18 feb 2016 - 22:54

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 ^^.


Laatst aangepast door Chukia op vr 19 feb 2016 - 16:53; in totaal 1 keer bewerkt

Terug naar boven Terug naar beneden

Chukia

Chukia
Nieuw Forumlid

Vrouw
Berichten : 36
Registratie : 22-09-15
Oprichter : Ja
Templates : Ja
CSS : Ja

Lid sinds +5 jaar
U bent al meer dan 5 jaar lid
200 berichten of meer gepost
Je hebt 200 berichten of meer gepost
Feestdagen 2022
Fijne Feestdagen namens team Actieforum!
Feestdagen 2023
Fijne Feestdagen namens team Actieforum!

http://gemhearted.actieforum.com



Chukia is bedankt door de starter van dit topic.

Opgeloste Topic Re: Transition

Bericht van 10spetter10 vr 19 feb 2016 - 15:59

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.

Terug naar boven Terug naar beneden

10spetter10

10spetter10
Superactief Forumlid

Man
Berichten : 1222
Leeftijd : 27
Registratie : 08-07-12
Oprichter : Ja
Templates : Ja
CSS : Ja

Lid sinds +10 jaar
U bent al meer dan 10 jaar lid
1000 berichten of meer gepost
Je hebt 1000 berichten of meer gepost
Feestdagen 2022
Fijne Feestdagen namens team Actieforum!
Oud Actieforum Medewerker
Deze gebruiker is een oud Actieforum medewerker.
Feestdagen 2023
Fijne Feestdagen namens team Actieforum!




10spetter10 is bedankt door de starter van dit topic.

Opgeloste Topic Re: Transition

Bericht van Chukia vr 19 feb 2016 - 16:10

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?

Terug naar boven Terug naar beneden

Chukia

Chukia
Nieuw Forumlid

Vrouw
Berichten : 36
Registratie : 22-09-15
Oprichter : Ja
Templates : Ja
CSS : Ja

Lid sinds +5 jaar
U bent al meer dan 5 jaar lid
200 berichten of meer gepost
Je hebt 200 berichten of meer gepost
Feestdagen 2022
Fijne Feestdagen namens team Actieforum!
Feestdagen 2023
Fijne Feestdagen namens team Actieforum!

http://gemhearted.actieforum.com



Chukia is bedankt door de starter van dit topic.

Opgeloste Topic Re: Transition

Bericht van 10spetter10 vr 19 feb 2016 - 16:24

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.

Terug naar boven Terug naar beneden

10spetter10

10spetter10
Superactief Forumlid

Man
Berichten : 1222
Leeftijd : 27
Registratie : 08-07-12
Oprichter : Ja
Templates : Ja
CSS : Ja

Lid sinds +10 jaar
U bent al meer dan 10 jaar lid
1000 berichten of meer gepost
Je hebt 1000 berichten of meer gepost
Feestdagen 2022
Fijne Feestdagen namens team Actieforum!
Oud Actieforum Medewerker
Deze gebruiker is een oud Actieforum medewerker.
Feestdagen 2023
Fijne Feestdagen namens team Actieforum!




10spetter10 is bedankt door de starter van dit topic.

Opgeloste Topic Re: Transition

Bericht van Chukia vr 19 feb 2016 - 16:33

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

Terug naar boven Terug naar beneden

Chukia

Chukia
Nieuw Forumlid

Vrouw
Berichten : 36
Registratie : 22-09-15
Oprichter : Ja
Templates : Ja
CSS : Ja

Lid sinds +5 jaar
U bent al meer dan 5 jaar lid
200 berichten of meer gepost
Je hebt 200 berichten of meer gepost
Feestdagen 2022
Fijne Feestdagen namens team Actieforum!
Feestdagen 2023
Fijne Feestdagen namens team Actieforum!

http://gemhearted.actieforum.com



Chukia is bedankt door de starter van dit topic.

Opgeloste Topic Re: Transition

Bericht van 10spetter10 vr 19 feb 2016 - 16:49

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;
}

Terug naar boven Terug naar beneden

10spetter10

10spetter10
Superactief Forumlid

Man
Berichten : 1222
Leeftijd : 27
Registratie : 08-07-12
Oprichter : Ja
Templates : Ja
CSS : Ja

Lid sinds +10 jaar
U bent al meer dan 10 jaar lid
1000 berichten of meer gepost
Je hebt 1000 berichten of meer gepost
Feestdagen 2022
Fijne Feestdagen namens team Actieforum!
Oud Actieforum Medewerker
Deze gebruiker is een oud Actieforum medewerker.
Feestdagen 2023
Fijne Feestdagen namens team Actieforum!




10spetter10 is bedankt door de starter van dit topic.

Opgeloste Topic Re: Transition

Bericht van Chukia vr 19 feb 2016 - 16:53

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

Terug naar boven Terug naar beneden

Chukia

Chukia
Nieuw Forumlid

Vrouw
Berichten : 36
Registratie : 22-09-15
Oprichter : Ja
Templates : Ja
CSS : Ja

Lid sinds +5 jaar
U bent al meer dan 5 jaar lid
200 berichten of meer gepost
Je hebt 200 berichten of meer gepost
Feestdagen 2022
Fijne Feestdagen namens team Actieforum!
Feestdagen 2023
Fijne Feestdagen namens team Actieforum!

http://gemhearted.actieforum.com



Chukia is bedankt door de starter van dit topic.

Opgeloste Topic Re: Transition

Bericht van 10spetter10 vr 19 feb 2016 - 17:04

Geen probleem. Wink

.Transition Hurhad10.Ondersteunings Vraag opgelost en gesloten.

Terug naar boven Terug naar beneden

10spetter10

10spetter10
Superactief Forumlid

Man
Berichten : 1222
Leeftijd : 27
Registratie : 08-07-12
Oprichter : Ja
Templates : Ja
CSS : Ja

Lid sinds +10 jaar
U bent al meer dan 10 jaar lid
1000 berichten of meer gepost
Je hebt 1000 berichten of meer gepost
Feestdagen 2022
Fijne Feestdagen namens team Actieforum!
Oud Actieforum Medewerker
Deze gebruiker is een oud Actieforum medewerker.
Feestdagen 2023
Fijne Feestdagen namens team Actieforum!




10spetter10 is bedankt door de starter van dit topic.

Vorige onderwerp Volgende onderwerp Terug naar boven


Permissies van dit forum:
Je mag geen reacties plaatsen in dit subforum