Menü(s) ein- und ausblenden

HolgerGr

Hallo zusammen,

hat jemand eine Idee wie ich mein(e) Menü(s) via Buttonclick ein- und ausblenden kann? In etwa so wie auf dieser Seite: http://www.lecubi.de/ Lecubi ist allerding mit Typo3 gebaut.

Grüße
Holger

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

helix

Dafür gibt es viele Möglichkeiten, such dir die aus, die dir am meisten zusagt. Geeignetes Suchstichwörter sind „responsive Menü“ „hamburger Menü“ oder auch „Accordion“, „Spoiler“ oder „collapse expand“. All diesen Dingen ist der zugrundeliegende Mechanismus, den ja auch du suchst, gemeinsam.

Technisch geht das über pures HTML und CSS, mit einem kleinen Javascript oder jQuery – oder es gibt auch viele fertige PlugIns, wo dann immer die Frage ist, wie aufwändig es wird, sie für die eigenen Bedürfnisse anzupassen.

Gruß
helix

HolgerGr

Danke, hab's geschafft. Ein fertiges Plugin dafür habe ich allerdings nicht gefunden. Es war aber einfacher als ich dachte. Für alle, die das gleiche Problem haben:

Das JavaScript:

Zitat

<script>
function show(id) {
if(document.getElementById) {
var mydiv = document.getElementById(id);
mydiv.style.display = (mydiv.style.display=='block'?'none':'block');
}
}
</script>

Alles anzeigen

Der Link:

Zitat

<a href="" class="nav-link" onclick="javascript:show('hauptnavi'); return false"></a>

CSS zur Erzeugung des Hotdog-Icons:

Zitat

.nav-link {
position: absolute;
padding-left: 1.25em;
float: right;
display: inline;
}
.nav-link::before {
content: "";
position: absolute;
top: 20px;
left: 0;
width: 60px;
height: 10px;
border-top: 30px double silver;
border-bottom: 10px solid silver;
}

Alles anzeigen

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Menü(s) ein- und ausblenden

Jetzt mitmachen!