zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Animated Navigation with CSS & jQuery (Problem)

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 15.10.2011, 14:30
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 15.10.2011
Beiträge: 1
Softice befindet sich auf einem aufstrebenden Ast
Standard Animated Navigation with CSS & jQuery (Problem)

Hallo Bastler Gemeinde.
Mit meinem ersten Beitrag habe ich direkt eine Frage, die mir momentan wirklich keine Ruhe lässt. Sicherlich wird es eine ganz simple Sache sein, aber kommen wir zur Sache.

Für meine Website habe ich eine Navigation gesucht (die obere) und gefunden. (Tutorial inkl.)

Die Hauptnavigation auf meiner Seite (oben in Blau) kann ich nutzen und betreiben, da gibt es keinerlei Probleme. Eine zweite Navigation allerdings direkt darunter (in Grau) funktioniert nicht mit dem Effekt, wie die obere. Wenn ich die Seite der zweiten Navigation allerdings in einem eigenen Browser Fenster öffne, funktioniert die Navigation tadellos. Hier einmal die Links:
Es gibt einmal einen CSS Code:
Code:
<style type="text/css">
body {
	margin: 0; padding: 0;
	font: 10px normal Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
}
img {border: none;}
ul#topnav {
	margin: 10px 0 20px; 
	padding: 0; 
	list-style: none;	
	font-size: 1.1em;
	clear: both;
	float: left;
	width: 660px;
}
ul#topnav li{
	margin: 0; 
	padding: 0; 
	overflow: hidden; 
	float: left; 
	height:40px;
}
ul#topnav a, ul#topnav span {
	padding: 10px 20px; 
	float: left; 
	text-decoration: none; 
	color: #fff;
	text-transform: uppercase;
	clear: both;
	height: 20px;
	line-height: 20px;
	background: #1d1d1d; 
}
ul#topnav a {	color: #7bc441; }
ul#topnav span {
	display: none;
}

ul#topnav.v2 span{
	background: url(images/a_bg.gif) repeat-x left top;
}
ul#topnav.v2 a{
	color: #555;
	background: url(images/a_bg.gif) repeat-x left bottom;
}
</style>
Einen Javascript Code:
Code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">


$(document).ready(function() {
	
	
	$("#topnav li").prepend("<span></span>"); //Throws an empty span tag right before the a tag
	
	$("#topnav li").each(function() { //For each list item...
		var linkText = $(this).find("a").html(); //Find the text inside of the a tag
		$(this).find("span").show().html(linkText); //Add the text in the span tag
	}); 
	
	$("#topnav li").hover(function() {	//On hover...
		$(this).find("span").stop().animate({ 
			marginTop: "-40" //Find the span tag and move it up 40 pixels
		}, 250);
	} , function() { //On hover out...
		$(this).find("span").stop().animate({
			marginTop: "0" //Move the span back to its original state (0px)
		}, 250);
	});
	
	
});
</script>
Und eben eine DIV Einbindung der Menüs:
Code:
<ul id="topnav" class="v2">
		<li><a href="#1">Home</a></li>
		<li><a href="#1">Articles</a></li>
		<li><a href="#1">Forum</a></li>
		<li><a href="#1">Roster</a></li>
		<li><a href="#1">Infobase</a></li>
		<li><a href="#1">Media</a></li>
		<li><a href="#1">Contact</a></li>
	</ul>
Nun zu dem Problem.
Da sich beide Navigationen in einer eigenen .php Datei befinden, habe ich bei der zweiten Navigation bei jeglichem "topnav" eine 2 drangehangen. (Hat sich sonst irgendwie überschnitten.) Des Weiteren habe ich eine 2x Grafik angelegt. Diese Grafik hat eine Höhe von 80px, wobei der Effekt durch die zweiten 40px erreicht wird. Sprich es werden erst die 40px oben angezeigt und bei einem Mouseover fährt die Grafikhoch und zeigt den unteren Teil der 40px.

Ich bin gerade wirklich am verzweifeln, wieso die Seiten seperat funktionieren, aber nicht zusammen.

Falls das ganze nicht ausführlich genug gewesen ist, oder ich soger relevantere Informationen nicht genannt habe, lasst es mich wissen.

Ich danke schon einmal im Vorraus.

LG,
Softice

~~Edit~~
Jetzt hab ich wieder irgendwo herumgespielt, jetzt geht die erste auch schon nicht mehr.. Bekomme solangsam graue Haare.

Geändert von Softice (15.10.2011 um 17:43 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 15.10.2011, 20:46
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 24.06.2010
Beiträge: 528
K.Roland wird schon bald berühmt werden
Standard

Hallo,

du solltest erstmal dein Quelltext vernünftig einrücken, deine Fehler da beseitigen und vor alledem validiren.

Komplette Seite

___________
Gruß,
Roland
Mit Zitat antworten
Sponsored Links
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
Float-Problem? mischaef CSS 33 20.10.2010 16:20
Vertikale CSS Navigation mit Bildern und Text macmensa CSS 2 25.07.2009 16:23
Navigation per CSS dedi02 CSS 1 09.05.2009 04:37
Navigation in CSS datei Linuxonkel CSS 5 01.02.2008 09:30
Nicht valieder Code von Map24 sveniboy (X)HTML 7 06.11.2005 19:19


Alle Zeitangaben in WEZ +2. Es ist jetzt 22:44 Uhr.