Anfänger Frage bezgl Hauptmenüs

[RXBeat]

Kann mir jemand helfen zu verstehen wie das Grundgerüst einer Seite aufgebaut wird?
Also damals vor gefühlten 300 Jahren war es einfacher zu verstehen. Man hat mit Frames gearbeitet.
Man hatte eine Index.html die hat im grunde das Kopfbereich wo das menu war immer oben gehalten.
Die untere hälfte war dann home.html. Im Kopfbereich hat man den befehl hinzugefügt das wenn man im Menu was auswählt "Beispielsweise: Über uns"
das es nicht im "_self" sondern im "Home" bereich geändert wird. Dort wird dann die neue html geladen.
Bedeutet, der Kopfbereich wo das Menu ist, hat sich nie geändert.

Mittlerweile benutzt man diese Frames nicht mehr.
Ich will nur einen Kopfbereich wo 4 Punkte auswählbar sind also Waagerechtes menu und daunter soll dann die info dazu kommen.
Wie genau funktioniert das? Das hinzubasteln ist jetzt nicht mein problem, will das nur verstehen.
Ich hab so was mit Tablinks gemacht so wie hier: https://www.w3schools.com/howto/howto_js_full_page_tabs.asp
aber das kann ja nicht so wirklich richtig sein

Aber wenn ich ein richtiges Menu nehme so wie hier z.B.: https://www.w3schools.com/howto/howto_css_menu_horizontal_scroll.asp
Dann weiß ich ehrlich gesagt nicht wie es sich ändern soll wenn ich im Menu auf punk1 oder punk2 klicke. Allzuletzt ist da im code ein feld wo man im HTML Link eingeben muss.
<a href="#home">Home</a> Das meine ich #home ersetzt man ja dann durch home.html.
Was ist denn wenn ich alles nur in einer html haben möchte? Gibt es überhaupt eine möglichkeit mit so einem Menu zu arbeiten?

Wie gesagt, momentan hab ich als Menu nur die obere version also Full Tabs und in den 4 Tabs hab ich dann die jeweiligen infos drinne. Macht man das so?
Gibt es andere möglichkeiten? Ist das vielleicht sogar grundsätzlich verkehrt Tabs als Menus zu verwenden?
Es gibt ja auch den html <navigation> befehl:
Beispiel:
<nav class="menu">
<ul>
<li><a href="#">Startseite</a></li>
<li><a href="#">Hauptseite</a></li>
<li><a href="#">Über</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</nav>
Verpflichtet dieser mich 4 weitere html Daterien anzulegen? Oder hab ich auch hier die möglichkeit es wie im Tab funktion alles in eine html zu tippen?
Wie gesagt, möchte es nur verstehen... ist seltsam wenn man tick mehr kann als Menus erstellen aber die Grundlagen nicht so ganz verstanden hat :)

Thanks

 

[Tronjer]

Verpflichtet dieser mich 4 weitere html Daterien anzulegen? Oder hab ich auch hier die möglichkeit es wie im Tab funktion alles in eine html zu tippen?

Weder noch.

Es gibt nur eine Seite mit vollständigem HTML-Grundgerüst und den verlinkten Stylesheets und Scripts: die index.html. Beim Klick auf einen Link wird innerhalb des Body-Tags die entsprechende Unterseite geladen und die URL im Browser ersetzt.

Früher verwendete man dazu Sprachen wie PHP,. Was allerdings den Nachteil hatte, das jedesmal die komplette Seite neu geladen werden musste. Heute passiert das mittels JavaScript/AJAX. Dabei findet kein Seitenreload mehr statt, sondern es werden lediglich einzelne Bereiche der Seite ersetzt.

 

[RXBeat]

Könntest du mir ein einfaches beispiel mit dem JavaScript zeigen?
Wo ein einfaches menu ist, Body-Tags enthalten sind und der JavaScript drinne ist?
Also nicht selbst tippen aber ich denke da du weißt wonach man suchen müsste, würdest du es schneller googlen können als ich. Würde mich freuen, danke!

 

