Als Anlage die JavaScripte und hier die Erklärung dazu:
Den Ordner jss in den Ordner deines Themes packen.
Dann die Sidebar deines Themes anpassen. Ein Ausschnitt aus meiner sidbar.php
<div class="navigationbox-handle"><div><img class="navigationtoogle" id="linksbutton" src="<?php echo get_bloginfo('stylesheet_directory') ?>/images/toogle_on.png" alt="" onclick="linkswitcher.myswitcher();" /></div><h5>Links</h5></div>
<div class="navigationboxouter" id="linksbox">
<ul class="navigationbox" >
<?php wp_get_links(1);*?>
</ul>
</div>
Wichtig ist der das Bild mit dem Pfeil und die ID (die sollte natürlich einmalig sein für jeden Pfeil, der einen Sidebar-Bereich aus- oder einklappt.
Zusätzlich sollte der Bereich, er dann ein- bzw. ausgeklappt wird, sich in einem Container-Element befinden und auch eine eigene ID haben.
Im Ausschnitt oben hat das Bild die ID "linksbutton". Zusätzlich ist ihm das Event onClick zugewiesen worden: onclick="linkswitcher.myswitcher();
Das Cantainer Element, welches verwaltet werden soll, trägt die ID "linksbox".
Als nächstes folgt jetzt die Anpassung der CSS-Datei. Nützlich dabei ist es, den Elementen noch Klassen zusätzlich zu ihrer ID zu zuweisen, da einige Einstellungen für alle Navigationselemente gelten sollen:
.navigationtoogle {
float: left;
cursor: pointer;
position: relative;
}
Bei der genauen Platzierung der Elemente muss etwas getüftelt werden, bis es passt.
Jetzt kommt der Teil, wo im Header die Skripte aufgerufen und die Navigationsobjekte erzeugt werden:
Dazu in der Datei header.php folgendes nach den Meta-Tags einfügen:
<script type="text/javascript" src="<?php echo get_bloginfo('stylesheet_directory') ?>/jss/prototype.lite.js"></script>
<script type="text/javascript" src="<?php echo get_bloginfo('stylesheet_directory') ?>/jss/moo.fx.js"></script>
<script type="text/javascript" src="<?php echo get_bloginfo('stylesheet_directory') ?>/jss/moo.fx.pack.js"></script>
<script type="text/javascript" src="<?php echo get_bloginfo('stylesheet_directory') ?>/jss/devel.js"></script>
Jetzt fehlt nur noch die Instanzierung der Navigationsobjekte, die direkt im Anschluss folgt:
<script type="text/javascript">
var linkswitcher;
var navigationbuttonon = "<?php echo get_bloginfo('stylesheet_directory') ?>/images/toogle_on.png";
var navigationbuttonoff = "<?php echo get_bloginfo('stylesheet_directory') ?>/images/toogle_off.png";
window.onload = function() {
if ($('linksbox')) {
linkswitcher = new weblies("linksbox", "linksbutton",navigationbuttonon,navigationbuttonoff);
linkswitcher.mystartup();
}
}
</script>
Alles anzeigen
Edit: Fehlende Klammer im letzten Script-Teil ergänzt.
