Horizontale Navigation a la Suckerfish Javascript Problem

**jojoflower** · 27.02.2010, 12:45

Hallo,

bin neu hier und fange gerade an mit Typolight !
Ich habe ein kleines Problem was ich nicht verstehe.

Wie hier in der Anleitung beschrieben habe ich das Menü nachgebaut.
http://de.contaowiki.org/1/TutorialsSuckerfish

Es funktioniert so weit auch alles. Jetzt wollte ich wie beschrieben noch die unterstützung der älteren Browser durch Javascript realisieren,
doch dies funktioniert bei mir nicht.
Leider habe ich nicht all zuviel Ahnung von JAVASCRIPT.
Mir fällt auf das ich im a <Tag> den Code: onclick="this.blur();"
garnig vorhanden habe (Quelltext im Firebug nachgesehen)

Doch in der Beschreibung "Horizontale Navigation a la Suckerfish"
ist dieser wie folgt vorhanden. habe ich was vergessen einzustellen ?

Code:

1 <div class="mod_navigation block">
 2 
 3 <a href="index.php/startseite.html#skipNavigation_4" class="invisible" title="Navigation überspringen"></a>
 4 
 5 <ul class="level_1">
 6 <li class="active"><p class="active">startseite</p></li>
 7 <li class="submenu"><a href="index.php/seite1.html" title="seite1" class="submenu" onclick="this.blur();">seite1</a>
 8 <ul class="level_2">
 9 <li class="submenu"><a href="index.php/seite1_1.html" title="seite1.1" class="submenu" onclick="this.blur();">seite1.1</a>
10 <ul class="level_3">
11 <li><a href="index.php/seite1_1_1.html" title="seite1.1.1" onclick="this.blur();">seite1.1.1</a></li>
12 </ul>
13 </li>
14 <li><a href="index.php/seite12.html" title="seite1.2" onclick="this.blur();">seite1.2</a></li>
15 </ul>
16 </li>
17 <li><a href="index.php/seite2.html" title="seite2" onclick="this.blur();">seite2</a></li>
18 <li class="submenu"><a href="index.php/seite3.html" title="seite3" class="submenu" onclick="this.blur();">seite3</a>
19 <ul class="level_2">
20 <li><a href="index.php/seite3_1.html" title="seite3.1" onclick="this.blur();">seite3.1</a></li>
21 </ul>
22 </li>
23 </ul>
24 
25 <a id="skipNavigation_4" class="invisible" title="Navigation überspringen"></a>
26 
27 </div>

Danke schon mal im vorraus !

MFG Swen

**jojoflower** · 27.02.2010, 15:07

hier mal noch weitere Erkentnisse:

so sieht der HEAD aus:

Code:

<link rel="stylesheet" href="plugins/mediabox/css/mediabox.css" type="text/css" media="screen" />
<link rel="stylesheet" href="plugins/slimbox/css/slimbox.css" type="text/css" media="screen" />
<link rel="stylesheet" href="basic.css" type="text/css" media="screen" />
<link rel="stylesheet" href="standard.css" type="text/css" media="screen" />
<link rel="stylesheet" href="Navigation_oben.css" type="text/css" media="screen" />
<link rel="stylesheet" href="Navigation_links.css" type="text/css" media="screen" />
<script type="text/javascript" src="plugins/mootools/mootools-core.js"></script>
<script type="text/javascript" src="plugins/mootools/mootools-more.js"></script>
<script type="text/javascript" src="system/modules/mootoolsnav/html/moomenu.js"></script>
<script type="text/javascript" src="plugins/sfhover.js"></script>

so sehen die Links aus:

Code:

<ul class="level_2">
<li class="active first"><span class="active first">Deutschland</span></li>
<li><a href="Wanderreisen_Italien.html" title="Wanderreisen Italien">Italien</a></li>
<li><a href="Wanderreisen_Österreich.html" title="Wanderreisen Österreich">Österreich</a></li>
<li><a href="Wanderreisen_Slowakei.html" title="Wanderreisen Slowakei">Slowakei</a></li>
<li class="last"><a href="Wanderreisen_Tschechien.html" title="Wanderreisen Tschechien" class="last">Tschechien</a></li>
</ul>

so müßte es aussehen:

Code:

<li class="submenu trail menutoggler"><a href="index.php/wander_reisen.html" class="submenu trail" onclick="this.blur();" onmouseover="moomenu_display(0)" onmouseout="moomenu_fire()">Wander Reisen</a>
<ul class="level_2 menuaccord" onmouseover="moomenu_stop()" onmouseout="moomenu_fire()">
<li class=""><a href="index.php/Wanderreisen_Italien.html" onclick="this.blur();">Italien</a></li>

ich habe auch gerade bemerkt das es lokal (Kopie des originals vom Webserver (xampp)) funktioniert ! Verstehe jetzt nicht mehr warum es nicht online auf dem Webserver geht. Zumal es funktioniert bei mootoolsnav als Menü online auf dem Webserver ...hm

cu swen

**MacKP** · 28.02.2010, 01:32

Hallo jojoflower,
benutz einfach dieses Tutorial:
https://community.contao.org/de/show...css+suckerfish

Das ist was neuer und gut erprobt ;-)

Viele Grüße