Verzögerung mittels css bei Dropdown-Navi
Verfasst: Do 2. Jan 2014, 13:08
Eine Frage an die CSS Experten.
Ich habe folgendes Menü gesehen, bei welchem beim Öffnen des Dropdowns eine Verzögerung mittels CSS eingebaut wurde.
http://candpgeneration.com/toys/CSS3-dropdown-tut.php#
Der entsprechende Code ist folgender:
Das hätte ich auch gerne bei mir eingebaut. Doch egal wo ich die Zeilen einbaue, ich erreiche keinen solchen Effekt. Kann mir jemand sagen, wie ich das hinbekommen kann?
Hier der CSS Code meiner Dropdown Navi
Ich habe folgendes Menü gesehen, bei welchem beim Öffnen des Dropdowns eine Verzögerung mittels CSS eingebaut wurde.
http://candpgeneration.com/toys/CSS3-dropdown-tut.php#
Der entsprechende Code ist folgender:
Code: Alles auswählen
-webkit-transition: height 0.3s ease-in;
-moz-transition: height 0.3s ease-in;
-o-transition: height 0.3s ease-in;
-ms-transition: height 0.3s ease-in;
transition: height 0.3s ease-in;
Hier der CSS Code meiner Dropdown Navi
Code: Alles auswählen
/******************************************************************************
*
* DROP DOWN Categories
*
******************************************************************************/
a {
-moz-transition:color 0.3s ease-out;
-webkit-transition:color 0.3s ease-out;
-o-transition:color 0.3s ease-out;
transition:color 0.3s ease-out;
}
#box_categories_dropdown a.ExtLink {
color:#FF0000 !important;
background-image: url("../img/icon-neu-2.png") !important;
background-position: 0 5px !important;
background-repeat: no-repeat !important;
display: inline-block;
line-height: 14px;
padding: 10px 0 10px 28px;
width: 112px !important;
}
#box_categories_dropdown {
position: absolute;
top:130px;
bottom: 0;
z-index: 2;
width: 980px;
list-style:none;
margin:12px auto 0px -20px;
height:43px;
background: #f8f8f8 url('../img/grad_menu.png') top left repeat-x;
height: 40px;
font-family: 'Open Sans', arial, sans-serif;
font-weight: 400;
font-size: 15px;
}
.navcontainer {
margin-bottom:10px;
}
#box_categories_dropdown li {
float:left;
display:block;
text-align: left;
position:relative;
padding: 10px 10px 4px 10px;
margin-right:0px;
margin-top:0px;
border:none;
background: url('../img/main_nav_bgr_sep.png') right top no-repeat;
}
#box_categories_dropdown li:hover {
/*border-top: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
border-left: 1px solid #cccccc;
padding: 4px 9px 4px 9px;
Background color and gradients
background: #F4F4F4;
background: -moz-linear-gradient(top, #F7F7F7, #FFFFFF);*/ /*Farbverlauf Registerkarte */
/*background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F7F7F7), to(#FFFFFF));
filter:alpha(opacity=85); -moz-opacity:0.85; opacity:0.85;
/* Rounded corners */
/*-moz-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px; */
background: #f8f8f8 url('../images/grad_menu.png') top left repeat-x;
}
/* Formatierung im Headerbereich */
#box_categories_dropdown li a {
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color: #000;
outline:0;
text-decoration:none;
}
#box_categories_dropdown li a.dropdown_level2 {
font-family: Arial,Tahoma,Verdana;
font-size: 14px;
color: #000000;
display: block;
font-weight: 700;
list-style: none;
outside none;
margin-bottom: 10px;
}
#box_categories_dropdown li:hover a {
color:#000;
text-shadow: 1px 1px 1px #ffffff;
}
#box_categories_dropdown li:hover a.dropdown_level2 {
color:#111;
text-shadow: 1px 1px 1px #ffffff;
}
#box_categories_dropdown li:hover div a {
font-size:13px;
color:#015b86;
}
/* Wird zurzeit nicht benötigt
#box_categories_dropdown li:hover div a.dropdown_level2 {
font-size:14px;
color:#015b86;
}
*/
#box_categories_dropdown li div li:hover {
background: none;
border: 0px;
}
#box_categories_dropdown li div a:hover {
color:#029feb;
}
/* Wird zurzeit nicht benötigt
#box_categories_dropdown li div a.dropdown_level2:hover {
color:#029feb;
}
*/
#box_categories_dropdown .col_1 ul,
#box_categories_dropdown .col_1 li {
margin: 0;
padding: 0;
float: none;
}
#box_categories_dropdown .dropdown_1columns,
#box_categories_dropdown .dropdown_2columns,
#box_categories_dropdown .dropdown_3columns,
#box_categories_dropdown .dropdown_4columns,
#box_categories_dropdown .dropdown_5columns,
#box_categories_dropdown .dropdown_6columns,
#box_categories_dropdown .dropdown_7columns {
margin:4px auto;
float:left;
position: absolute;
left:-999em; /* Hides the drop down */
text-align: left;
padding:10px 5px 10px 5px;
border:1px solid #CCCCCC;
border-top:none;
/* Gradient background */
background:#F4F4F4;
background: -moz-linear-gradient(top, #F7F7F7, #FFFFFF);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F7F7F7), to(#FFFFFF));
/* Rounded Corners */
-moz-border-radius: 0px 5px 5px 5px;
-webkit-border-radius: 0px 5px 5px 5px;
border-radius: 0px 5px 5px 5px;
}
#box_categories_dropdown .dropdown_1columns {
width: 140px;
}
#box_categories_dropdown .dropdown_2columns {
width: 360px;
}
#box_categories_dropdown .dropdown_3columns {
width: 540px;
}
#box_categories_dropdown .dropdown_4columns {
width: 560px;
}
#box_categories_dropdown .dropdown_5columns {
width: 700px;
}
#box_categories_dropdown .dropdown_6columns {
width: 840px;
}
#box_categories_dropdown .dropdown_7columns {
width: 980px;
}
#box_categories_dropdown li:hover .dropdown_1columns,
#box_categories_dropdown li:hover .dropdown_2columns,
#box_categories_dropdown li:hover .dropdown_3columns,
#box_categories_dropdown li:hover .dropdown_4columns,
#box_categories_dropdown li:hover .dropdown_5columns,
#box_categories_dropdown li:hover .dropdown_6columns,
#box_categories_dropdown li:hover .dropdown_7columns {
left:-1px;
top: auto;
/* top:auto; */
}
#box_categories_dropdown .col_1 ,
#box_categories_dropdown .col_2 ,
#box_categories_dropdown .col_3 ,
#box_categories_dropdown .col_4 ,
#box_categories_dropdown .col_5 ,
#box_categories_dropdown .col_6 ,
#box_categories_dropdown .col_7 {
display:inline;
float: left;
position: relative;
margin-left: 5px;
margin-right: 5px;
}
#box_categories_dropdown .col_1 {width:170px;}
#box_categories_dropdown .col_2 {width:270px;}
#box_categories_dropdown .col_3 {width:410px;}
#box_categories_dropdown .col_4 {width:550px;}
#box_categories_dropdown .col_5 {width:690px;}
#box_categories_dropdown .col_6 {width:830px;}
#box_categories_dropdown .col_7 {width:970px;}
#box_categories_dropdown .dropdown_right {
float:left;
margin-right:0px;
}
#box_categories_dropdown li.align_right {
/* Rounded Corners */
-moz-border-radius: 5px 0px 5px 5px;
-webkit-border-radius: 5px 0px 5px 5px;
border-radius: 5px 0px 5px 5px;
}
#box_categories_dropdown li:hover .align_right {
left:auto;
right:-1px;
top:auto;
}