Slide Down Box Menu...

[maulwurfmoeger]

Hallo zusammen,

es ist Wochenende, also Bastelzeit bei NOF 

Meine Begeisterung für CSS3 kennt im Moment keine Grenzen, also habe ich mir eine schicke neue Aufgabe herausgesucht: Ich möchte meine Navigationsleiste auffrischen. Als Vorlage dient mir diese Demo

So weit, so gut...irgendwo versteckt sich aber der Fehlerteufel bei mir, denn bei mir tut sich nichts mit den Bildern usw.

Ich habe mich dann im QT bei mir schlau gemacht, da steht was von "verirrtes start script" in rot - also vermute ich mal, dass ich irgendwo einen Fehler gemacht habe.

http://www.anwalt-marx.de/html/test

Wenn jemand die Zeit findet und einen Blick riskiert, freue ich mich über Vorschläge.

Beste Grüße

[nettesekel]

Du hast die Scripts ans Seiten-Ende eingefügt, richtig wäre jedoch das Body-Ende...

Also Zeile 5-71 gehören zwischen zeile 1 und 2...

Code: HTML5

1.  </div>
2. </body>
3. </html>
4.                
5.                 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
6.                 <script type="text/javascript" src="jquery.easing.1.3.js"></script>
7.         <script type="text/javascript">
8.             $(function() {
9.                 $('#sdt_menu > li').bind('mouseenter',function(){
10.                                         var $elem = $(this);
11.                                         $elem.find('img')
12.                                                  .stop(true)
13.                                                  .animate({
14.                                                         'width':'170px',
15.                                                         'height':'170px',
16.                                                         'left':'0px'
17.                                                  },400,'easeOutBack')
18.                                                  .andSelf()
19.                                                  .find('.sdt_wrap')
20.                                              .stop(true)
21.                                                  .animate({'top':'140px'},500,'easeOutBack')
22.                                                  .andSelf()
23.                                                  .find('.sdt_active')
24.                                              .stop(true)
25.                                                  .animate({'height':'170px'},300,function(){
26.                                                 var $sub_menu = $elem.find('.sdt_box');
27.                                                 if($sub_menu.length){
28.                                                         var left = '170px';
29.                                                         if($elem.parent().children().length == $elem.index()+1)
30.                                                                 left = '-170px';
31.                                                         $sub_menu.show().animate({'left':left},200);
32.                                                 }      
33.                                         });
34.                                 }).bind('mouseleave',function(){
35.                                         var $elem = $(this);
36.                                         var $sub_menu = $elem.find('.sdt_box');
37.                                         if($sub_menu.length)
38.                                                 $sub_menu.hide().css('left','0px');
39.                                        
40.                                         $elem.find('.sdt_active')
41.                                                  .stop(true)
42.                                                  .animate({'height':'0px'},300)
43.                                                  .andSelf().find('img')
44.                                                  .stop(true)
45.                                                  .animate({
46.                                                         'width':'0px',
47.                                                         'height':'0px',
48.                                                         'left':'85px'},400)
49.                                                  .andSelf()
50.                                                  .find('.sdt_wrap')
51.                                                  .stop(true)
52.                                                  .animate({'top':'25px'},500);
53.                                 });
54.             });
55.         </script>
56.                
57.     <script type="text/javascript">
58.     jQuery(document).ready(function($){
59.             $(window).scroll(function(){
60.             if ($(this).scrollTop() < 200) {
61.                            $('#smoothup') .fadeOut();
62.           } else {
63.                            $('#smoothup') .fadeIn();
64.           }
65.       });
66.            $('#smoothup').on('click', function(){
67.                    $('html, body').animate({scrollTop:0}, 400);
68.                    return false;
69.                    });
70.    });
71.    </script>

[nettesekel]

Das letzte Script muss auch noch vom Seitenende weg.
Die eingebundene style.css solltest du umbenennen, weil es bereits eine style.css gibt.
Die posts.css wird noch benötigt.
Das verlinkte Javascript wird nicht gefunden. (jquery.easing.1.3.js) 

[maulwurfmoeger]

Ok, ich glaube, ich muss mich mal kurz sortieren...

[maulwurfmoeger]

Also, das letzte script habe ich wegbekommen 

Die eingebundene style.css solltest du umbenennen, weil es bereits eine style.css gibt.

Da verstehe ich nur Bahnhof, sorry 

Ich sehe auf dem server nur eine style.css...

Die posts.css wird noch benötigt.

...post.css - ich habe keinen Plan, worum es da geht 

