Nederlands Ondersteuningsforum :
Welkom op het Nederlandse Ondersteuningsforum van ActieForum.


Om ondersteuning te vragen of om in ťťn van onze andere forumsecties te kunnen posten dien je een account te hebben, bedankt voor het inloggen als je al geregistreerd bent, of registreer direct een account op ons ondersteuningsforum als je dit nog niet gedaan hebt.

Transition

Vorige onderwerp Volgende onderwerp Go down

Transition

Bericht van Chukia op 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

Chukia
Nieuw Forumlid

Vrouw Aantal berichten : 36
Taal : Nederlands
Locatie : ?
Registratiedatum : 22-09-15
Oprichter van het forum : Ja
Templates gewijzigd : Ja
CSS : Ja

Profiel bekijken http://gemhearted.actieforum.com
Chukia is bedankt door de starter van dit topic.

Re: Transition

Bericht van 10spetter10 op 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.


Je mag me altijd een pm sturen wanneer ik iets vergeet af te werken, ook ik ben maar een mens!


Veel Voorkomende Problemen | Forum Tools | Tutorials | Skin Aanvraag | Forum Promotie Goedkeuring | Wachtwoord Hoofd-Beheerder kwijt? | Geen ondersteuning via PM | TIP! Vul je browser, forumversie, forum url en of je gebruikt maakt van templates †en/of CSS in op je profiel! Zo kunnen wij je nog beter helpen!

10spetter10
Beheerder
Beheerder

Man Aantal berichten : 1296
Leeftijd : 19
Taal : Nederlands
Locatie : BelgiŽ
Registratiedatum : 08-07-12
Oprichter van het forum : Ja
Templates gewijzigd : Ja
CSS : Ja

Profiel bekijken
10spetter10 is bedankt door de starter van dit topic.

Re: Transition

Bericht van Chukia op 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?

Chukia
Nieuw Forumlid

Vrouw Aantal berichten : 36
Taal : Nederlands
Locatie : ?
Registratiedatum : 22-09-15
Oprichter van het forum : Ja
Templates gewijzigd : Ja
CSS : Ja

Profiel bekijken http://gemhearted.actieforum.com
Chukia is bedankt door de starter van dit topic.

Re: Transition

Bericht van 10spetter10 op 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.


Je mag me altijd een pm sturen wanneer ik iets vergeet af te werken, ook ik ben maar een mens!


Veel Voorkomende Problemen | Forum Tools | Tutorials | Skin Aanvraag | Forum Promotie Goedkeuring | Wachtwoord Hoofd-Beheerder kwijt? | Geen ondersteuning via PM | TIP! Vul je browser, forumversie, forum url en of je gebruikt maakt van templates †en/of CSS in op je profiel! Zo kunnen wij je nog beter helpen!

10spetter10
Beheerder
Beheerder

Man Aantal berichten : 1296
Leeftijd : 19
Taal : Nederlands
Locatie : BelgiŽ
Registratiedatum : 08-07-12
Oprichter van het forum : Ja
Templates gewijzigd : Ja
CSS : Ja

Profiel bekijken
10spetter10 is bedankt door de starter van dit topic.

Re: Transition

Bericht van Chukia op 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).

Chukia
Nieuw Forumlid

Vrouw Aantal berichten : 36
Taal : Nederlands
Locatie : ?
Registratiedatum : 22-09-15
Oprichter van het forum : Ja
Templates gewijzigd : Ja
CSS : Ja

Profiel bekijken http://gemhearted.actieforum.com
Chukia is bedankt door de starter van dit topic.

Re: Transition

Bericht van 10spetter10 op 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;
}


Je mag me altijd een pm sturen wanneer ik iets vergeet af te werken, ook ik ben maar een mens!


Veel Voorkomende Problemen | Forum Tools | Tutorials | Skin Aanvraag | Forum Promotie Goedkeuring | Wachtwoord Hoofd-Beheerder kwijt? | Geen ondersteuning via PM | TIP! Vul je browser, forumversie, forum url en of je gebruikt maakt van templates †en/of CSS in op je profiel! Zo kunnen wij je nog beter helpen!

10spetter10
Beheerder
Beheerder

Man Aantal berichten : 1296
Leeftijd : 19
Taal : Nederlands
Locatie : BelgiŽ
Registratiedatum : 08-07-12
Oprichter van het forum : Ja
Templates gewijzigd : Ja
CSS : Ja

Profiel bekijken
10spetter10 is bedankt door de starter van dit topic.

Re: Transition

Bericht van Chukia op vr 19 feb 2016 - 16:53

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

Chukia
Nieuw Forumlid

Vrouw Aantal berichten : 36
Taal : Nederlands
Locatie : ?
Registratiedatum : 22-09-15
Oprichter van het forum : Ja
Templates gewijzigd : Ja
CSS : Ja

Profiel bekijken http://gemhearted.actieforum.com
Chukia is bedankt door de starter van dit topic.

Re: Transition

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

Geen probleem. Wink

..Ondersteunings Vraag opgelost en gesloten.


Je mag me altijd een pm sturen wanneer ik iets vergeet af te werken, ook ik ben maar een mens!


Veel Voorkomende Problemen | Forum Tools | Tutorials | Skin Aanvraag | Forum Promotie Goedkeuring | Wachtwoord Hoofd-Beheerder kwijt? | Geen ondersteuning via PM | TIP! Vul je browser, forumversie, forum url en of je gebruikt maakt van templates †en/of CSS in op je profiel! Zo kunnen wij je nog beter helpen!

10spetter10
Beheerder
Beheerder

Man Aantal berichten : 1296
Leeftijd : 19
Taal : Nederlands
Locatie : BelgiŽ
Registratiedatum : 08-07-12
Oprichter van het forum : Ja
Templates gewijzigd : Ja
CSS : Ja

Profiel bekijken
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