Verzögerung mittels css bei Dropdown-Navi

[Kopernikus]

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:

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;

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

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

[yogi]

Hallo Kopernikus,

habe es noch nicht ausprobiert, aber wo definierst Du denn von welcher Farbe zu welcher Farbe er die transformation machen soll?

In den Beispielen auf der von Dir verlinkten Seite wird die Background-Color und height geändert - Du änderst jedoch nur Color....

http://www.w3.org/TR/css3-transitions/

[Kopernikus]

Ups, da habe ich mich nun im code vergriffen. Eigentlich möchte ich nicht die Farben ändern, sondern nur ein sanftes Aufgleiten der Dropdown Navi. So wie dies in der oben erwähnten Demo auch gemacht wurde.

Das wäre dann eher

Code: Alles auswählen

transition-delay:0.4s;

Klappt aber leider auch ned

[yogi]

dafür brauchst Du dann diesen Teil:

Code: Alles auswählen

.navigation ul ul {
    -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;
}

wichtig ist aber auch das ohne hover die Höhe zunächst auf Null gesetzt wird:

Code: Alles auswählen

.navigation ul ul{
    ...
    height: 0;
    ...
}

und dann noch die Höhe zu der es Wechseln soll - dies wird im :hover angegeben:

Code: Alles auswählen

.navigation > ul > li:hover ul, .navigation > ul > li > a:hover ul,
.navigation ul ul li:hover > ul, .navigation ul ul li a:hover > ul{
    height:220px; /* need a height to accommodate any tertiary menus */
}

Hier sieht man nun auch das zusammenspiel von transition: height ... und den beiden height Werten für das Wechseln

Obs jetzt alles ist weiß ich jedoch nicht...

[Kopernikus]

Hmmm...

Muss ich dann meine categories_dropdown.html nicht komplett umbauen? Aktuell blicke ich gar nicht mehr durch.

Code: Alles auswählen

{config_load file="$language/lang_$language.conf" section="box_categories_dropdown"}

{if count($CATEGORIES)}
   <ul id="box_categories_dropdown">
   <div class=home_icon1">
   <a href="index.php">
<span class="home_icon2"></span>
</a>
</div>
        {foreach name=loop from=$CATEGORIES item=CAT}
            <li class="{if $CAT.current} active{/if}{if $smarty.foreach.loop.last} dropdown_right{/if}"> <h2> <a href="{$CAT.link}" title="{$CAT.title}">{$CAT.title}</a></h2>
                {if $CAT.children}
                    <div class="dropdown_{$CAT.children|@count}columns{if $smarty.foreach.loop.iteration > (($smarty.foreach.loop.total + 1) / 2)} align_right{/if}">
                        {foreach name=subloop from=$CAT.children item=SUBCAT} 
                             <div class="col_1">
                              <a class="dropdown_level2" href="{$SUBCAT.link}" title="{$SUBCAT.title}">{$SUBCAT.title}</a>
                                <ul>
                                    {foreach name=level3loop from=$SUBCAT.children item=LEVEL3CAT}
                                      <li><div class="navcontainer"><h3><a href="{$LEVEL3CAT.link}" title="{$LEVEL3CAT.title}" class="{$LEVEL3CAT.class}">{$LEVEL3CAT.title}</a></h3></div></li>
                                    {/foreach}
                                </ul>
                            </div>
                        {/foreach}
                    </div>
                {/if}</li>
            {/foreach}
    </ul>
{/if}

[yogi]

ja, die <div>-Tags müssen raus.
und statt

Code: Alles auswählen

.navigation ul

im css solltest Du dann

Code: Alles auswählen

ul#box_categories_dropdown

verwenden.

Auch mußt Du dem Shop beibringen mehrere Ebenen direkt auszugeben - nicht nur die Aktive.

Ansonsten mußte man sich das eher "vor Ort" mal anschauen...

[Kopernikus]

Hi Jörg

Besten Dank für Deine Tipps. Ich habe nun alle divs entfernt und durch span Tags ersetzt. Doch es will und will einfach nicht funktionieren. Soeben habe ich einen Testshop aufgesetzt in welchem Du das Ergebnis sehen kannst.

http://www.engelis-naturshop.ch/test/

Hättest Du mir noch einen Tipp?

Meine categories_dropdown.html sieht nun wie folgt aus:

Code: Alles auswählen

{config_load file="$language/lang_$language.conf" section="box_categories_dropdown"}

{if count($CATEGORIES)}
   <ul id="box_categories_dropdown">
   <a href="index.php/test">
<span class="home_icon2"></span>
</a>

        {foreach name=loop from=$CATEGORIES item=CAT}
            <li class="{if $CAT.current} active{/if}{if $smarty.foreach.loop.last} dropdown_right{/if}"> <h2> <a href="{$CAT.link}" title="{$CAT.title}">{$CAT.title}</a></h2>
                {if $CAT.children}
                    <span class="dropdown_{$CAT.children|@count}columns{if $smarty.foreach.loop.iteration > (($smarty.foreach.loop.total + 1) / 2)} align_right{/if}">
                        {foreach name=subloop from=$CAT.children item=SUBCAT} 
                             <span class="col_1">
                              <a class="dropdown_level2" href="{$SUBCAT.link}" title="{$SUBCAT.title}">{$SUBCAT.title}</a>
                                <ul>
                                    {foreach name=level3loop from=$SUBCAT.children item=LEVEL3CAT}
                                      <li><span class="navcontainer"><h3><a href="{$LEVEL3CAT.link}" title="{$LEVEL3CAT.title}" class="{$LEVEL3CAT.class}">{$LEVEL3CAT.title}</a></h3></span></li>
                                    {/foreach}
                                </ul>
                            </span>
                        {/foreach}
                    </span>
                {/if}</li>
            {/foreach}
    </ul>
{/if}

Im Prinzip möchte ich nur eine ähnliche Verhaltensweise wie in meinem zukünftigen Blog. Der Blog wird später die Startseite werden und der Kunde soll möglichst wenig vom Übergang zum Shop merken.
Hier entsteht mein zukünftiger Blog: https://www.engelis-naturshop.ch/blog/

[yogi]

Hi,

es bringt nix die <div> Tags durch <span>-Tags zu ersetzten denn auch diese sind nicht im CSS berücksichtigt.
vermutlich benötigt mann die Tags auch gar nicht - daher würde ich diese ersatzlos streichen und evtl. Style-Tags (classs und ID) in das übergeortnete Objekt übernehmen.