Asterix24
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:
\n
Startseite
Über uns
Kontakt
\nbody {
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;
}
Maviapril2
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
Asterix24
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 (29. Juni 2025)
... 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??
lazsniper
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.
n-a
@Asterix24
{
"lightbox_close": "Schliessen",
"lightbox_next": "Nächste",
"lightbox_previous": "Vorherige",
"lightbox_error": "Der angeforderte Inhalt kann nicht geladen werden. Bitte versuche es später noch einmal.",
"lightbox_start_slideshow": "Slideshow starten",
"lightbox_stop_slideshow": "Slideshow stoppen",
"lightbox_full_screen": "Vollbild",
"lightbox_thumbnails": "Vorschaubilder",
"lightbox_download": "Download",
"lightbox_share": "Teilen",
"lightbox_zoom": "Vergrössern",
"lightbox_new_window": "Neues Fenster",
"lightbox_toggle_sidebar": "Seitenleiste umschalten"
}
bitte den verwenden
Asterix24
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.
funkmasterflow
@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:
\n
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.
