Hallo zusammen,
ich verzweifle gerade bei dem Versuch, ein Dropdown Menü zu implementieren. Es soll sich beim Klick auf das entsprechende Symbol öffnen bzw. wieder schließen. Vorab: Ich habe keine Ahnung von Javascript. Ich bin einer Anleitung von "Net Ninja" auf Youtube gefolgt: https://www.youtube.com/watch?v=FDh7Mdl2oww&t=314s
Ausschnitt aus meiner index.php:
<?php echo '<!DOCTYPE html>'; ?><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>" ><head> <jdoc:include type="head" /> <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" /> <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css" type="text/css" /><meta name="viewport" content="width=device-width, initial-scale=1.0"></head> <div id="wrapper"> <div id="aboveheader"> <jdoc:include type="modules" name="aboveheader" style="xhtml" /></div> <div id="header"> <div id="logo"> <jdoc:include type="modules" name="logo" style="xhtml" /> </div> <div id="user"> <jdoc:include type="modules" name="user" style="xhtml" /> </div> </div> <div id="content"> <div id="menu"> <div id="menuwrapper"> <a class="mobilemenubutton"></a> <jdoc:include type="modules" name="menuwrapper" style="xhtml" /> </div> </div> <div id="news"> <jdoc:include type="modules" name="news" style="xhtml" /> </div> <div id="component"> <jdoc:include type="message" /> <jdoc:include type="component" style="xhtml" /> </div> </div><div id="footer"> <jdoc:include type="modules" name="footer" style="xhtml" /> </div></div>
Das ist der CSS Teil:
.mobilemenubutton { display: block; height: 45px; width: 100%; background: url("../images/mobile_menu_button.png") no-repeat 97% center; background-color: black; cursor: pointer; }div#menu ul { overflow: hidden; background-color: black; height:0; }div#menu ul.open { height: auto;}div#menu ul li { float: none; width: 100%; margin:0;}div#menu ul li a { color: red; padding: 10px; border-bottom: 1px solid red; display: block; margin:0; text-align: left;}
Und das ist das Javascript:
$(document).ready(function(){
$(".mobilemenubutton").on("click", function(){
$("div#menu ul").toggleclass("open");
});
});
Die Idee dahinter in Kurzfassung: Klickt jemand auf den mobilemenubutton, soll die Höhe der Menüliste div#menu ul von "0" (= nicht sichtbar) auf "Auto" (= sichtbar) springen und umgekehrt beim zweiten Klick.
Jquery funktioniert grundsätzlich. Die Einbindung des Scripts habe ich auf mehrere Arten probiert (u.a. mit der Extension Add Custom JS), deswegen gehe ich davon aus, dass es geladen wird, aber nicht so funktioniert wie es soll.
Könnt Ihr mir helfen? Die Seite lautet www.kr-shox.de/krosspower (im Aufbau) und das Dropdown kommt erst, wenn der Viewport weniger als 768px Breite beträgt.
Tausend Dank vorab und viele Grüße
David