Navileiste ausfahren

Necator · #1 (**permalink**) 04.04.2014, 11:37

Hallo, ich habe versucht, dass Reiter der 2. Stufe bei meiner Navileiste "ausfahren", sprich sie per Standard-hidden und visible bei hover nicht sofort erscheinen, sondern ausfahren. Dies wollte ich erreichen, indem sich sobald die Maus darüber fährt, die Position der Objekte z.b. über 2 Sekunden hinweg 150px nach rechts verschiebt. Leider will es bei mir nicht so recht mit transition klappen.
Mache ich was falsch oder ist das der ganz falsche Weg?

HTML-Code:

<div id="navbar">
  <ul>
<li><a href="#"> Home </a> 
</li> <!-- end of Home li Tag -->
<li><a href="#"> Unsere Leistungen </a> 
<ul>
<li><a href="#"> Strategischer Mehrwert </a>
<ul>
<li><a href="#"> für Unternehmen </a> </li>
<li><a href="#"> für Partner </a> </li>
</ul> <!-- end of Mehrwert ul Tag -->
</li>
<li><a href="#"> Coaching </a> </li>
<li><a href="#"> Beratung </a> </li>
<li><a href="#"> Beirat/Aufsichtsrat </a> </li>
</ul> <!-- end of Leistungen ul Tag -->
</li> <!-- end of Leistungen li Tag -->
<li><a href="#"> Finanzierung </a>
<ul>
<li><a href="#"> Kriterien </a> </li>
<li><a href="#"> Team </a> </li>
<li><a href="#"> Businessplan </a> </li>
<li><a href="#"> Beteiligungsprozess </a> </li>
<li><a href="#"> Finanzierungskonditionen </a> </li>
</ul> <!-- end of Finanzierung ul Tag -->
</li> <!-- end of Finanzierung li Tag -->
<li><a href="#"> Portfolio </a>
<ul>
<li><a href="#"> Portfoliounternehmen </a> </li>
<li><a href="#"> Exits </a> </li>
</ul> <!-- end of Portfolio ul Tag -->
</li> <!-- end of Portfolio li Tag -->
<li><a href="#">  Über uns </a> 
<ul>
<li><a href="#"> Team </a> </li>
<li><a href="#"> Partner </a> </li>
<li><a href="#"> Kontakt </a> </li>
<li><a href="#"> Impressum </a> </li>
</ul> <!-- end of Über uns ul Tag -->
</li> <!-- end of Über uns li Tag -->
</ul> <!-- end of main ul Tag -->
</div>

Code:

#navbar ul li ul li:hover    ul{
	visibility: visible;
	left: 150px;
	top: 0px; 
	position: absolute;
	/* langsames Hinterlegen in grau */
	-moz-transition-property: background-color; 
	-moz-transition-duration: 0.8s;
	
	/* Ausfahren TO-Do */
	-moz-transition-property: left;
	-moz-transition-duration: 2s

Das sollte sich doch nach dem sichtbar werden 150px über 2 Sekunden nach links verschieben, sobald man drüber fährt oder nicht?

Grüße

dazzle89 · #2 (**permalink**) 04.04.2014, 13:00

dein css-code sieht unvollständig / abgeschnitten aus, fehlt da was?

Necator · #3 (**permalink**) 04.04.2014, 13:05

klar, dachte es reicht der Teil, hier der ganze:

Code:

@charset "utf-8";
#navbar {
	position: relative;
	text-align: left;
	margin: 0 auto;
	height: 35x;
	width: 755px;
	z-index: 2;
	
}
#navbar ul {
	margin: 0px;
	padding: 0px;
}

/* Erstellen der Tabs */
#navbar ul li {
	background-color: #333333;
	float: left;
	position: relative;
	list-style-type: none;
}

/* Haupt-Style Elemente und Positionierung als Block */
#navbar ul li a {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 30px;
	text-decoration: none;
	text-align: center;
	display: block;
	height: 30px;
	width: 150px;
	color: white;
}
/* Ausblenden der 2. Stufe */
#navbar ul ul {
	position: absolute;
	visibility: hidden;
	top: 30px;
	
}




/* Sichtbarmachen der 2. Stufe */
#navbar ul li:hover ul {
	visibility: visible;

	

}
/* Sichtbarmachen der 3. Stufe */
#navbar ul li ul li:hover    ul{
	visibility: visible;
	left: 150px;
	top: 0px; 
	position: absolute;
	/* langsames Hinterlegen in grau */
	-moz-transition-property: background-color; 
	-moz-transition-duration: 0.8s;

	
	
	
}

/* Beibehaltung der grauen Farbe */
#navbar ul li:hover {
	background-color: #666;
	/* langsames Hinterlegen in grau */
	-moz-transition-property: background-color; 
	-moz-transition-duration: 0.8s;

}

K.Roland · #4 (**permalink**) 04.04.2014, 15:29

Nicht so:

Code:

}
#navbar ul li:hover {
   background-color: #666; /* langsames Hinterlegen in grau */
   -moz-transition-property: background-color; 
   -moz-transition-duration: 0.8s;
}

Hier hast du die Backgroundfarbe + die Weite festgesetzt.

Code:

}
#navbar ul li a {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 30px;
	text-decoration: none;
	text-align: center;
	display: block;
	height: 30px;
	width: 150px;
	color: white;
}

Du musst a hover das mit geben so:

Code:

}
#navbar ul li a:hover {
   background-color: #666;
   color: red;
   -moz-transition-property: background-color; 
   -moz-transition-duration: 0.8s;
}

Kleine Änderung.
Li hat zwar die Backgroundfarbe aber trotzdem hat das a die Weite.

MfG__________
Roland

Necator · #5 (**permalink**) 04.04.2014, 15:54

erstmal Danke für deine Hilfe Roland, leider habe ich es mithilfe deines Posts es nicht geschafft. Vielleicht hast du mich auch falsch verstanden, Ich wollte, dass die Tabs quasi aus den anderen herausfahren, sprich die Tabs sich überlappen und sobald man darüberfährt, sie ihre Position wechseln und sie dadurch "rausfahren" etwa wie hier.

K.Roland · #6 (**permalink**) 04.04.2014, 16:30

O.K. Must du "Transition" nicht #navbar ul li:hover ul mit geben?
Aber ich weis es nicht sicher. Ich habe mich damit noch nicht beschäftigt.

Code:

}
/* Sichtbarmachen der 2. Stufe */
#navbar ul li:hover ul {
   -moz-transition-property: background-color; 
   -moz-transition-duration: 0.8s;
}

__________
Roland

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Navileiste mit unsortierter Liste - li sollen sich ausdehen	calimero1000	CSS	3	11.02.2014 22:23
Navileiste bei FF	Markensee	(X)HTML	17	05.12.2010 13:31
Hilfe: Navileiste geht nicht	Nino808	(X)HTML	2	19.01.2009 18:12
Navileiste anpassen	iron78	CSS	11	16.09.2007 22:43
CSS vertikale Navileiste	Knedl	CSS	7	10.08.2004 11:51