[Tronjer]

Könntest du mir ein einfaches beispiel mit dem JavaScript zeigen?

Eher nicht. Moderne Web Sites werden mittels Frameworks erstellt, für die Grundlagenwissen bereits vorhanden sein muss.

Was ist dein Ziel? Nur eine einfache Seite für dich, ohne zu sehr in die Materie einsteigen zu müssen? Dann baue statische (Unter)Seiten, die jeweils über einen eigenen Head verfügen. Oder interessiert dich das Thema Webentwicklung an sich? In dem Fall solltest du dir vorab die Basics aneignen. Nicht mittels Referenzen wie w3schools, sondern über professionelle Video-Tutorials.

https://www.udemy.com

 

[RXBeat]

Also die Antwort auf deine Frage ist "BEIDES", ich möchte ein kleines Tool erstellen was mir bei der Arbeit hilft.
Es hat nur ein Menu oben mit 4 punkten (Im Screenshot momentan nur 3 Punkte) und unten dann die Texte oder was auch immer.

So sieht es momentan aus. Aber wie schon gesagt, das ist kein richtiges Menu sondern eigentlich nur die Tab funktion aus meinem ersten post.
Klar würde ich die buttons auch gerne farbig haben. Hilfe 1 wäre rot, Hilfe 3 wäre blau.
Unten kommen dann nur textblöcke rein. Drag and drop maßig, fertige texte. Das ist erst mal unwichtig.
Und ja möchte es auch lernen aber momentan möchte ich diese erste hürde schaffen ohne mich zu sehr zu vertiefen. Bisschen Zeitmangel um dieses projekt fertig zu machen.

 

[RXBeat]

Noch eine Frage...
Kann den Code gerade nicht rein machen...
Hab jetzt ein Menü gebaut,
Ganz einfach mit Nav befehl.
Verweist auf #part_1 #part_2 und #part_3.
Dann <section id="part_1"> bis 3 erstellt.
Funktioniert.
Jede Seite hat eine eigene Hintergrund Farbe und bisschen Text. Wenn ich die html öffne und im Menu switche dann funktioniert alles perfekt.
Wenn ich jetzt das Fenster von unten kleiner ziehe, kommt plötzlich der nächste Menüpunkt von unten nach oben.
Auf der ersten Seite nicht. Nur ab der zweiten Seite. Was könnte schief gelaufen sein?
Könnt ihr spontan was vermuten?

 

[Tronjer]

Es gibt keinen Nav-Befehl, sondern nur ein Nav-Tag. Ob du dieses anstatt eines einfachen Div verwendest, macht hinsichtlich Darstellung und Funktionalität keinen Unterschied.

Das vorangestellte Hashtags bei den Links, lässt vermuten, dass diese nicht auf andere Seiten, sondern auf Container innerhalb derselben Seite verweisen.

Wenn sich Elemente bei Verkleinerung des Viewports verschieben, liegt es zumeist am unzureichenden Platz.

 

[RXBeat]

Hi, ja wenn zu wenig Platzmangel dann ja auch verständlich aber das man dann unten am Rand den nächsten Menüpunkt sieht ist irgendwie nicht so wirklich das wahre. Ich versuch mal in der nächsten Stunde den Code hier rein zu kopieren

 

[Tronjer]

Kopiere es lieber in ein Tool wie https://codepen.io/pen

 

[RXBeat]

https://codepen.io/RXBeat/pen/BeWwEM

Hier der Link.
Erst wenn man auf Home 2, 3 oder 4 klickt und das Fenster verkleinert sieht man was ich meine.
Also wenn ich die html datei direkt im browser öffne dann langt es wenn ich das gesamte fenster verkleiner und hier im codepen langt es wenn ich das frame kleiner ziehe.

 

[RXBeat]

Hat nicht sofort geklappt aber meine originale css ist auch tick länger... nach bisschen bereinigung und einem script, perfekt! Vielen Dank!