Transition
Nederlands Ondersteuningsforum : :: Hulp & ondersteuning... :: Het uiterlijk van uw forum beheren :: Het uiterlijk van uw forum beheren Archief
Pagina 1 van 1• Deel
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.
alvast bedankt voor het kijken ernaar ^^.
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
Re: Transition
Je kan eens kijken of deze code voldoet aan je idee:
Het zou het dropdown-menu in je beeld doen vervagen.
- 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.
10spetter10- Medaille Forumlid
-
Aantal berichten : 1222
Leeftijd : 23
Registratiedatum : 08-07-12
Oprichter van het forum : Ja
Templates gewijzigd : Ja
CSS : Ja
Re: Transition
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?
Re: Transition
Oke, zoek eens naar dit stukje:
en vervang het door:
Je kan de uitsteltijd voor het verschijnen van het dropdown-menu aanpassen door de waarde '0.4s' te wijzigen.
- 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.
10spetter10- Medaille Forumlid
-
Aantal berichten : 1222
Leeftijd : 23
Registratiedatum : 08-07-12
Oprichter van het forum : Ja
Templates gewijzigd : Ja
CSS : Ja
Re: Transition
Heb hetzelfde probleem, ze verschijnen nog steeds tegelijkertijd maar hij verdwijnt alleen maar veel later (wat ook niet mooi is xD).
Re: Transition
Oeps, kzat ook bij de foute te prutsen. :s
Kzal gewoon nog eens heel de code posten met de goede waarden.
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;
}
10spetter10- Medaille Forumlid
-
Aantal berichten : 1222
Leeftijd : 23
Registratiedatum : 08-07-12
Oprichter van het forum : Ja
Templates gewijzigd : Ja
CSS : Ja
10spetter10- Medaille Forumlid
-
Aantal berichten : 1222
Leeftijd : 23
Registratiedatum : 08-07-12
Oprichter van het forum : Ja
Templates gewijzigd : Ja
CSS : Ja
Nederlands Ondersteuningsforum : :: Hulp & ondersteuning... :: Het uiterlijk van uw forum beheren :: Het uiterlijk van uw forum beheren Archief
Pagina 1 van 1
Permissies van dit forum:
Je mag geen reacties plaatsen in dit subforum