ComputerBase Menü
Aktuelles

Hamburger Menu

Asterix24

Asterix24

Cadet 1st Year
Registriert
Juni 2025
Beiträge
11
Moin,moin, aus Hamburg,
Viele von Euch, werden jetzt aufstöhnen bei diesen Eintrag, aber ich bin am verzweifeln.
Habe schon Stunden und Tage verbracht um mich "Schlau" zu machen, doch ich komme einfach nicht weiter und meine Haare werden immer Grauer ( kein Wunder bei meinen 66 Jahren - lol).
Bisher habe ich mir HTML und CSS, soweit es ging, selber beigebracht, doch scheine ich immer noch ein Anfänger zusein und auch zu bleiben.
Folgendes Problem habe ich:
Ich habe mir ein Hamburger Menu abgekupfert und wollte dieses in meiner Webseite per include Befehl einbauen. Doch das ist nicht das Problem, sondern ich möchte in den abgekupferten Hamburger Menu eine navigation haben, die bei mausklick auf und zu geht sowohl bei der Desktopversion sowie bei der Handyversion.
WER KANN MIR DABEI HELFEN?😒😒🤣🤣
Vielen DANK im voraus für Eure Hilfe💕
Hier nun die Seite die ich bereits bearbeitet habe:

</head>
<body>
</body>
</html>
<!-- Dies ist das "Hamburger Menu" ( Funktion toll - lol )-->

<button class="menu" onclick="this.classList.toggle('opened');this.setAttribute('aria-expanded', this.classList.contains('opened'))" aria-label="Main Menu">
<svg width="4.2em" height="4.2em" viewBox="40 10 20 100">
<path class="line line1" d="M 20,29.000046 H 80.000231 C 80.000231,29.000046 94.498839,28.817352 94.532987,66.711331 94.543142,77.980673 90.966081,81.670246 85.259173,81.668997 79.552261,81.667751 75.000211,74.999942 75.000211,74.999942 L 25.000021,25.000058" />
<path class="line line2" d="M 20,50 H 80" />
<path class="line line3" d="M 20,70.999954 H 80.000231 C 80.000231,70.999954 94.498839,71.182648 94.532987,33.288669 94.543142,22.019327 90.966081,18.329754 85.259173,18.331003 79.552261,18.332249 75.000211,25.000058 75.000211,25.000058 L 25.000021,74.999942" />
</svg>
</button>

<!-- Dies möchte ich gerne einfügen-->

<ul class="menu">
<li><a href="#">Startseite</a></li>
<li><a href="#">Über uns</a></li>
<li><a href="#">Kontakt</a></li>
<!--etc-->

</ul>


<!--Hier die CSS-->

<style>
body {
align-items: center;
display: inline;
justify-content: center;
height: 100vh;
margin: 0;
}
.menu {
background-color: transparent;
border: none;
cursor: pointer;
display: flex;
padding: 0;
}
.line {
fill: none;
stroke: black;
stroke-width: 6;
transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
.line1 {
stroke-dasharray: 60 207;
stroke-width: 6;
}
.line2 {
stroke-dasharray: 60 60;
stroke-width: 6;
}
.line3 {
stroke-dasharray: 60 207;
stroke-width: 6;
}
.opened .line1 {
stroke-dasharray: 90 207;
stroke-dashoffset: -134;
stroke-width: 6;
}
.opened .line2 {
stroke-dasharray: 1 60;
stroke-dashoffset: -30;
stroke-width: 6;
}
.opened .line3 {
stroke-dasharray: 90 207;
stroke-dashoffset: -134;
stroke-width: 6;
}
</style>
 
Ich würde dir zum Starten empfehlen, Bootstrap zu verwenden, da gibt es solche Spielereien bereits. Damit kannst du dann herumspielen und entweder bleibst du dann direkt dabei, oder du kopierst dir genau den Code heraus, den du benötigst. Für eine Website dann natürlich selbst-hosten wegen Datenschutz ;)

Das von Scratch alles neu zu machen ist meines Erachtens nach eher unnötig.

Da gibt es auch direkt Symbole für das Hamburger-Menü etc.

