Nochmal Navigation. Nach Mobilansicht sind die Links weg

Emess · 5. Januar 2024

Hallo es geht noch mal um diese Navbar.

Hier bekomme ich eine Mobilansicht allerdings ohne Funktion.

Also habe ich auf Coedpen (Link ganz unten) die Original so angepasst wie sie passt. Dann gehe ich in die Mobilansicht Burger menue einwandfrei.

Gehe ich zurück auf Fullscreen sind die Links weg und nur noch die mobile Ansicht geht.

Zum Verständnis.

HTML

<!--====== Header Section Start ======-->
    
        <nav class="navigation">

            <!-- Logo -->
            <div class="logo">
                <h1>LOGO</h1>
            </div>
            
            <!-- Navigation -->
            <ul class="menu-list">
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#portfolio">Project</a></li>
                <li><a href="#">Contact</a></li>
            </ul>

            <div class="humbarger">
                <div class="bar"></div>
                <div class="bar2 bar"></div>
                <div class="bar"></div>
            </div>
        </nav>

Alles anzeigen

CSS

*{
  margin: 0;
  padding: 0;
    box-sizing: border-box;
}

html,body{
  min-width: 100%;
  overflow-x: hidden;
  font-size: 16px;
  font-family: 'Montserrat', sans-serif;
}
.navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  min-height: 12vh;
  min-width: 100%;
  z-index: 10;
  background: #0f1423;
  border-bottom: 2px solid #0c2d48;
}

.navigation .logo{
  margin-left: 20px;
}
.navigation .logo h1{
  color: #b1d4e0;
  font-size: 30px;
  line-height: 38px;
}
.navigation .menu-list {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 45%;
  margin: auto 20px auto 0;
}

.navigation .humbarger {
  margin-right: 20px;
  display: none;
 }
 
.navigation .humbarger .bar{
  width: 30px;
  height: 2px;
  margin: 7px;
  background: #b1d4e0;
 }

.navigation .menu-list li a {
  color: #b1d4e0;
  font-size: 1.25rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 1s ease, border 1s ease;
  text-decoration: none;
}


/* ====================
  Responsive Section
=======================*/

/* Tablet desktop :768px. */

@media only screen and (min-width: 768px) and (max-width: 991px) {
 .navigation .menu-list {
    width: 60%;
  }

 .navigation .menu-list li a{
    font-size: 1rem;
  }

}

/* Large Mobile :480px. */

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

 .navigation .menu-list {
    position: absolute;
    top: 12vh;
    min-width: 100%;
    background: rgba(15, 20, 35, 0.99);
    text-align: center;
    display: none;
  }
 .navigation .menu-list li {
    display: block;
  }

.navigation .menu-list li a {
    display: block;
    padding: 20px;
    transition: color 1s ease, padding 1s ease, background-color 1s ease;

  }

 .navigation .menu-list li a:hover{
    color: #b1d4e0;
    padding-left: 30px;
    background: rgba(177, 212, 224, 0.2);
  }


 .navigation .humbarger{
    display: block;
  }

Alles anzeigen

JavaScript

