Toggle Hamburger Menü - Menüauswahl "springt"

    Hallo,


    ich habe diese Anleitung befolgt um eine Navigationssleiste zu erstellen die bei kleineren Displays zum HamburgerIcon wird:


    https://www.html-seminar.de/to…omatische-umschaltung.htm


    mit dem Unterschied dass meine Navigationsleiste nicht am oberen Rand sitzt, sondern erst ein Bild und Logos kommen.


    Soweit klappt alles. Sobald ich das "HamburgerIcon" anklicke öffnet sich - wie gewollt die Menüauswahl, aber was mich stört ist, dass springt auch so um dass diese Menüauswahl als erstes ins Browserfenster rückt.

    Wie kann ich diesen "Hüpfer" umgehen? So dass sich die Menüleiste "nur" öffnet und nicht an den obersten Bildrand hüpft.


    Danke

    LG

    Andrea



    hmtl:

    #nav-menue:target #Steuerung {

    display: block;

    }

    #nav-menue:target .menue-button-beschr-open {

    display: none;

    }

    Ja ohne Link und Code können wir da nicht helfen. Ich habe mal dein Verlinktes Menü getestet und da gibt es nx dran auszusetzten das läuft wie es soll.

    Wahrscheinlich wird bei dir dann irgendeine andere Css Einstellung dann stören oder so was in der art.

    Hallo,

    sorry, im Eifer des Gefechts das wichtigste vergessen...


    Also unten HTML und CSS und Screenshots wie es aussieht und wie es aussehen soll (Nr3)...

    Heißt bei Click auf Hamburger Icon @media only screen and max-width:1280px springt das Menü nach oben (Nr 2) und meine Logos und das "Hauptbild" verschwinden hinter dem Scrollbalken....


    Danke


    HTML:


    <!DOCTYPE html>

    <html lang="en">


    <head>

    <title>Headline</title>

    <link rel="stylesheet" href="css/breitentest_erweitert.css">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="https://fonts.googleapis.com/css?family=Maven+Pro" rel="stylesheet">

    </head>


    <body>


    <header>

    <div class="Logos">

    <img id="AKA" src="images/Logo1.png">

    <img id="AI" src="images/Logo2.png">

    </div>



    <div class="Hauptbild">

    <img id="Bild" src="images/001.png" class="responsive">

    <h1>Headline</h1>

    </div>


    <div id="nav-menue">

    <nav id="Steuerung">

    <ul>

    <li class="grün"><a href="01.html">01</a>

    <li class="hellblau"><a href="02.html">02</a></li>

    <li class="türkis"><a href="03.html">03</a></li>

    <li class="blau"><a href="04.html">04</a></li>

    <li class="lila"><a href="05.html">05</a></li>

    <li class="pink"><a href="06.html">06</a></li>

    <li class="rot"><a href="07.html">07</a></li>

    <li class="orange"><a href="08.html">08</a></li>

    <li class="gelb"><a href="09.html">09</a></li>

    </ul>

    </nav>


    <!-- Hamburger MenüIcon -->

    <a class="menue-button menue-button-beschr-close"

    href="#nav-menue-zu">

    <img src="images/HamburgerIcon.png"></a>


    <a class="menue-button menue-button-beschr-open"

    href="#nav-menue">

    <img src="images/HamburgerIcon.png"></a>

    </div>


    </header>




    <section>


    <div>

    <h2>Test</h2>

    <p>

    fff<br>

    fff<br>

    zzz<br>

    zzzz<br>

    eeeee<br>

    fffff

    </p>

    </div>



    </section>

    </body>

    </html>


    und CSS:



    /* DesktopVersion - allgemeines */

    html {

    background-color: black;

    margin: 0;

    padding: 0;

    font-family: "Maven Pro" !important;

    }


    body {

    width: 100%;

    min-width: 900px;

    max-width: 1920px;

    margin: 0 auto 0 auto;

    }


    .responsive {

    width: 100%;

    height: auto;

    }


    /* Position der Logos */

    .Logos {

    padding: 15px;

    }


    #AKA {

    width: 23%;

    margin-left: 10px;

    }


    #AI {

    width: 26%;

    margin-right: 10px;

    float: right;

    }



    /* Hauptmotiv mit 'Headline'-Schriftzug */


    #Bild {

    display: block;

    }


    h1 {

    color: #242424;

    position: relative;

    bottom: 80px;

    font-weight: lighter;

    float: right;

    font-size: 2.4em;

    margin-right: 22px;

    }



    /* Navigationsleiste */

    nav ul li {

    margin-left: 60px;

    }


    body nav ul li a {

    text-align: left;

    }


    /* Buttonstatus normal */

    nav ul li {

    opacity: 0.5;

    }


    /* Buttonstatus Maus drüber */

    nav ul li:hover {

    opacity: 1;

    }


    /* Buttonstatus Maus click */

    nav ul li:active {

    opacity: 1;

    }


    li {

    list-style: none;

    float: left;

    }


    /* Button Schrift Style */

    a {

    display: block;

    width: 65px;

    padding-left: 0.5em;

    padding-top: 1em;

    text-decoration: none;

    color: white;

    font-size: 1em;

    height: 3em;

    }


    /* farbige Kästchen der einzelnen Buttons (DESKTOP) */

    .grün {

    border-left: #C1DE1D 45px solid;

    }

    .hellblau {

    border-left: #00FFC6 45px solid;

    }

    .türkis {

    border-left: #00C3FF 45px solid;

    }

    .blau {

    border-left: #0000FF 45px solid;

    }

    .lila {

    border-left: #8903FF 45px solid;

    }

    .pink {

    border-left: #FF007E 45px solid;

    }

    .rot {

    border-left: #FF0000 45px solid;

    }

    .orange {

    border-left: #F79300 45px solid;

    }

    .gelb {

    border-left: #FFFF00 45px solid;

    }




    /* HamburgerMenüIcon deaktiviert in der Desktopversion */

    .menue-button {

    display: none;

    }



    /* Text und grafisches Element */

    div {

    padding-bottom: 5em;

    }


    section {

    display: block;

    width: 640px;

    float: left;

    margin-top: 100px;

    margin-left: 33%;

    color: white;

    }


    p {

    border-left: #C1DE1D 4px solid;

    border-right: white 1px solid;

    padding-left: 2em;

    }







    /* CSS erweitern um MENÜ-Button und entsprechende Steuerung */

    /* Menü-Button oben rechts einblenden bei kleiner als 1280px */

    @media only screen and (max-width:1280px) {



    /* Größe und Position des Hamburger Icons */

    .menue-button img {

    width: 100%;

    }


    .menue-button {

    display: block;

    position: absolute;

    left: 10px;

    top: 300px;

    padding: 0.5em;

    color: white;

    cursor: pointer;

    text-decoration: none;

    }





    /* einzelne Menü-Buttons */

    #Steuerung {

    float: left;

    width: 350px;

    display: none;

    margin-left: 200px;

    height: 650px;

    }

    #Steuerung li {

    margin: 0.5em;

    }


    #Steuerung a {

    text-align: center;

    font-size: 1.2em;

    width: 250px;

    height: 35px;

    padding-top: 0.5em;

    }



    /* Buttons mit farbigem Rand */

    .grün {

    border: #C1DE1D 3px solid;

    }

    .hellblau {

    border: #00FFC6 3px solid;

    }

    .türkis {

    border: #00C3FF 3px solid;

    }

    .blau {

    border: #0000FF 3px solid;

    }

    .lila {

    border: #8903FF 3px solid;

    }

    .pink {

    border: #FF007E 3px solid;

    }

    .rot {

    border: #FF0000 3px solid;

    }

    .orange {

    border: #F79300 3px solid;

    }

    .gelb {

    border: #FFFF00 3px solid;

    }



    /* Button Status */

    .menue-button {

    opacity: 0.5;

    }

    .menue-button:hover {

    opacity: 1;

    }



    /* die Steuerung einblenden nur auf mobile Devices */

    #nav-menue:target #Steuerung {

    display: block;

    }

    /* ausblenden des Menü-Buttons zum öffnen - somit wird der zum Schließen sichtbar */

    #nav-menue:target .menue-button-beschr-open {

    display: none;

    }


    }

    Deine Klassen werden wohl so nicht richtig gehen

    Code
    türkis{
}