Und das verlinkte Javascript macht mir Kopfschmerzen (jquery.easing.1.3.js) - ich habe das auf den Server geschoben, warum findet der das nicht 

Zurück auf Start, auf gehts 

Ist das script jetzt eigentlich an der richtigen Stelle? Ich weiß nicht so recht...

Beste Grüße

[nettesekel]

Du hast eine Datei namens style.css aus dieser Navi-Demo entnommen und bei dir eingebunden. Eine der 3 nof-eigenen Styledateien heißt aber ebenfalls style.css. Heißt, in deinem Projekt gibt es zwei gleichnamige Style-Dateien, was nicht so gut ist.
Siehe gelb markierte Zeilen im Auszug aus deinem QT.

Code: HTML5

1. <link rel="stylesheet" href="../assets/style.css" type="text/css" media="screen"/>
2.                
3.    
4.     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
5.      
6.     <style type="text/css">
7.     #smoothup {
8.        height: 40px;
9.        width: 40px;
10.        position:fixed;
11.        bottom:150px;
12.        right:100px;
13.        text-indent:-9999px;
14.        display:none;
15.        background: url("../assets/images/gototop.png");
16.        -webkit-transition-duration: 0.4s;
17.        -moz-transition-duration: 0.4s;
18.        transition-duration: 0.4s;
19.     }
20.     #smoothup:hover {
21.        rotate(360deg);
22.        -moz-transform: rotate(360deg);
23.        -ms-transform: rotate(360deg);
24.        -webkit-transform: rotate(360deg)
25.     }
26.     </style>
27. <script type="text/javascript" src="../js/jquery-1.4.1.min.js"></script>
28. <script type="text/javascript" src="../js/custom.js"></script><script type="text/javascript" src="../js/smoothscroll.js"></script>
29. <style type="text/css">
30.       *{margin:0px;padding:0px;}
31.       #homebutton
32.       {
33.         background:transparent url(../assets/images/home-button.png) no-repeat scroll 0px 0px;
34.         height:170px;
35.         left:0;
36.         position:fixed;
37.         top:190px;
38.         width:40px;
39.       }
40.       div#homebutton:hover
41.       {
42.         background-position:-41px 0px;
43.       }
44.       #homebutton a
45.       {
46.         display:block;
47.         height:170px;
48.         width:40px;
49.       }
50. </style>
51.  
52. <script type="text/javascript">
53. <!--
54. function F_loadRollover(){} function F_roll(){}
55. //-->
56. </script>
57. <script type="text/javascript" src="../assets/jquery.js">
58. </script>
59. <script type="text/javascript" src="../assets/modernizr-custom.js">
60. </script>
61. <script type="text/javascript" src="../assets/jquery-ui.js">
62. </script>
63. <script type="text/javascript" src="../assets/polyfiller.js">
64. </script>
65. <script type="text/javascript" src="../assets/jquery.jcarousel.js">
66. </script>
67. <script type="text/javascript" src="../assets/rollover.js">
68. </script>
69. <link rel="stylesheet" type="text/css" href="../html/fusion.css">
70. <link rel="stylesheet" type="text/css" href="../html/style.css">
71. <link rel="stylesheet" type="text/css" href="../html/site.css">
72. <link rel="stylesheet" type="text/css" href="../html/general_en.css">
73. <link rel="stylesheet" type="text/css" href="../html/nof_jcarousel_skin.css">
74. <link rel="stylesheet" type="text/css" href="../html/MLR.css">

Wegen der js-Datei... auf den Server schieben ist eine Sache, der im QT hinterlegte Pfad ist die Andere. Stimmt beides nicht überein, gibts Probleme.
Gehe in den QT deiner Seite, suche dir den Link zur js-Datei, gehe mit einem Rechtsklick auf den Link (FF), wähle Link-Adresse kopieren. Füge diese Adresse in die Adresszeile deines Browsers ein und schau sie dir an. Dort sucht der Browser das Script. Liegt es dort? Nein! Den Rest schaffst du allein.   


Die posts.css befindet sich als Style-Datei in der von dir verlinkten Demo und scheint für die Funktionalität des Effekts unabdingbar zu sein... also müsstest du diese ebenfalls in dein Projekt einbinden.

[maulwurfmoeger]

Also, tief Luft holen 

 - style.css abgeändert 
 - post.css geregelt, schätze ich mal 
 - bei dieser js Datei bin ich am  - das Problem habe ich erkannt, aber der Lösung bin ich kein Schritt näher gekommen  ich muss das austauschen, aber wie?

[nettesekel]

style.css passt
posts.css passt

Wegen der js-Datei denkst du vermutlich komplizierter als nötig und stehst dir deshalb selbst im Weg.