$(document).ready(function(){

    //hamburger Toggle
    $('.humbarger').click(function(event){
    $('.menu-list').slideToggle(500);
    event.preventDefault();
    
    $('.menu-list li a').click(function(event) {
        if ($(window).width() < 768) {
          $('.menu-list').slideUp(500);
          event.preventDefault(); 
        }
      });
});

Alles anzeigen

Hier könnt ihr es auf codepen selbst austesten. Ich test schone einige Tage. Leider erfolglos.

Responsive navigation bar with logo

...

codepen.io

nextuser · 5. Januar 2024

Ja ist auch logisch.

Wenn du in der mobilen Ansicht auf den Burger klickst, wird die Funktion "slideToggle" aktiviert und setzt nach der Animation "menu-list" auf "display:block".

Bei erneutem Drücken wird es auf "display:none" gesetzt.

Und dieser Zustand wird von dir nirgendwo geändert, daher ist es beim Wechsel auf Desktop-Ansicht immer noch unsichtbar.

Du hast vergessen zu beachten, das die Funktion "slideToggle" den Wert für "display" als Inline-Style setzt, also mit der höchsten Priorität.

Daher greifen deine anderen Angaben im CSS an dieser Stelle nicht mehr.

Emess · 5. Januar 2024

Zitat von nextuser

Ja ist auch logisch.

Wenn du in der mobilen Ansicht auf den Burger klickst, wird die Funktion "slideToggle" aktiviert und setzt nach der Animation "menu-list" auf "display:block".
Bei erneutem Drücken wird es auf "display:none" gesetzt.
Und dieser Zustand wird von dir nirgendwo geändert, daher ist es beim Wechsel auf Desktop-Ansicht immer noch unsichtbar.

Du hast vergessen zu beachten, das die Funktion "slideToggle" den Wert für "display" als Inline-Style setzt, also mit der höchsten Priorität.
Daher greifen deine anderen Angaben im CSS an dieser Stelle nicht mehr.

Alles anzeigen

Für dich mag das ja logisch sein.

Ich aber weiß überhaupt nicht was das Script macht und wie ich da mit der CSS gegensteuern könnte.

Was muss ich in die CSS schreiben? und vielleicht kannst du auch mit kurzen Worten erklären wie die CSS in diesem Falle das Script beeinflusst?

Sempervivum · 5. Januar 2024

Zitat

Ich aber weiß überhaupt nicht was das Script macht und wie ich da mit der CSS gegensteuern könnte.

Das ist eine typische Konsequenz, wenn man eine Fundsache aus dem Web einsetzt ohne sie zu verstehen

Ich bin ja nicht unbedingt ein Freund von jQuery und hier bestätigt sich das: Es liegt ein undurchsichtiges Mischmasch von Animation der Höhe und Umschalten von display vor, das es schwer macht, die Dinge zu durchschauen und nach den eigenen Vorstellungen umzuändern.

Zitat

Was muss ich in die CSS schreiben?

Wie nextuser schon schrieb, hat der Inlinestyle, den jQuery setzt, eine hohe Priorität. Du kannst jedoch dafür sorgen, dass sich dein CSS dennoch durchsetzt, indem Du "!important" hinzu setzt. Auch davon bin ich kein Freund weil man es i. allg. nur braucht, wenn man sein CSS nicht im Griff hat, aber hier kommt man wohl nicht daran vorbei.

Da kein Freund von jQuery, habe ich mal das Menü aus deinem Codepen hergenommen und mit Vanilla-JS realisiert einschl. Animation.

Das Javascript am Ende des Body:

Code

    <script>
        const
            menu = document.querySelector('ul.menu-list'),
            hamburger = document.querySelector('div.humbarger');
        hamburger.addEventListener('click', event => {
            // Ist das Menü offen? Das zeigt
            // die Klasse "open" an:
            if (menu.classList.contains('open')) {
                /* Menü verbergen indem wir
                die Höhe auf 0 setzen: */
                menu.style.height = '0';
            } else {
                /* Menü öffnen indem wir die Höhe
                entsprechend Inhalt setzen;
                scrollHeight liefert uns diese
                auch wenn das Menü geschlossen ist: */
                menu.style.height = menu.scrollHeight + 'px';
            }
            menu.classList.toggle('open');
        });
    </script>
</body>

Alles anzeigen

Ist doch recht kompakt und einfach, nicht wahr?

Am CSS musste ich nicht viel verändern, siehe meine Kommentare:

CSS

    /* ====================
  Responsive Section
=======================*/

    /* Tablet desktop :768px. */

    @media only screen and (min-width: 768px) and (max-width: 991px) {
        header .navigation .menu-list {
            width: 60%;
            /* Hier erzwingen wir mit !important, dass die Höhe auf auto
            gesetzt wird und das Menü sichtbar ist: */
            height: auto !important;
        }

        header .navigation .menu-list li a {
            font-size: 1rem;
        }

    }

    /* Large Mobile :480px. */

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

        header .navigation .menu-list {
            position: absolute;
            top: 12vh;
            min-width: 100%;
            background: rgba(15, 20, 35, 0.99);
            text-align: center;
            /* Statt durc "display: none;" verbergen wir
            das Menü durch eine Höhe von 0: */
            /* display: none; */
            height: 0;
            overflow: hidden;
            /* Die Animation erledigen wir durch CSS: */
            transition: 0.5s height linear;
        }

        header .navigation .menu-list li {
            display: block;
        }

        header .navigation .menu-list li a {
            display: block;
            padding: 20px;
            transition: color 1s ease, padding 1s ease, background-color 1s ease;

        }

        header .navigation .menu-list li a:hover {
            color: #b1d4e0;
            padding-left: 30px;
            background: rgba(177, 212, 224, 0.2);
        }


        header .navigation .humbarger {
            display: block;
        }

        .intro-section .intro-content h1 {
            font-size: 2.8rem;
        }

        .intro-section .intro-content h6 {
            font-size: 1.4rem;
        }

        .intro-section .intro-content .changing {
            font-size: 1.5rem;
        }

        .intro-section .intro-content .header-btn a {
            font-size: 1.25rem;
        }

    }


    /* small mobile :320px. */

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

        .intro-inner .intro-content h1 {
            font-size: 2rem;
            letter-spacing: 1px;
        }

        .intro-inner .intro-content p {
            margin-top: 10px;
        }

    }

