Hier zeigen wir euch, wie ihr ein schönes, bugfreies Effekt-Menü mit Hilfe von script.aculo.us zaubern könnt.
Der Nachteil solcher effektvollen Navigationen ist, dass sich diese – ohne spezielle Sicherheitschecks – von selber „kaputt-effekten“. In unserem Script sind einige solcher Sicherheitschecks für ein (fast) reibungsloses Effekt-Menü – wie oben zu sehen.
Das hier zur Verfügung gestellte Script lässt ein Menü via script.aculo.us nach unten und oben blenden. Die „Unternavigation“ steht dabei unter dem eigentlichen Menüpunkt. Falls ihr einen anderen script.aculo.us Effekt wünscht, müsst ihr lediglich die Effekte in diesem Script wechseln und gegenfalls etwas Feintuning betreiben.
Lasst uns beginnen. An sich ist es sehr einfach diese Script in eine Website einzubinden. Zunächst benötigen wir jedoch die Navigation, auf welcher wir den Effekt anwenden möchten.
Diese erstellen wir beispielsweise wie folgt (Schritt 1 als ZIP-Datei):
<div id="wrap">
<div id="navigation">
<!-- MAIN NAVIGATION -->
<ul id="haupt_navi">
<li><a href="#">Menupunkt 1</a></li>
<li><a href="#">Menupunkt 2</a></li>
<li><a href="#">Menupunkt 3</a></li>
</ul>
<!-- SUB NAVIGATIONEN -->
<ul id="submenu_1">
<li><a href="#">Menupunkt 1</a></li>
<li><a href="#">Menupunkt 2</a></li>
<li><a href="#">Menupunkt 3</a></li>
<li><a href="#">Menupunkt 4</a></li>
</ul>
<ul id="submenu_2">
<li><a href="#">Menupunkt 1</a></li>
<li><a href="#">Menupunkt 2</a></li>
<li><a href="#">Menupunkt 3</a></li>
</ul>
<ul id="submenu_3">
<li><a href="#">Menupunkt 1</a></li>
<li><a href="#">Menupunkt 2</a></li>
</ul>
</div>
</div>Nun müsst ihr das gesamte Menü mit euren CSS Anweisungen formatieren, sodass es genau so aufgeklappt ist, wie es später sein sollte (Schritt 2 als ZIP-Datei).
#wrap {
width:600px;
height:400px;
padding:30px;
margin:40px auto auto auto;
border:1px solid rgb(220,220,220);
background-color:regb(240,240,240);
}
#haupt_navi, #haupt_navi li {
padding:0px;
margin:0px;
list-style-type:none;
}
#haupt_navi li {
float:left;
}
#haupt_navi li a {
display:block;
padding:6px;
width:118px;
color:#fff;
background-color:rgb(60,60,60);
text-decoration:none;
margin-right:1px;
}
#haupt_navi li a:hover {
background-color:rgb(90,90,90);
}
#submenu_1, #submenu_2, #submenu_3 {
position:absolute;
padding:0px;
margin:0px;
list-style-type:none;
margin-top:28px;
}
#submenu_1 li a, #submenu_2 li a, #submenu_3 li a {
display:block;
padding:6px;
width:118px;
color:#fff;
background-color:rgb(120,120,120);
text-decoration:none;
}
#submenu_1 li a:hover, #submenu_2 li a:hover, #submenu_3 li a:hover {
background-color:rgb(160,160,160);
}
#submenu_2 {
margin-left:131px;
}
#submenu_3 {
margin-left:262px;
}Soweit so gut. Als nächstes benötigen wir script.aculo.us. Wäre hier herunterzuladen (oben rechts „Download Source“). Nun entpacken wir das ZIP-Archiv und schieben die Dateien in unseren Ordner (Lokal oder per FTP). Außerdem benötigen wir unsere mit Sicherheitschecks versehene „menu.js„.
Jetzt binden wir diese JavaScript Dateien wie folgt in unser HTML Dokument ein (Schritt 3 als ZIP-Datei):
... <script type="text/javascript" src="js/menu.js"></script> <script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/scriptaculous.js"></script> ...
Gleich ist es so weit. Wir werden unser Menü in Aktion sehen.
Vorher müssen jedoch noch die Menülinks und die Sub-Menüs mit onMouse-Handlern bestückt werden. Und zwar so (Schritt 4 als ZIP-Datei):
<!-- MAIN NAVIGATION -->
<ul id="haupt_navi">
<li><a onmouseover="submenuIn(1)" onmouseout="submenuOut(1)" href="#">Menupunkt 1</a></li>
<li><a onmouseover="submenuIn(2)" onmouseout="submenuOut(2)" href="#">Menupunkt 2</a></li>
<li><a onmouseover="submenuIn(3)" onmouseout="submenuOut(3)" href="#">Menupunkt 3</a></li>
</ul>
<!-- SUB NAVIGATIONEN -->
<ul id="submenu_1" onmouseover="submenuIn(1)" onmouseout="submenuOut(1)">
<li><a href="#">Menupunkt 1</a></li>
<li><a href="#">Menupunkt 2</a></li>
<li><a href="#">Menupunkt 3</a></li>
<li><a href="#">Menupunkt 4</a></li>
</ul>
<ul id="submenu_2" onmouseover="submenuIn(2)" onmouseout="submenuOut(2)">
<li><a href="#">Menupunkt 1</a></li>
<li><a href="#">Menupunkt 2</a></li>
<li><a href="#">Menupunkt 3</a></li>
</ul>
<ul id="submenu_3" onmouseover="submenuIn(3)" onmouseout="submenuOut(3)">
<li><a href="#">Menupunkt 1</a></li>
<li><a href="#">Menupunkt 2</a></li>
</ul>Die gesamte Navigation sollte nun funktionieren. Falls es nicht funktioniert: Hier eine ZIP-Datei. Dort sind nochmals alle Daten gesammelt.
Euch fällt wahrscheinlich auf, dass die Sub-Menüs noch von Anfang an aufgeklappt sind. Das ist auch noch richtig so.
Die Menüs sollen ja höchstwahrscheinlich (in unserem Beispiel zumindest) geschlossen sein und erst beim mouseOver geöffnet werden. Dazu werden wir jetzt ein paar Zeilen JavaScript am Ende (vor dem schließenden body-Tag) des Dokumentes einsetzen (Schritt 5 als ZIP-Datei):
...
<script type="text/javascript">
if(document.getElementById('submenu_1')) { submenuStart(1); }
if(document.getElementById('submenu_2')) { submenuStart(2); }
if(document.getElementById('submenu_3')) { submenuStart(3); }
</script>
</body>Warum wir das Menü per JS Anweisung zuklappen lassen? Der Grund ist einfach: Internetnutzer, welche kein JavaScript aktiviert haben, möchten möglicherweise auch das Menü sehen.
Das ganze kann natürlich nach belieben erweitert werden. Einfach mehrere Menüpunkte erstellen, Sub-Menüs einbauen, per CSS formatieren und darauf achten, dass die onMouse IDs die zum Menü passenden sind.
Andere Effekte können in der menu.js mit mehr oder weniger Anpassung auch umgesetzt werden. Dafür sollte man sich aber schonmal mit JavaScript beschäftigt haben.
Hier noch mal der komplette Download als ZIP-Datei.
Viel Spaß mit dem neuen, (fast) bugfreien Menü!