https://getbootstrap.com/docs/5.3/components/navbar/#how-it-works
 
  • Gefällt mir
Reaktionen: AlanK

Maviapril2 ich Danke dir für Deine schnelle Antwort, doch wie schon oben erwähnt, bin ich noch ein Anfänger der gerade mal mit html und css umgehen kann,... und mit Bootstrap und so, keinerlei Ahnung/Interesse hat​

Ergänzung ()

... und im meinem alter habe ich auch kein Interesse mehr wieder was neues zu lernen wenn ich das andere noch nicht mal richtig "drauf" habe🤣😂
 
ich würde auch auf wordpress gehen und eher visuell designen statt von grund auf per code ... das macht man eigentlich nicht mehr.

wenn man das beruflich macht, dann sollte man schon den ein oder anderen code ändern oder erstellen können, wenn es aufwändige projekte sind. aber 90% geht visuell.
 
  • Gefällt mir
Reaktionen: n/a
@Asterix24

1751188265763.png


bitte den verwenden
 

lazsniper Danke für dein Antwort, doch ich mache das nicht beruflich, sondern aus reinem Vergnügen zur Sache selbst - ist halt eines meiner Hobbys . Ich wollte nur das problem behoben haben, das mich seit Tagen quält. Und das so, wie ich es mir ausgemalt habe und nicht etwa mit Bootstrap oder Javascript so was ähnliches - einfach mit html und css code.​

 
@Asterix24 Was ist denn das konkrete Problem? Ich nehme mal an, dass Du das Menü initial nicht angezeigt haben möchtest, sondern nur nach dem Klick auf das Menü-Icon.

Dann solltest Du in Deinem CSS sowas haben wie:

Code: 
.menu {
 display: none;
}

.menu.opened {
 display: block;
}

Voraussetzung dafür ist, dass bei Klick auf das Menü Icon die Klasse "opened" vernünftig getoggled wird.
 

n/a was soll das Bedeuten? ich kann mit dieser Antwort nichts anfangen - bin ich schon zu alt für sowas?!​

 
@Asterix24 nimm deinen Code und gib ihn ChatGPT. Schreibe dazu, dass du gerne ein Hamburgermenü mit Navigation hättest und dass es dir erklären soll, wo das Problem liegt. Bitte es aber, keine Lösung zu erstellen, sondern nur zu erklären. Kannst auch noch hinzufügen, dass du blutiger Anfänger bist :)

Vielleicht kommst du damit weiter und verstehst sogar wie es funktioniert.
 
  • Gefällt mir
Reaktionen: Xes, Snapuman und n/a
Und bitte halte dich mit der Textformatierung zurück! Hervorhebungen wie größerer Text, fetter Text., Farbe, Unterstreichung sind für Überschriften und einzelne Hervorhebungen.

Da ich nicht weiß, wo du dich hast inspirieren lassen, wieso machst du es dir nicht einfach(er) und nutzt die Grundlagen von W3schools: https://www.w3schools.com/howto/howto_js_mobile_navbar.asp ?

Und als Anfänger würde ich empfehlen, dass du formulierst (aufschreiben), welche Elemente du benötigt und dann diese Elemente umsetzt. Die Fortgeschrittenen machen das oftmals (unbewusst) im Kopf und/oder nutzen anderweitige Lösungen zum Entwurf.

Beispiel (kein Anspruch auf Vollständigkeit):
  • Grafik für Hamburger
  • Liste mit Links
  • Funktionalität um die Liste mit Links ein-/auszublenden
  • Ein bisschen Styling
 
  • Gefällt mir
Reaktionen: Snapuman und n/a

moin,funkmasterflow ob ich das richtig die Klasse "opened" vernünftig getoggled weiss ich nicht so genau, bedenke bitte das ich ein "Anfänger" bin. Deshalb habe ich den gesamten Code hier raufgeladen. Dennoch bedanke ich mich bei deiner Antwort ich werde mal die code-schnipsel ausprobieren.​

 
Asterix24 schrieb:

n/a was soll das Bedeuten? ich kann mit dieser Antwort nichts anfangen - bin ich schon zu alt für sowas?!​