grün{
}

    Weil ü,ö,ä und Sonderzeichen sind nicht erlaubt.

    Das nur nebenbei,und wird mit dein Problem nix zu tun haben.

    Zu dein Problem kann ich nicht viel zu sagen da ich die Originalbilder nicht kenne ,sieht bei mir alles ok aus. Das Menü ist bei mir ehr zu tief ,unter allen Bildern. Vieleicht kann dir da einer besser helfen der den Fehler auch ohne Original Bilder findet

    Hallo Bast1012, danke für den Hinweis mit äöü.

    Ich habe es letztendlich auch mit dem Tutorial von der oben genannten Website probiert und einfach den Code kopiert und über dem Menü ein Bild eingefügt. Und es passiert das gleiche.


    Aber kannst du anhand der Screenshots sehen was ich meine?

    So ungefähr schon. Nur du schreibst das dein Menü unter den Scrollbalken verschwindet. Das kann ich auf den Bild nicht sehen und in Live auch nicht. Du hast da auch sehr viel mit festen Größen und positionen.Soll das alles so sein ?.

    Auch dein normales navi ,was nicht in Hamburger ist habe ich mitten auf der Seite in 2 Reihen übereinander. Ich glaube nicht das es so gewollt ist.

    Wie sieht den Menü den sonst so aus ?

    Aber bevor ich mir da Gedanken rum mache mit den ganzen Festen Größen warten wir mal ab was die anderen sagen . Die haben mehr Vorstellungskraft als ich und auch bessere Programme das zu bearbeiten. Ich habe nur sowas wie Codepen und das ist nicht gerade die Optimale weise um sowas Perfekt zu bearbeiten.

    Hatte das auch schon öfters das es bei mir ganz anders aussah als wie bei den anderen,was man ja jetzt an Menü sieht. Das sieht bei dir bestimmt anders aus als wie bei mir jetzt.


    Ohne Bilder sieht das bei uns so aus.

    * Link entfernt , weil existiert nicht mehr *

    Deswegen kann ich dein Problem nicht ganz erkennen . Mache ich da irgendwelche Bilder rein Kommt da auch nur Müll raus.Deswegen ist es meistens nicht verkehrt die Origialbild Links zu haben, weil jedes Bild ist anders Groß.

    na so ganz verkehrt siehst du das nicht ;) ich bin noch am (mich) ausprobieren und daher ist da sicher noch einiges im argen - gerade weil du die festen Größen ansprichst - und auch bei Schrift tüftel ich noch herum, dass diese sich mit dem Browserfenster mitskaliert (wenn das überhaupt sinnvoll ist)


    Die Desktopversion (1920) soll eine "offene" Navi-Leiste haben mit allen Menüpunkten sichtbar und dann ab ca 1280 oder kleiner px in ein HamburgerMenü umspringen.


    im Anhang die Bilder.

    und screenshots wie es in der Desktopversion und <1280px aussehen soll - also mit Hamburger. Die Leiste soll einreihig sein und kleiner werden - aber das ist noch nicht umgesetzt...


    mit dem scrollbalken meinte ich das beim Öffnen des HamburgerIcons (nav-menue) die Ansicht so springt, dass das Untermenü (Steuerung ) am oberen Bildrand ist und ich erst wieder scrollen muß um das Hauptbild und die Logos sehen kann.

    Ich denke das hat was mit diesem "Befehl" zu tun, weiß aber nicht wie ich das elegant hinkrieg:


    #nav-menue:target #Steuerung {

    display: block;

    }

    #nav-menue:target .menue-button-beschr-open {

    display: none;

    }

    So mit den Originalbilder sieht das schon mal um einiges besser aus,siehe Link von post #7 . ( Das ist kein fertiger Code von mir, das ist der TE Code ungeändert ).


    Die Bilder wie es aussehen soll sieht ja auch schon mal gut aus.

    Wenn du die Handy ansicht hast ,wo das Menü untereinander steht ,soll das so weit Links sein? Oder soll das in der Mitte ? Weil bei der größe der Buttons ,könnte das beim Handy schon die volle Breite einnehmen.Aber das muß ich dann mal selber testen.


    Wie viel Zeit hast du den ?

    Oder anders gefragt wie weit hast du dich in html und css schon eingelesen ? Wie du hgeschrieben hast ,hast du das Menü ja von hier.Deswegen gehe ich mal von aus das du dich hier auch schon mit html und css auseinander gesetzt hast ,oder nicht ?


    Ich könnte ja jetzt sagen ließ dieses und jenes aber wenn man das schon mal gelesen hat und trotzdem den Fehler nicht findet bringt es ja auch nicht viel.


    Ich baue dein Code mal so um bzw stelle den richtig ein wie ich es tun würde. Dann kann ich dir auch sagen was du alles genau ändern mußt bzw wo du dich noch einlesen mußt um das vieleicht auch selbst hinzubekommen.


    Hauptsache du hast es nicht ganz so eilig ,ansonsten finden wir auch nee andere Lösung

    das soll nicht soweit links stehen, aber das hab ich auch noch nicht angepaßt - soll mittig sein bei der Handyansicht.


    ich hatte diese Seite mit Adobe Muse gebaut und dabei festgestellt, dass man da sehr schnell an die Grenzen kommt. Habs dann hinbekommen aber nun lese ich mich so durch das Internet durch und probiere eben diese Seite nochmal "sauber" nachzubauen und mir diese Dinge anzueignen- daher besteht erstmal keine Eile außer mein Wissensdurst ;)


    Ja hey, vielen Dank für Deine Zeit und Mühe!!! Das wäre super!! :)

    Ja ich habe mir das mal zusammen gebaut wie ich es machen würde. Ich würde dir vieleicht auch vorschlagen das du das header Hintergrunsbild rausschmeißt und das mit background gradient machst. Kommt das gleiche raus und spart Ladezeiten. Und das responsive arbeiten ist damit auch einfacher als mit Bildern. Obwohl das bei den Bild auch kein problem wäre.

    Einige kleinigkeiten hatte ich dir ja am Anfang schon gesagt. Dann würde ich deine id="Steuerung vieleicht weg lassen weil es ja die <nav> ist und das erschwert doch ab und an die Lage. Kann man so machen ,muß man aber nicht.


    Deine Hamburger Bilder habe ich auch auch ausgetauscht in einen selbstgebauten Hamburger der animiert auf geht. Spart wieder Ladezeit und man hat noch nee nette spielerei ,die man aber auch weg lassen kann.


    Dann wahren da noch 2-3 Kleinigkeiten die ich jetzt nicht wieder finde.

Jetzt mitmachen!

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

Benutzerkonto erstellen Anmelden