Nochmal langsam. "Die Seite" benötigt das Script zur korrekten Darstellung der Navi.
Deshalb bindest du das Script in deine Seite ein, indem du eine eine relative Pfadangabe zum Ablageort des Scripts einbindest. Parallel platzierst du das Script auf deinem Server, vorzugsweise dort, wo du es in der Verlinkung platziert zu haben angibst. ;)

Code: HTML5

1. <script type="text/javascript" src="jquery.easing.1.3.js"></script>

Relativ heißt, der angegebene Pfad steht in Bezug zum Ablageort des Dokuments in welchem dieser eingebunden ist.
Das Dokument in dem sich der Link befindet ist eine html-Seite, welche im Ordner "html" auf deinem Server liegt. Dein Pfad sagt src="jquery.easing.1.3.js" >> das Script liegt im selben Ordner wie die html-Seite. Tut es aber nicht, denn es liegt im Root-Verzeichnis. Deine Pfadangabe wäre somit ausschließlich für die Startseite korrekt.

Da wir uns aber aktuell auf einer Unterseite befinden, müsste die Pfadangabe so getsaltet sein, dass der Browser aus dem Ordner html eine Ebene Höher ins Rootverzeichnis geht um dort das Script zu finden src="../jquery.easing.1.3.js".

Alternativ kannst du eine Kopie des Scripts zusätzlich im html-Ordner platzieren, dann ist der Pfad korrekt, wobei ich ihn dann trotzdem um ./ ergänzen würde, also src="./jquery.easing.1.3.js".

Ein reines Pfadproblem... wenn der Knoten mit den relativen Pfaden einmal geplatzt ist, wirst du bei solchen Problemen nur noch lächeln. 

[maulwurfmoeger]

Da schreibe ich in meinem Tutorial selber über die richtige Zuordnung bei der Pfadangabe, und dann setze ich mich wieder in dieses Nest . Aber aus Fehlern lernt man ja bekanntlich, und du hast Recht, dass Ding wird in naher Zukunft mit einem Lächeln abgespeist 

Jetzt klappt es! Besten Dank!

[nettesekel]

Na das sieht doch mal richtig flott aus...

[maulwurfmoeger]

Hallo zusammen,

weil ich mal wieder munter am basteln bin, hat sich irgendwo bei mir ein Fehler eingeschlichen. Mein tolles Drop Sown Menü ist auf den Unterseiten dahin...und ich frage mich seit 2 Tagen, woran das liegt, ich bekomme das Ding nicht zum laufen.

Hier ist das "kaputte" Ding:

Testseite

Hier schnurrt die Katze...

...läuft

Bin für jeden Hinweis dankbar  Beste Grüße

[nettesekel]

Muss ich mir mal in Ruhe ansehen. Im Moment erschlägt mich der Code ein wenig den ich da vergleichen muss. Du hast mit der Zeit sehr viele externe Anwendungen in deiner Seite. Du solltest dir vielleicht angewöhnen, deine Einfügungen zu kommentieren, damit man/du besser erkennen kann/st, was wofür eingefügt wurde.

Also z.B. so:

Code: HTML5

1. <!-- Beginn Menü-Scripts -->
2. Hier deine Einfügung
3. <!-- Ende Menü-Scripts -->
4.  
5. <!-- Beginn Galerie-Scripts -->
6. Hier deine Einfügung
7. <!-- Ende Galerie-Scripts -->

Ich melde mich, wenn ich fündig bin... werds vermutlich aber erst morgen schaffen.

[maulwurfmoeger]

Ich danke dir...und aufräumen muss ich auf jeden Fall, es wird alles zu unübersichtlich. Ich suche mal weiter, vielleicht erspare ich dir die Arbeit 

[nettesekel]

Ich suche mal weiter, vielleicht erspare ich dir die Arbeit 

Zu spät... 

Code: HTML5

1. <script type="text/javascript" src="jquery.easing.1.3.js"></script>

Der dazu gehörenden Link...
also, da wird das Script gesucht... http://www.anwalt-marx.de/html/jquery.easing.1.3.js

Und hier liegt es... http://www.anwalt-marx.de/jquery.easing.1.3.js

Versuchs mal damit:

Code: HTML5

1. <script type="text/javascript" src="../jquery.easing.1.3.js"></script>

[maulwurfmoeger]

...eine Pfadproblem  - es ist nur eine Frage der Zeit, bis ich das endlich raffe 

Ich danke dir vielmals, läuft jetzt wieder. Nun mache ich mich mal ans aufräumen der HP.

Schönes Wochenende