Ein responsive Webdesign, wobei sich die Subelemente der Navigationsleiste automatisch schliessen sobald ein anderes Submenü geöffnet wird war eine Anforderung des Kunden.
Nun gut, eine Webseite zu gestalten, die neben dem Desktop auch auf einem mobilen Gerät leserlich ist (Responsive), ist nicht sonderlich schwer zu entwickeln. Es bedarf eines Frameworks (wie z.B. Responsive-Nav), das dies erfüllt.
Problemstellung
Die Navigationsliste soll aus den Menü-Elementen Startseite, Über uns, Projekte und Impressum bestehen. Dabei sollen Über uns und Projekte jeweils drei Untermenüs enthalten, die sich automatisch öffnen, sobald man das Menü-Element anklickt. Gleichzeitig sollen sich aber alle anderen Untermenüs wieder schliessen. Dies soll möglichst einfach implementiert werden, sodass das Navigationsmenü auch für ein CMS, wie zum Beispiel WordPress verwendbar ist.
Lösungsansatz
Sobald ein Menü-Element angeklickt wird, schliessen sich automatisch alle Untermenüs. Daraufhin wird geprüft, ob das angeklickte Menü-Element Untermenü-Einträge besitzt. Ist dies der Fall, so werden diese geöffnet.
Die Demoversion kann hier besucht werden.