|
|||
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> 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> 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> 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 18:43 Uhr) |
Sponsored Links |
|
|||
Hallo,
du solltest erstmal dein Quelltext vernünftig einrücken, deine Fehler da beseitigen und vor alledem validiren. Komplette Seite ___________ Gruß, Roland |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Float-Problem? | mischaef | CSS | 33 | 20.10.2010 17:20 |
Vertikale CSS Navigation mit Bildern und Text | macmensa | CSS | 2 | 25.07.2009 17:23 |
Navigation per CSS | dedi02 | CSS | 1 | 09.05.2009 05:37 |
Navigation in CSS datei | Linuxonkel | CSS | 5 | 01.02.2008 10:30 |
Nicht valieder Code von Map24 | sveniboy | (X)HTML | 7 | 06.11.2005 20:19 |