Zum Vergrößern anklicken....
Probiere es halt aus, das geht so schnell wie Beiträge schreiben.

HTML: 
</head>
<body>
</body>
</html>

Erzeugt solche Blöcke, hilft beim Lesen und Helfende können direkt Zeilennummern referenzieren.
 
  • Gefällt mir
Reaktionen: Snapuman und n/a
floq0r schrieb:
Sind wir jetzt alle hier im Forum um uns gegenseitig zu empfehlen unsere Anliegen mit ChatGPT zu besprechen?
Zum Vergrößern anklicken....
In diesem Fall ist das vielleicht zielführender, als einen HTML/CSS Grundlagenkurs abzuhalten

@Asterix24 Ist deine Tastatur (oder Brille) kaputt, oder warum schreibst du alles fett und groß? Es trägt jedenfalls nicht zum besseren Verständnis der Frage bei
Ergänzung ()

Und auch Satzzeichen sind keine Rudeltiere
 
  • Gefällt mir
Reaktionen: Snapuman und Innensechskant
@floq0r mitnichten. Ob jetzt jemand empfiehlt, auf Bootstrap oder Wordpress umzusteigen (absolut valide Beiträge), oder man sich von jemandem mit unendlicher Geduld sein Anliegen erklären lässt, kommt doch am Ende aufs gleiche raus. Das sind nur Empfehlungen, @Asterix24 muss am Ende ja entscheiden, was er macht.
 
  • Gefällt mir
Reaktionen: n/a

@n/a Sorry habe den Hinweis erst jetzt verstanden Danke habe den code nochmal runtergeladen und ich hoffe das diesmal alles richtig ist​

Code: 
<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <title>#</title>
    
  </head>
  <body>
  </body>
</html>
<!-- Dies ist das "Hamburger Menu" ( Funktion toll - lol )-->

    <button class="menu" onclick="this.classList.toggle('opened');this.setAttribute('aria-expanded', this.classList.contains('opened'))" aria-label="Main Menu">
      <svg width="4.2em" height="4.2em" viewBox="40 10 20 100">
        <path class="line line1" d="M 20,29.000046 H 80.000231 C 80.000231,29.000046 94.498839,28.817352 94.532987,66.711331 94.543142,77.980673 90.966081,81.670246 85.259173,81.668997 79.552261,81.667751 75.000211,74.999942 75.000211,74.999942 L 25.000021,25.000058" />
        <path class="line line2" d="M 20,50 H 80" />
        <path class="line line3" d="M 20,70.999954 H 80.000231 C 80.000231,70.999954 94.498839,71.182648 94.532987,33.288669 94.543142,22.019327 90.966081,18.329754 85.259173,18.331003 79.552261,18.332249 75.000211,25.000058 75.000211,25.000058 L 25.000021,74.999942" />
      </svg>
    </button>
    
<!-- Dies möchte ich gerne einfügen-->   
 
  <ul class="menu">
    <li><a href="#">Startseite</a></li>
    <li><a href="#">Über uns</a></li>
    <li><a href="#">Kontakt</a></li>
    <!--etc-->
    
  </ul>


<!--Hier die CSS-->

<style>
.menu {
 display: none;
}

