Navigation Wörter unterstreichen, Farbänderung beim Hovern etc

  • Hallo. Ich hab n Schulprojekt und soll eine Seite erstellen. An sich recht 'einfach', wenn man nur das nötigste reinpackt, aber Ich möchte schon dass es mir gefällt, da ich aber noch ein blutiger Anfänger bin, fällt mir das natürlich schwer.


    Ich hänge noch ganz am Anfang an der Navigation.


    Was ich möchte sind diese Dinge für die Navigation:


    Wenn ich auf einen Bereich klicke, soll der aktive Bereich in der Navigation unterstrichen sein.

    Wenn ich über ein Wort im Navigationsbereich hover, soll es die Farbe ändern.

    Wenn ich runter scrolle, soll die Navigationsbar nicht sichtbar sein, sobald man aber minimal hochscrollt, soll sie wieder sichtbar sein.


    Also an sich wie auf dieser Seite https://demos.pixelgrade.com/rosa/ nur halt das mit dem scrollen fehlt da.


    Mein jetziger Code sieht so aus: (Vieles hab ich aber ausm Internet und weiß dementsprechend auch nicht wirklich, was das alles ist lol)



    Kennt ihr Seiten, die mir bei meinem "Problem" helfen oder könnt ihr mir selber sagen, was ich am Code alles ändern muss um meine Wünsche einzubringen?

  • soll der unterstrich nur beim klicken da sein oder nur beim hovern? Weil beim klicken hast du ja nicht viel von weil er4 ja normalerweise die Seite wechseln sollte .


    Soll der unterstrich einfach nur ein underline sein ,oder schon ein dicker fetter unterstrich?



    Ich fimmel mal was und danach kannst du mir ja sagen ob es gut ist oder nicht ?

  • Hilft ihm jetzt nur nicht, wenn jeder Klick einen Request erzeugt...

    ja aber,

    basti1012 Der Unterstrich soll ja nur anzeigen, auf welcher Seite (also Kontakt, Home etc,) man gerade ist. Und beim Hovern soll sich die Farbe von zb. weißer Schrift zu Blauer ändern

    Er brauch ja nur die url auslesen wo er gerade ist und so dann deie klasse setzten.

    Jenachdem wie er das regelt. Wenn jeder Link eine neue Seite öffnet ,hat er ja sowieso den request.

    Holt er die Daten über ajax holt oder sonst wie dann muß er den Balken anders setzten.


    Aber das sollte er wohl hinbekommen ,ist ja sowieso nur ein Beispiel wie man es machen könnte

  • mir fiehl gerade ein das ich sowas schon mal gebaut habe und es fast vergessen hätte.

    In der version speichert er auch die untermenüs wo du gerade am rum surfen bist.

    Das ist auch für ajax gut fals du die daten so holst . er zeigt dier oben im hauptmenü an wo du bist ,selbst wenn du im untermenü rum surfen tust.

    https://jsfiddle.net/basti1012/jhr7hdzk/11/


    Den Musik kram kannst du einfach rauslöschen ,wahr damals wieder spielerrei von mir, bzw vom originalen script

  • Bin kein 'er' aber euch sei verziehen


    djheke Na, aber ist doch langweilig wenn ich immer nur das tue, was von mir gefordert wird. So lern ich auch nichts neues. In dem ich versuche mehr zu machen als man von mir erwartet, lern ich ja auch was zu. Vielleicht kann ich es nicht sofort selber aber durch die Antworten hier im Forum und eure Vorgehensweisen, lern ich es dann ja auch ^^


    Also das mit dem Hovern und die Farbe ändern hab ich jetzt. Mir fehlt aber noch der Unterstrich. basti1012 , von deinem ersten Versuch bin ich leider nicht ganz schlau geworden


    Ich hatte gehofft, dass wenn ich .active "text-decoration: underline;" zuweise, dass es dann geht aber so leicht ist es wohl nicht. (Mir fällt gerade ein: .Active macht doch eh keinen Sinn oder? Hab ja keine Id oder class die so heißt und :active bringt mir auch nichts, da das ja nur dafür da ist, wenn man etwas gedrückthält oder?)



    Vielleicht wollt ihr auch nicht auf den Link gehen, den ich am Anfang gepostet habe. Da sieht man nämlich genau was ich meine/möchte. Deshalb zeig ich euch nochmal screens von der Seite.


    Auf den Bildern seht ihr, wenn ich auf Menu klicke, dass es unterstrichen wird. Also es zeigt an, dass ich jetzt gerade auf der Seite Menu bin. Wenn ich dann auf Reservations klicke, lädt die Seite und nun ist unter Reservationen der unterstrich.



    Und btw. bin ich hier falsch? Hätte meinen Thread unter Css/css3 posten müssen oder? :'D

  • ich wahr auf den Link und habe das angekuckt .Das macht eigentlich jeder ,das ist nicht das Problem.

    Wie du im ersten Beispiel siehst macht das Script ja den Unterschrich wenn du da drauf klickst.

    Eigentlich genau wie du es willst .


    decoration underline ist eigentlich dazu da um ein Wort zu unterstreichen wie das hier . Mehr ist underline nicht .

    Ich glaube auch nicht das underline in grösse dicke und farbe einstellbar ist .( Kann mich auch irren habe ich noch nie versucht )


    Deswegen gibt es da mehrere möglichkeiten einen dicken farblich und animierten Unterstrich dahin zu bauen.


    Man kann mit after und before einen Unterstrich machen .

    Oder einen extra Container der die grösse hat des Striches.

    Vieleicht noch mit <hr> ? ( aber das schließe ich mal aus )

    Oder eine einfachere Variante währe noch mit border-bottom einen Strich zu zaubern.


    Fragen wir mal so . ist die erste Version so was wie du dir das Vorgestellt hast ? Weil der Strich bleibt ja da wo du gedrückt hast ?


    Ich mache das im laufe des Tages mal anders ,ohne Javascript und vieleicht mit border-bottom da sollte man dann einfacher durchblicken.

  • so jetzt eine version ohne Javascript.

    Das javascript ist jetzt nur noch für das scroll ausblenden,dafür fällt mir keine Lösung ohne Js ein

    http://sebastian1012.bplaced.n…nderline_scroll_back1.php


    Habe den Unterstrich mit border-bottom gemacht weil ich mal denke das es für Anfänger am einfachsten ist ( meine meinung nach )

  • Hey,


    Fannibal :


    Du brauchst einen unteren Rahmen, Farbenänderung, die Verzögerung sowie ein Befehl welcher diese Änderungen beim drüberfahren ausführt.

    Also border-bottom, color, transition und :hover. Dies ist mir reinem CSS umsetzbar.


    Desweitern kannst du ja den Quellcode von basti1012s Seite anschauen.


    Grüße,

    Stef

  • Hier mal ein simples Beispiel mit CSS um den aktiven Link zu markieren.



    Die .html Dateien müssen aber vorhanden sein.

  • basti1012


    Bei deinem Code hab ich diesen Part hier geändert, da ich den Strich ja nicht beim Hovern wollte.


    Code
    1. #tabmenue a:hover {
    2. color:blue;
    3. }
    4. #tabmenue a:focus {
    5. background: #black;
    6. padding: 10px;
    7. border-bottom: 5px solid red;
    8. transition: all 0.5s ease;
    9. }


    Mein Problem jetzt ist aber noch, dass der rote Strich zu lang ist. Passt sich wahrscheinlich der Länge der Box an? Der Strich soll aber nur so lang sein, wie das Wort.


    Und beim scrollen, ist es bei deinem Code ja so, dass wenn man nach unten scrollt die Navigationsbar weggeht (was ich ja wollte) aber beim hochscrollen muss man im Prinzip bis nach ganz oben bis die Nav-bar wieder angezeigt wird. Was ich wollte war, dass wenn man selbst ganz unten der Seite ist und wirklich minimal hochscrollt, die Bar direkt angezeigt wird. Hab dann versucht die Zahl also 100px zu ändern aber da hat sich nicht wirklich was getan

  • basti1012


    Hab dann versucht die Zahl also 100px zu ändern aber da hat sich nicht wirklich was getan

    Ne das wird leider auch nix.Die zahl 100 sagt ja aus ,das bei einer gesamtscroll höhe des Fensters ( zb 1000 px) das Menü auf den ersten 100 Pixel sichtbar ist und bei den rest ( 900 Pixel ) es ausgeblendet ist. Das Menü kommt erst wieder wenn du die 100 Pixel oben erreicht hast,wie du ja sagstest. Wie du das gerne hättest ist natürlich auch machbar.Habe ich zwar noch nicht gemacht ,aber mit den scroll event sollte man da was machen können.Oder Mouse Wheel Event sollte auch gehen,nur dafür sollte man die Pfeiltasten auch beachten wenn man es perfekt machen will.


    Der Strich ist jetzt so lange wie der <li> Container. Wenn man den Strich unterhalb des <a> macht sollte er so lang sein wie die Schrift.


    Versuch mal dein Glück . Ansonsten chau ich später wieder rein ( Heute Nacht ,abend ) weil ich jetzt gerade keine Zeit habe. Fals du bis dahin nicht weiter gekommen bist helfe ich dir natürlich dannn

  • kann ich verstehen.<a>,<li> Kann verwirrend sein obwohl man mit inline und inline-block da auch was machen kann.

    Zum erklären bin ich zu blöd dazu .


    Einige leute werden mich wieder hassen aber hier

    http://sebastian1012.bplaced.n…derline_scroll_back1.php#


    Dein Menü verschwindet jetzt beim runterscroollen und kommt wieder wenn man hoch scrollt