• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Navigation bar und die anker aber wie richtig?

R

RXBeat

Mitglied
Selbes Thema noch mal.

Edit fiddle - JSFiddle - Code Playground

Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
jsfiddle.net jsfiddle.net

Das hab ich jetzt gebaut.
Code hab ich aus dem Netz und leicht abgeändert.
Die untersten 5 Zeilen im CSS hab ich selbst eingefügt. Also "relative und height: 100vh.
Dachte das kann helfen.. aber naja.

Javascript hab ich auch aus dem Netz. Versteh den nicht so wirklich.
Ganz unten im html section hab ich <main> selbst hinzugefügt. Weil das im JS so angegeben ist. Dachte das kann helfen.
Tut es aber nicht :D
die <section> hab ich auch selbst eingefügt zum testen. Funktioniert aber nicht grrr
also doch es greift zwar dahin aber öffnet optisch keine neue Seite sondern scrollt runter.
Mein Wunsch:
Das Menü soll dauerhaft sichtbar sein.
Wenn man ein menüpunkt auswählt soll die seite 100%x100% auf dem bildschirm erscheinen. Ohne das man zum nächsten punkt scrollen soll.
Also eine ganz normale Page.
Ich versuche das schon seit tagen sauber hinzubekommen. Ohne fusch etc.
Ich würde es einfach gerne mal sehen wie es aussehen muss.
Ich hab es schon mal fast hinbekommen, da hat es funktioniert aber sobald man man gesamte fenster verkleinert hat, ist die page hoch oder runter gescrollt obwohl das nicht sein durfte.
Ich will euch nicht immer die arbeit machen lassen aber nur so schnall ich wie man vorgeht.
Zu dem JS Code, vielleicht jemand die möglichkeit den mir in wenigen worten zu erklären?
Funktioniert das auch ohne JS?

Edit fiddle - JSFiddle - Code Playground

Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
jsfiddle.net jsfiddle.net

So sah der code original aus.
 
So ganz verstehe ich dich nicht, was du meinst.
Ich habe dein Code mal nach Codepen kopiert, (finde es da übersichtlicher).
Erstens habe ich dein Script ganz gelöscht, weil für die Anker brauch man das nicht (außer du willst animiertes Scrollen).
Dann wolltest du dein Menü immer sichtbar haben, dafür gibt es Position fixed oder sticky.
Das restliche wie 100 X 100 Prozent hast du ja eigentlich schon.
Habe mal den section ein roten Border gegeben dann sieht man das besser

Navigation bar und die anker aber wie richtig?

Navigation bar und die anker aber wie richtig? Selbes Thema noch mal. <a href="https://jsfiddle.net/RXBeat/fnmLc2jr/">https://jsfiddle.net/RXBeat/fnmLc2jr/</a> Das hab ich jetzt gebaut. Code hab ich aus dem Netz und leicht abgeändert. Die untersten 5 Zeilen im CSS hab ich selbst eingefügt. Also...
basti1012.bplaced.net basti1012.bplaced.net


Falls ich irgendwas falsch verstanden habe ,erkläre es bitte für dumme (mich), oder warte bis die anderen sich melden, die sind nicht so dumm wie ich .
 
Zuletzt bearbeitet:
Guten Morgen,

mit 100%x100% meinte ich nur das sich immer eine neue Seite öffnen soll ohne zu scrollen. Es soll gar keine Scrollfunktion geben genau so wie in deinem Code. Funktioniert gerade genau so wie ich es wollte.
Ich sehe es gerade nur auf Handy, ich schau es mir gleich auf Laptop an.
 
Ah ok, jetzt sehe ich das problem. Und zwar, es springt zum richtigen punkt aber es soll gar nicht scrollbar sein. Es soll die Seite als vollbild anzeigen. Ohne das ich von Home auf Über uns scrollen kann. So kann ich ja direkt durch scrollen.
Bin gerade nicht der geilste beim erklären :) Ich merk schon :)
 
ich glaub es ist der
overflow: hidden;
befehl!!! Ich glaub ich habs.

Also wenn ich overflow: hidden; im css/body eingebe dann hab ich jede seite als fullscreen. Aber jetzt hab ich das problem wie vorher auch. Wenn du jetzt das gesamte Fenster diagonal verkleinerst, scrollt plötzlich der gesamte inhalt weg.
 
