zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Navileiste ausfahren

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 04.04.2014, 11:37
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.04.2014
Beiträge: 11
Necator befindet sich auf einem aufstrebenden Ast
Standard Navileiste ausfahren

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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 04.04.2014, 13:00
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 02.01.2012
Beiträge: 487
dazzle89 wird schon bald berühmt werden
Standard

dein css-code sieht unvollständig / abgeschnitten aus, fehlt da was?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 04.04.2014, 13:05
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.04.2014
Beiträge: 11
Necator befindet sich auf einem aufstrebenden Ast
Standard

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;

}
Mit Zitat antworten
  #4 (permalink)  
Alt 04.04.2014, 15:29
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 24.06.2010
Beiträge: 528
K.Roland wird schon bald berühmt werden
Standard

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

Geändert von K.Roland (04.04.2014 um 15:44 Uhr)
Mit Zitat antworten
  #5 (permalink)  
Alt 04.04.2014, 15:54
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.04.2014
Beiträge: 11
Necator befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #6 (permalink)  
Alt 04.04.2014, 16:30
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 24.06.2010
Beiträge: 528
K.Roland wird schon bald berühmt werden
Standard

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
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 06:58 Uhr.