Alles anzeigen

Emess · 5. Januar 2024

Den schließenden </body> im Script werden wir uns sparen können?

Ich teste das Morgen mal.

Erst mal vielen Dank und gute Nacht

Emess · 5. Januar 2024

Habs doch noch mal in codepen getetste

re.jpg

Sempervivum · 5. Januar 2024

Den schließenden </body> hatte ich nur mit dazu genommen um deutlich zu machen wo das Skript hin gehört.

Das ist jetzt erst Mal nur ein Screenshot. Funktionierts denn?

Emess · 5. Januar 2024

Das mit dem Body habe ich jetzt kapieraber auf codepen klappt es nicht

re1.jpg

geht also hier nicht

aber wenn ich zurück gehe sind die Links da

nextuser · 6. Januar 2024

Da muss schon noch das "display" hin, allerding mit "display: block", dann funktioniert es.

Bin auch kein Freund von JQuery, mache meine Sachen auch immer mit reinem JS.

Zitat von Emess

Für dich mag das ja logisch sein.

Tut mir leid.

Durch den Code, den du gepostet hast ging ich davon aus, das dir die Funktion bekannt ist.

Also nichts für ungut.

Sempervivum · 6. Januar 2024

Wenn ich mein JS und CSS in den Codepen aus deinem Eingangsposting übernehme, funktioniert alles:

Responsive navigation bar with logo

...

codepen.io

Wenn bei dir nicht, dann poste die URL des Pen, keinen Screenshot.

nextuser · 6. Januar 2024

Das Menü soll bei der Mobilen Ansicht ja nicht in Reihe, sondern untereinander, daher schon noch wie zuvor gesagt "display: block"

Emess · 6. Januar 2024

CSS

   @media only screen and (min-width: 768px) and (max-width: 991px) {
        header .navigation .menu-list {
            width: 60%;
            /* Hier erzwingen wir mit !important, dass die Höhe auf auto
            gesetzt wird und das Menü sichtbar ist: */
            height: auto !important;
        }

        header .navigation .menu-list li a {
            font-size: 1rem;
        }

    }

    /* Large Mobile :480px. */

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

        header .navigation .menu-list {
            position: absolute;
            top: 80px;
            min-width: 100%;
            background: rgba(15, 20, 35, 0.99);
            text-align: center;
            /* Statt durc "display: none;" verbergen wir
            das Menü durch eine Höhe von 0: */
            /* display: none; */
            height: 0;
            overflow: hidden;
            /* Die Animation erledigen wir durch CSS: */
            transition: 1s height linear;
        }

        header .navigation .menu-list li {
            display: block;
        }

        header .navigation .menu-list li a {
            display: block;
            padding: 20px;
            transition: color 1s ease, padding 1s ease, background-color 1s ease;

        }

        header .navigation .menu-list li a:hover {
            color: #b1d4e0;
            padding-left: 30px;
            background: rgba(177, 212, 224, 0.2);
        }


        header .navigation .humbarger {
            display: block;
        }

        .intro-section .intro-content h1 {
            font-size: 2.8rem;
        }

        .intro-section .intro-content h6 {
            font-size: 1.4rem;
        }

        .intro-section .intro-content .changing {
            font-size: 1.5rem;
        }

        .intro-section .intro-content .header-btn a {
            font-size: 1.25rem;
        }

    }


    /* small mobile :320px. */

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

        .intro-inner .intro-content h1 {
            font-size: 2rem;
            letter-spacing: 1px;
        }

        .intro-inner .intro-content p {
            margin-top: 10px;
        }

    }

Alles anzeigen

Ist doch "display:block:

nextuser · 6. Januar 2024

Ne.

Sempervivum hat es auskommentiert.

Das bezieht sich auf diesen Block:

CSS

        header .navigation .menu-list {
            position: absolute;
            top: 80px;
            min-width: 100%;
            background: rgba(15, 20, 35, 0.99);
            text-align: center;
            /* Statt durc "display: none;" verbergen wir
            das Menü durch eine Höhe von 0: */
            /* display: none; */
            height: 0;
            overflow: hidden;
            /* Die Animation erledigen wir durch CSS: */
            transition: 1s height linear;
        }

Alles anzeigen

Emess · 6. Januar 2024

Das hat geholfen

Danke an alle Beide. Vielen Dank.

Hab mir das mal komplett abgespeichert

Nochmal Navigation. Nach Mobilansicht sind die Links weg

Jetzt mitmachen!

Teilen

Tags