Ist logisch das das so mit den responsiven auch nicht klappt.
Wenn dann mußt du wahrscheinlich alles umbauen das es responsive ist und an besten mit medaqueries.

Oder du arbeitest mit ( Tabs ) .
Das würde in den Fall hier einiges mehr sinn ergeben.

Navigation bar und die anker aber wie richtig? Lösung mit TABS

Navigation bar und die anker aber wie richtig? Lösung mit TABS Selbes Thema noch mal. <a href="https://jsfiddle.net/RXBeat/fnmLc2jr/">https://jsfiddle.net/RXBeat/fnmLc2jr/</a> Das hab ich jetzt gebaut. Code hab ich aus dem Netz und leicht abgeändert. Die untersten 5 Zeilen im CSS hab ich selbst...
basti1012.bplaced.net basti1012.bplaced.net


Dieser Pen ist schon älter und wollte da jetzt auch nix umbauen.
Du kannst aber sehen das man das auf der ganzen Seite vergrößern kann, und es dann auch keine probleme mehr geben sollte mit den responsiven.
Auch könnte man dein Menü für sowas nutzen , aber das solltest du ja wissen

RXBeat schrieb:
ich glaub es ist der
overflow: hidden;
befehl!!! Ich glaub ich habs.

Also wenn ich overflow: hidden; im css/body eingebe dann hab ich jede seite als fullscreen.
Zum Vergrößern anklicken....

Overflow :hidden ist da auch verkehrt.,
Du weißt ja wenn deine Seite mehr Inhalt hat als deine 100vh, dann ist ein Teil vom Text weg und du kannst ihn nicht mehr erreichen.

Wenn du die Balken nicht haben willst aber trotzdem Scrollen willst dann man es so wie ich es gemacht.
CSS: 
body::-webkit-scrollbar {
      display: none;
}

Da weiß ich aber nicht ob das jeder Browser kennt
 
Zuletzt bearbeitet:
Aber ich wollte gar kein responsive.
Das wenn man das Fenster selbst verkleinert dann ein Scrollbalken erscheint ist ja richtig.
Nur in meinem Beispiel sieht man plötzlich "Home" ins Fenster rein scrollen obwohl ich im ganz anderen Menü Punkt bin.

Mein Vorhaben ist eigentlich ganz einfach..
Ich will eine feste Größe.
Chrome Browser ganz rechts an Monitor ran und das Fenster waagerecht so klein wie möglich machen. Es geht nur bis zu einer bestimmten Größe klein zu machen. Andere Browser interessieren mich dabei nicht.

In diesem Fenster will ich ein Menü von 5 Punkten wobei der letzte Punkt Untermenüs hat. So wie bei mir so eine Art Megamenü.
Und immer wenn man einen Punkt anklickt geht auch genau diese Seite auf. Keine andere und nicht scrollbar. Wenn ich das Fenster von unten nach oben kleiner mache dann soll es sich auch nicht verkleinern. Aber natürlich möchte ich nicht plötzlich das ein anderer Menüpunkt zum Vorschein kommt nur weil ich es verkleinert habe :)
 
@RXBeat
Man kann Beiträge auch editieren, man muss also nicht 4 Stück hintereinander schreiben. Und manchmal hilft es auch, wenn man erst nachdenkt und testet, dann braucht man auch keine 4 Beiträge hintereinander.
 
@m.scatello ich editiere doch keine Beiträge. Damit der Kollege der hilft wie ein Idiot aussieht?
So auf ala ich hab alles richtig gemacht aber keiner versteht mich?
Was soll der Quatsch? Und wenn ich es 10 mal schreibe und mich verbessere... Darum sind Foren da.
Behalte mal deine sinnlos klugen Sprüche für dich. Momentan bist du der jenige der ohne nachzudenken geschrieben hat.
 
Ich lerne durch jede einzelne Zeile, nur durch deine nicht und komm mir nicht mit werd mal frech. Du hast ne sinnlose Diskussion angefangen. Warum? Weil du es kannst.
Brauchst nun wirklich nicht krampfhaft Sprüche klopfen. Hab nichts falsches gemacht und du nervst mich. Total sinnlos.
Denk selbst mal nach bevor du versuchst von oben herab zu lesen.
Hab ich gegen die AGB verstoßen? Gegen deutsche Gesetze? Gegen das Netzwerkgrundgesetz? Nein, nein und nein?
Also noch mal die Frage, was willst du von mir? So schwer war die Frage wirklich nicht.
 