.menu.opened {
 display: block;
}
body {
  align-items: center;
  display: inline;
  justify-content: center;
  height: 100vh;
  margin: 0;
}
.menu {
  background-color: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  padding: 0;
}
.line {
  fill: none;
  stroke: black;
  stroke-width: 6;
  transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
    stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
.line1 {
  stroke-dasharray: 60 207;
  stroke-width: 6;
}
.line2 {
  stroke-dasharray: 60 60;
  stroke-width: 6;
}
.line3 {
  stroke-dasharray: 60 207;
  stroke-width: 6;
}
.opened .line1 {
  stroke-dasharray: 90 207;
  stroke-dashoffset: -134;
  stroke-width: 6;
}
.opened .line2 {
  stroke-dasharray: 1 60;
  stroke-dashoffset: -30;
  stroke-width: 6;
}
.opened .line3 {
  stroke-dasharray: 90 207;
  stroke-dashoffset: -134;
  stroke-width: 6;
}
</style>
 
@Asterix24

Mit vernünftig getoggled meine ich, dass dem Menü die Klasse "opened" hinzugefügt wird (wenn sie nicht vorhanden ist) oder weggenommen wird (wenn sie bereits da ist.

Du registrierst einen onclick-Handler auf dem Button:
HTML: 
<button class="menu" onclick="this.classList.toggle('opened');this.setAttribute('aria-expanded', this.classList.contains('opened'))" aria-label="Main Menu">

Wenn Du mit F12 die Developer-Tools im Browser aufmachst und Deinen Button "untersuchst", dann sollte bei Klick drauf die Klasse "opened" dort hinter der Klasse "menu" erscheinen bzw. verschwinden.
 
  • Gefällt mir
Reaktionen: n/a
@n/a
nein, meine Brille ist nicht kaputt aber ich hatte ausversehen auf Überschrift1 gehabt - lol😏😏
Ergänzung ()

@funkmasterflow
er scheint richtig getoggle zusein, zumindest wechselt er immer ins opend
Ergänzung ()

Code: 
<ul class="menu">
    <li><a href="#">Startseite</a></li>
    <li><a href="#">Über uns</a></li>
    <li><a href="#">Kontakt</a></li>
    <!--etc-->
    
  </ul>
aber wie füge ich diesen o.g. code in der seite ein??
 
Zuletzt bearbeitet:
Verschiebe mal Deinen neu geschriebenen HTML-Code (also das Menü) bitte innerhalb des <body>-Tags.

Du hast in Zeile 51 eine weitere CSS-Definition

CSS: 
.menu {
  background-color: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  padding: 0;
}

Die überschreibt alles das, was Du vorher definiert hast. Schmeiß das erst einmal weg. Die sorgt aktuell dafür, dass Dein Menü immer geöffnet ist.
 
  • Gefällt mir
Reaktionen: Innensechskant und n/a
Du musst dich einloggen oder registrieren, um hier zu antworten.

Ähnliche Themen

A
iPhone 15 Pro Max: Hamburger Deal gut oder lieber auf iPhone 16 warten?
Antworten
10
Aufrufe
1.431
Ask-me
A
PERKELE
Sidebar/Hamburger Menü im Preisvergleich nicht komplett
Antworten
2
Aufrufe
1.025
PERKELE
PERKELE
S
Startmenü blendet automatisch Hamburger-Menü ein
Antworten
13
Aufrufe
1.432
Schaby
Schaby
2layer
CSS HTML/CSS Dropdown Menu vergrößern
Antworten
1
Aufrufe
2.728
Hakto
Hakto
Geizkragen2017
Header Menü Links: Separate Seite verlinken
Antworten
4
Aufrufe
977
Geizkragen2017
Geizkragen2017
Zurück
Oben

Willkommen auf ComputerBase!

Mit Werbung weiterlesen

Besuche ComputerBase wie gewohnt mit Werbung und Tracking. Die Zustimmung ist jederzeit widerrufbar.

Details im Privacy Center und in der Liste unserer Partner. Ein Widerruf ist möglich in der Datenschutzerklärung.

… oder ComputerBase Pro bestellen

Nutze ComputerBase ohne Werbebanner, Video-Ads und Werbetracking schon für 4 €/Monat oder 36 €/Jahr.

Mehr zu ComputerBase Pro

Bereits Pro-Nutzer? Hier anmelden.

Tracking: Wir und unsere 170 Partner verarbeiten personenbezogene Daten, indem wir mit auf Ihrem Gerät gespeicherten Informationen (z. B. eindeutige Kennungen in Cookies) ein Nutzungsprofil erstellen, um z. B. Anzeigen zu personalisieren. Verarbeitungszwecke: Genaue Standortdaten und Abfrage von Geräteeigenschaften zur Identifikation, Informationen auf einem Gerät speichern und/oder abrufen, Personalisierte Anzeigen und Inhalte, Anzeigen- und Inhaltsmessungen, Erkenntnisse über Zielgruppen und Produktentwicklungen.

Impressum Kontakt Datenschutz