Navigation einer Webseite mit JavaScript

  • Hallo,

    ich mache gerade eine Webseite und möchte das diese auch auf dem Handy gut funktioniert. Jetzt will ich das ab einer bestimmten Bildschirmauflösung man auf den Menü Icon klickt und von rechts das Menü kommt. Vielleicht kann mir hier jemand helfen, die Sachen die ich im Internet finde verwirren mich nur.

  • Es gibt genau dafür die Media Queries und dafür benötigt man nur CSS und eine Zeile HTML.


    Media Queries im Aufbau:


    Code
    @media only screen and (max-width:500px) {
    
    header { background-color: blue; }
    }
    
    <!--Das hier im <head> Bereich von HTML -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

    Füge diesen Code in dein CSS ein, und verkleinere deinen Browser Bildschirm. Ab einer größe von 500px ist dein Header dann Blau.


    Das "only screen" beschreibt, dass die Seite die darauffolgenden Anweisungen nur für den Bildschirm verwenden soll. Man kann auch "only print" angeben, dann folgen Anweisungen für den Drucker, falls man die Seite drucken möchte.


    Das "(max-width:500px)" beschreibt, ab welcher Bildschirmgröße diese Query wirken soll.


    Ich hoffe, dadurch wird das ganze für dich klarer.

  • Das wenn ich es kleiner schiebe die vorherige Navigation weg geht und das Menü Icon kommt habe ich schon, ich muss nur hinbekommen mit JavaScript das wenn ich auf den Icon drauf klicke das von rechts das Menü in den Bildschirm kommt. Das html und css habe ich alles nur der JavaScript Teil damit es funktioniert fehlt mir

  • Grundsätzlich versucht man natürlich JS aus Funktionen herauszuhalten, welche die Funktionalität der Seite stark beeinträchtigen.


    Über die Pseudoklasse :target kann man ganz ohne JS solche Menüs entwerfen.


    https://www.html-seminar.de/toggle-menue-ohne-javascript.htm


    dabei lässt man "Menü" erstmal durch CSS ausblenden, um es mit :target wieder einblenden zu lassen.


    Wenn Du unbedingt die JavaScript Variante willst, empfehle ich dir JQuery zu nutzen:


    https://code.jquery.com/jquery-3.3.1.min.js


    Herunterladen, einbinden und weiter:


    Code
    $('#Menü-Knopf-zum-einblenden').click(function(){
            $('#Menü-id').fadeIn();
        })
    });
  • Es ist eine Webseite einer ausgedachten Schreinerei die ich für die Schule machen muss, also nicht wundern ;)

  • Bei mir funktioniert es nicht obwohl ich den Code kopiert habe

  • https://basti1012.bplaced.net/…rdner=html-seminar&id=787

    Habe jetzt jQuery mit in den HTML reingemacht .Kopier das jetzt nochmal ,jetzt sollte es gehen. Falls nicht ,welchen Browser hast du den?


    Du belügst dich selbst. :P:P:P

    Ich weiß;(

    Ich kann es nicht sehen wenn Leute nicht weiter kommen.

    Aber er hier hat wenigstens schon Eigeninitiative gezeigt. Bei den anderen, der hatte ja gar nix gemacht.

  • Zitat

    Wird man kaum noch Seiten finden die das anbieten

    Richtig, trotzdem sollte man drauf achten, das wesentliche Funktionen, wie das aufrufen eines Menüs auch ohne JS möglich ist.


    Achten nur leider die wenigsten Entwickler drauf. Wenn man bedenkt, dass es sogar noch Websiten von IT-Firmen gibt, welche rein auf den Flashplayer basieren...

  • Ich habe den Code kopiert und nur den JavaScript Teil mit <script> in den head eingefügt und es geht immer noch nicht. Habe es als erstes mit Firefox ausprobiert und jetzt Chrome runter geladen aber es geht bei beiden nicht

  • Dann kopier das mal so in deiner html datei rein. Da wahr noch ein Fehler drinne den die Fehlerkonsole anzeigen müsste.Wundert mich das fiddle da kein problem gemacht hat .Solte jetzt gehen


  • Erstmal vielen Dank!!

    Ich habe es jetzt soweit hinbekommen, es gibt nur drei Sachen die ich noch gerne ändern würde aber keine Ahnung habe wie.

    Erstmal das das Logo wie auf dem Bild im Hintergrund ist und sich nicht überschneidet, dann das der schwarze Bereich immer so hoch ist wie der verwendete Bildschirm und das der Hintergrund wenn die Navigation offen ist so abgedunkelt ist wie man es oft kennt von mobilen Seiten.


    html-seminar.de/woltlab/attachment/1428/

  • Das ist ne ganze Menge für ein einfaches Schulprojekt.


    mit "z-index" kannst Du bestimmen, ob Elemente andere überdecken sollen, wobei die höhe der Zahl bestimmt, wie weit das Element im Vordergrund steht.


    Die höhe eines Elements kannst Du in CSS mit "height" bestimmen,


    Mit "rgba()" kannst Du bestimmen wie stark eine Farbe auf einem Element liegen soll. Mittels Javascript könntest Du diese CSS Eigenschaft dann für den gesamten body, außer deiner Navi aktivieren. Dafür empfehle ich wieder JQuery:


    Code
    $('#navi-knopf').click(function() {
     $('body').addClass('abdunkeln');
    });
    
    /*CSS:*/
    
    .abdunkeln > #navigation { background-color: rgba(0, 0, 0, 0.5); }

    PS: Code wurde nicht getestet.

  • Das mit dem das der schwarze Bereich immer so hoch wie der verwendete Bildschirm ist klappt nicht so ganz, man muss immer noch ein bisschen runter scrollen, geht das auch anderster oder nur so?

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!