Siehe #12 und das generve hat kein Ende.
#9 stört dich also so sehr, das du diesen Threat lieber komplett zerstörst nur damit du im Recht bist? Ganz egal ob dein Einsatz gewaltig nerviger ist? Bravo
 
Hast du mal dran gedacht, das so zumachen?

Navigation bar und die anker aber wie richtig?

Navigation bar und die anker aber wie richtig? Selbes Thema noch mal. <a href="https://jsfiddle.net/RXBeat/fnmLc2jr/">https://jsfiddle.net/RXBeat/fnmLc2jr/</a> Das hab ich jetzt gebaut. Code hab ich aus dem Netz und leicht abgeändert. Die untersten 5 Zeilen im CSS hab ich selbst eingefügt. Also...
basti1012.bplaced.net basti1012.bplaced.net
 
Zuletzt bearbeitet:
Moin wieder, sorry hatte viel zu tun und der Kollege da oben hatte mich an dem Abend genervt.
Ich hab ziemlich lange weiter gebastelt und das ergebniss ist irgendwie immer noch nicht das beste.
Kurzerklärung: ich habe 5 Menüpunkte. Menüpunkt 5 ist ein Megamenu. Alles nach zahlen sortiert.
Auf Dreamwaver oder als html auf dem server funktioniert es fast richtig, nur fast.
Auf CodePen läuft es überhaupt nicht gut.


Alle Menüpunkte sind anwählbar. Sobald man die Fenster größe verändert, verschiebt sich der inhalt wieder so das die anderen Menüpunkte sichtbar sind.

Als HTML auf dem server ist es so das die Menüpunkt 1-5 funktionieren ohne sich zu verschieben.
Wenn man jedoch im Megamenü einen Punkt auswählt 6-9, dann hab ich wieder das problem mit dem verschieben. Auf einigen Entweder verschiebt es sich oder springt sofort auf eine andere Seite.
Ich glaube ich fusche einfach zu viel.


Das ist mein server. Da kann man sehen das Menu Punkt 1-5 funkioniert.
Ach ja, ich benutze Chrome und es soll hinterher tatsächlich auch nur auf chrome laufen.
Es soll eine kleines tool werden was nebenbei läuft. Ich scheitere schon am Menu :)
Das Megamenu ist mir ziemlich wichtig darum möchte ich nicht darauf verzichten.
Fällt irgendwas extrem falsches im Code auf?

Letztens meintest du @basti1012 , dass ich den javascript raus nehmen könnte da dies nur für menuanimationen etc gedacht ist. Wenn ich den rausnehme, fangen punkt 1-5 aber auch wieder an sich zu bewegen.

Was Navigation angeht oder Megamenus, findet ich auch kaum info im netz.
 
Zuletzt bearbeitet:
erstens.
Bei Codepen kann bei dir nix auch richtig laufen. Du hast Livescript angeklickt und auch kein Jquery eingebunden.
Deswegen ist dein Javascript nix Wert da.
Dann deine Page.
Ich habe das jetzt mal im Crom getestet und ich konnte beim zusammen schieben und auf allen Menü Punkten keine Fehler finden können.
Da hat sich auch nix verschoben.

Bei meinen Codepen meinte ich das das Javascript raus fliegt und du die Menüpunkte mit :target ansprichst.
Man setzt vorher alle <section auf display:none und mit :target wird nur der Punkt sichtbar den man angeklickt hat.

Auch da verschiebt sich nix bei mir.
Das megamenue hat zwar keine anker aber das spielt keine Rolle weil es gleiche Ergebnisse liefern würde.

Wäre mal gut wenn noch wer anders mal die Menüs hier testen könnte. Bei mir geht alles und bei dir wohl nix.
Ich würde jetzt sagen das du mal deine Cache löschen mußt , kann aber auch sein das ich hier irgendwo ein problem habe .
Währe gut wenn man eins von beiden ausschließen könnte
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben