[gelöst] Navbar mit Flexbox angefangen und mässig Erfolg gehabt

Emess · 14. Juli 2023

Es will nicht so richtig klappen

Hab das Tut genau befolgt diese hier aber seht selbst . Hab es mal hochgeladen

https://my2.emess62.de/

HTML

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" type="text/css" href="css/styles.css">
     <script type="text/javascript" src="js/script.js" ></script>
    <title>new Beginning</title>
  </head>
  <body>
    <header>
      <nav>
 <div class="brand">Michael Schlegel</div>
 
  <a href="#" class="toggle-button">
    <span class="bar"></span>
    <span class="bar"></span>
    <span class="bar"></span></a>
    <div class="list-container">
      
          <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">Fischen</a></li>
          <li><a href="#">Kulinarisches</a></li>
          <li><a href="#">Galerie</a></li>
          <li><a href="#">Datenschutz</a></li>
        </ul>
      </div>
        </nav>
       
    </header>
    <main></main>
    <footer></footer>
  </body>
</html>

Alles anzeigen

CSS

Code

 *{
    margin: 0;
    padding:0;
 }
html{
    height: 100%;
}
body{
 
    height: 100%;
    background-color: whitesmoke;
}

nav{
    min-height: 80px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgb(56, 54, 54);
    color: white;
}

.brand{
    margin: 20px;
    font-size: 1.2em;
    font-weight: bold;
    color: aqua;
    
}

nav ul{
    display:flex
}

nav ul li{
    height: 100%;
    padding: 30px;
    list-style-type: none;
    border-bottom: 4px solid rgb(42,42,42);
}   

nav ul li:hover{
    border-bottom: 4px solid purple;
}

nav ul li a{
    color: white;
    text-decoration: none;
    font-size: 1em;
    font-family: sans-serif;
}


.toggle-button{
    position: absolute;
    top: 25px;
    right: 25px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height:23px;
}

.toggle-button .bar{
    height:4px;
    width:100%;
    background-color: white;
    border-radius: 100px;
}

@media(max-width:750px){
    .list-container{
        display: flex;
        width: 100%
        }
      .toggle-button{
            display: flex;
        }
}

nav{
    flex-direction: column;
    align-items: 100%;
}

.list-container ul{
    flex-direction: column;
    width: 100%;
}

.list-container li{
    text-align: center;
}

.list-container.active{
    display: flex;
}

Alles anzeigen

Javascript

Code

const toggleButton = document.getElementsByClassName("toggle-button")[0]
const listContainer = document.getElementsByClassName("list-container")[0]

toggleButton.addEventListener("click",() =>{
    listContainer.classList.toggle("active")
})

Das waren sechs Stunden tippen und testen

Ich finde auch den Fehler nicht.

Gruß und gute nacht

nextuser · 14. Juli 2023

Versuch mal mit Semikolons am Ende der Zeilen zu arbeiten.

jonas3344 · 14. Juli 2023

Ne, Javascript braucht keine Semikolons, auch wenns schöner ist.

Du hast ein entscheidendes Detail vergessen:

Code

<script type="text/javascript" src="script.js" defer></script>

Wo liegt da der Unterschied zu Deinem Code?

Was bei Dir passiert:

Die Seite lädt, er kommt zum Script-Tag, führt das Javascript aus, das nicht funktioniert weil zu diesem Zeitpunkt der Button gar noch nicht da ist.

Hättest du wohl gemerkt, wenn du in die Entwicklerconsole des Browsers geguckt hättest.

Dort steht:

Code

Uncaught TypeError: toggleButton is undefined
    <anonymous> https://my2.emess62.de/js/script.js:4

Alternative zum defer ist das ganze in DOMContentLoaded zu packen.

Window: DOMContentLoaded event - Web APIs | MDN

The DOMContentLoaded event fires when the HTML document has been completely parsed, and all deferred scripts (<script defer src="…"> and <script…

developer.mozilla.org

nextuser · 14. Juli 2023

Zitat von jonas3344

Ne, Javascript braucht keine Semikolons

Ja deswegen auch der Zungensmiley.

Werde nächstes Mal ein paar hintereinander machen, damit das auch jeder versteht...

Ich hab keine bessere Antwort gegeben, da Emess genau dieses Problem mit dem Eventzeitpunkt ein paar Fragen zuvor schon hatte und ich ihm dann auch zur Konsole geraten habe...

Dachte er kommt noch von selbst drauf.

Sempervivum · 14. Juli 2023

Das geht ja ein wenig hektisch voran in diesem Video ;), da wundert es mich nicht, dass das eine oder andere verloren geht.

Positiv auf jeden Fall, dass der Tutor Flex verwendet. Negativ, dass er, wie so viele, der Meinung ist, dass überall ein überflüssiger div-Container drum herum sein muss. Und dass ein a-href-Tag als Button missbraucht wird.

Dass er die Semikolons im Javascript weg lässt ist ein wenig nachlässig, beeinträchtigt jedoch die Funktion nicht.

Sehe ich mir das Ergebnis deines Codes an, fällt sofort folgendes auf:

In der Desktop-Ansicht sind die Menüpunkte untereinander angeordnet. Also das flex-direction: column; in die Mediaquery hinein verschieben.

In der Desktop-Ansicht ist der Hamburger-Button sichtbar. Also ein display: none; hinzu fügen und den Button in der Mediaquery mit display:flex; sichtbar machen.

Haben wir dich schon auf die Entwicklerwerkzeuge deines Browsers hingewiesen? Siehe hier:

Grundlagen/Webprojekte/testen – SELFHTML-Wiki

Dort findest Du auch die Console, die häufig wichtige Hinweise auf Fehler liefert. In diesem Fall, dass toggleButton nicht definiert bzw. null ist. Das liegt daran, dass Du das Javascript im head einbindest, dort sind die betr. Elemente noch nicht definiert. Verschiebe die Zeile an das Ende des body:

Code

     <script type="text/javascript" src="js/script.js" ></script>
    </body>

Das müsste schon einiges verbessern.

Emess · 14. Juli 2023

Was Javascript angeht habe ich bisher immer fertige kopiert da ich noch kein Javascript kann. Deshalb kann ich auch nicht die Fehler die mir gezeigt würden interpretieren.

Ist ist jetzt zwar schon einiges verbessert aber es einfach nicht klappen.

Ich habe das script im verdacht

Code

const toggleButton = document.getElementsByClassName("toggle-button")[0]
const listContainer = document.getElementsByClassName("list-container")[0]

toggleButton.addEventListener("click",() =>{
    listContainer.classList.toggle("active");
});

teilen der überarbeitete css

Code

.toggle-button{
    position: absolute;
    top: 25px;
    right: 25px;
    display: none;
   
    justify-content: space-between;
    width: 30px;
    height:23px;
}

.toggle-button .bar{
    height:4px;
    width:100%;
    background-color: white;
    border-radius: 100px;
}

@media(max-width:750px){
    .list-container{
        display: none;
        width: 100%
        }
      .toggle-button{
        flex-direction: column;
            display: flex;
        }
}

nav{
    flex-direction: column;
    align-items: 100%;
}

.list-container ul{
    flex-direction: column;
    width: 100%;
}

.list-container li{
    text-align: center;
}

.list-container.active{
    display: flex;
}

Alles anzeigen

ist auch alles neu hochgeladen

Sempervivum · 14. Juli 2023

Da hat sich ja schon einiges verbessert: Menü klappt auf und zu, d. h. das Javascript funktioniert.

Jetzt muss noch in der Desktop-Ansicht das Menü horizontal angeordnet werden, d. h. hier das "flex-direction: column;" löschen:

Code

.list-container ul {
    /* flex-direction: column; */
    width: 100%;
}

und in der Mediaquery hinzu fügen:

Code

@media(max-width:750px){
    .list-container ul {
        flex-direction: column;
    }    
    .list-container {
        display: none;
        width: 100%;
    }
    .toggle-button{
        flex-direction: column;
        display: flex;
     }
}

Alles anzeigen

In der Desktop-Ansicht hängen jetzt die Borders ein Stück unten, das liegt daran, dass die Listenelemente sowohl padding als auch border haben. Wir müssen dies bei der Berechnung der Höhe berücksichtigen:

Code

nav ul li {
    height: calc(100% - 64px);
    padding: 30px;
    list-style-type: none;
    border-bottom: 4px solid rgb(42,42,42);
}

Letzteres gefällt mir weniger, mit Flex geht es eleganter:

Code

nav ul li {
    /* height: calc(100% - 64px); */
    padding: 30px;
    list-style-type: none;
    border-bottom: 4px solid transparent;
}

und

Code

nav ul {
    display: flex;
    align-items: flex-end;
}

Emess · 14. Juli 2023

Habe deine Vorschläge umgesetzt.

Aber es wird einfach vertikal angezeigt und es klappt bei mir garnicht.

Es bewegt sich leider nichts.

Also wenn ich zusammenschiebe schon dann stimmt es aber in der Desktopansicht soll es ja Horizontal ausgerichtet sein.

Sempervivum · 14. Juli 2023

Bei mir sieht es gar nicht schlecht aus, klappt bei Klick auf den Hamburger auf und zu, mobil vertikal und Desktop horizontal. Nur die Borders in vertikaler Anordnung hängen ein wenig weit unten. Wahrscheinlich musst Du das padding-bottom ein wenig kleiner machen.

Möglicher Weise macht dir der Cache Probleme, Du hast ja Javascript und CSS ausgelagert. Lade mal mit Strg+F5 neu, ob es dann besser wird.

Emess · 14. Juli 2023

Es scheint jetzt zu funktionieren.

Habe es geschaft das menü rechts auszurichten. doch wie bekomme ich den .brand (Michael Schlegel) nach links mit einfach display:flex-start;

klapp es nicht.

Meiner Meinung nach musste dass doch auch in die <ul> was ich aber auch nicht hinbekommen habe

Sempervivum · 14. Juli 2023

flex-start wirkt nur auf die Querachse zusammen mit align-items. Bei dem was Du online hast, brauchst Du nur das flex-direction: column; bei nav zu löschen, dann bekommst Du was Du brauchst:

align-menu.png

Durch das space-between wird ein Zwischenraum zwischen dem Namen und der Nav erzeugt.

Emess · 14. Juli 2023

Bei mir sieht das dann so aus

screen.png

Sempervivum · 14. Juli 2023

Dann ist wahrscheinlich nicht genug Platz in der Horizontalen. Mach das Browserfenster mal etwas breiter.

Emess · 14. Juli 2023

Das müsste ja schon volle breite sein. Aber mir ist aufgefallen dass meine css 2x die Regel nav hat.

1. am Anfang dann in der @media.

Code

nav{
    min-height: 80px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    background-color: rgb(56, 54, 54);
    color: white;

}

.brand{
    margin: 20px;
    /* align-items: flex-start; */
    font-size: 1.2em;
    font-weight: bold;
    color: aqua;
    
}

nav ul{
    display:flex;
    align-items: flex-end;
}

nav ul li{
    /* height: calc(100% - 64px); */
    padding: 30px;
    list-style-type: none;
    border-bottom: 4px solid transparent;
}   

nav ul li:hover{
    border-bottom: 4px solid purple;
}

nav ul li a{
    color: white;
    text-decoration: none;
    font-size: 1em;
    font-family: sans-serif;
}


.toggle-button{
    position: absolute;
    top: 25px;
    right: 25px;
    display: none;
   
    justify-content: space-between;
    width: 30px;
    height:23px;
}

.toggle-button .bar{
    height:4px;
    width:100%;
    background-color: white;
    border-radius: 100px;
}

@media(max-width:750px){
        .list-container ul {
        flex-direction: column;
        }
        .list-container{
        display: none;
        width: 100%
        }
      .toggle-button{
        flex-direction: column;
            display: flex;
        }
}
 nav{
    /* flex-direction: column; */
    align-items: 100%;
} 
.list-container ul{
    /* flex-direction: column; */
    width: 100%;
}

.list-container li{
    text-align: center;
}

.list-container.active{
    display: flex;
}

Alles anzeigen

Vielleicht sollte ich es alles noch mal von Anfang an machen. Denn irgendwo habe ich einen Fehler gemacht.

Sempervivum · 14. Juli 2023

Lade doch deinen neuesten Stand noch mal hoch, sicher erkennt man dann schnell, was das Problem ist.

Dieses ist übrigens fehlerhaft: align-items: 100%; für align-items gibt es nur wenige feste Begriffe.

CSS hat leicht die Tendenz, unübersichtlich zu werden. Wenn Du neu anfängst bist Du wahrscheinlich irgend wann wieder da wo Du jetzt bist.

Emess · 14. Juli 2023

ist neu hochgeladen

Sempervivum · 14. Juli 2023

Du bekommst den Abstand zwischen Brand und Nav nicht weil Du Brand in das ul hinein verschoben hast.

Ist das nicht valide, denn ein ul kann nur li-Element enthalten
Passt es semantisch nicht weil Brand mit der Nav nichts zu tun hat.
Wird es schwieriger, den Abstand zwischen Brand und Nav hinzubekommen.

Ändere das HTML wieder zurück:

Code

<nav>
  <a href="#" class="toggle-button">
    <span class="bar"></span>
    <span class="bar"></span>
    <span class="bar"></span></a>
    <div class="brand">Michael Schlegel</div>
     <div class="list-container">
      <ul>

          
          <li><a href="#">Home</a></li>
          <li><a href="#">Fischen</a></li>
          <li><a href="#">Kulinarisches</a></li>
          <li><a href="#">Galerie</a></li>
          <li><a href="#">Datenschutz</a></li>
        </ul>
      </div>
</nav>

Alles anzeigen

Und um Brand mittig zu bekommen, lasse das Margin weg und zentriere es vertikal:

Code

.brand {
    /* margin: 20px; */
    font-size: 1.2em;
    font-weight: bold;
    color: aqua;
    /* Wir zentrieren es vertikal
    align-self wirkt nur auf dieses Element */
    align-self: center;
}

Emess · 14. Juli 2023

align-self: center;

hier klappt das nicht. Ich mach mal lad mal neu hoch und mach screeshot

Screenshot_20220707_123845.png

Der Brand bzw. könnte auch ein Logo sein soll links vertikal ausgerichtet sein und die Navigation rechts mittig .

nextuser · 15. Juli 2023

Zitat von Emess

align-self: center;
hier klappt das nicht. Ich mach mal lad mal neu hoch und mach screeshot

Screenshot_20220707_123845.png

Der Brand bzw. könnte auch ein Logo sein soll links vertikal ausgerichtet sein und die Navigation rechts mittig .

Alles anzeigen

Einfach das "align-self" auf "start" setzen.

Edit:

Mach bei deiner nav in der Desktopansicht "flex-direction: colum" weg und setze "align-items: center". Das "align-self: center" beim .brand brauchst du dann nicht mehr.

Ich würde deinen Code aber noch folgendermaßen anpassen:

Beim script-Tag brauchst du kein "type=text/javascript" angeben.
Ich würde innerhalb des nav's nur das eigentliche Menü & den Menübutton hineinpacken. Den div komplett weg und das "Logo" über nav innerhalb des headers
Keinen Link für deinen Menübutton, weil sinnlos! Nimm lieber einen button-Tag.
Ich persönlich habe Javascript IMMER im head und nutze DOMContentLoaded zur Umsetzung. Script im body mag ich einfach nicht, aber ist nur meine Meinung...

Würde es ungefähr so machen:

HTML

<!DOCTYPE html>
<html lang="de">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" type="text/css" href="css/styles.css">
        <script src="js/script.js" ></script>
        <title>new Beginning</title>
    </head>
    <body>
        <header>
            <div id="brand">Michael Schlegel</div>
            <nav id="menu">
                <button type="button">
                    <span></span>
                    <span></span>
                    <span></span>
                </button>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Fischen</a></li>
                    <li><a href="#">Kulinarisches</a></li>
                    <li><a href="#">Galerie</a></li>
                    <li><a href="#">Datenschutz</a></li>
                </ul>
            </nav>  
        </header>
        <main></main>
        <footer></footer>
    </body>
</html>

Alles anzeigen

CSS

*
{
    margin: 0;
    padding: 0;
}
html
{
    height: 100%;
}
body
{
 
    height: 100%;
    background-color: whitesmoke;
}
#brand
{
    /* margin: 20px; */
    font-size: 1.2em;
    font-weight: bold;
    color: aqua;
}
header
{
    min-height: 80px;
    background-color: rgb(56,54,54);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#menu
{
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
}
#menu>ul
{
    display:flex;
}
#menu>ul>li
{
    /* height: calc(100% - 64px); */
    padding: 30px;
    list-style-type: none;
    border-bottom: 4px solid transparent;
    text-align: center;
}
#menu>ul>li:hover
{
    border-bottom: 4px solid purple;
}
#menu>ul>li>a
{    
    color: white;
    text-decoration: none;
    font-size: 1em;
    font-family: sans-serif;
}
#menu>button
{
    position: absolute;
    display: none;
    width: 30px;
    top: 25px;
    right: 25px;
    cursor: pointer;
}
#menu>button>span
{
    height:4px;
    width:100%;
    background-color: white;
    border-radius: 100px;
}
#menu>button>span:nth-child(2)
{
    margin: 5px 0;
}

@media(max-width:750px)
{
    header
    {
        flex-direction:column;
    }
    #brand
    {
        margin-top: 1rem;
    }
    #menu
    {
        flex-direction: column;
        width: 100%;
    }
    #menu>button
    {
        display: flex;
        flex-direction: column;
        background-color: transparent;
        border: none;
    }
    #menu>ul
    {
        display: none;
        flex-direction: column;
    }
    #menu>ul.active
    {
        display: flex;
    }
}

Alles anzeigen

JavaScript

document.addEventListener("DOMContentLoaded",() => {
    
    const menu_button = document.querySelector("#menu>button");
    const menu_list = document.querySelector("#menu>ul");

    menu_button.addEventListener("click",() => {
        menu_list.classList.toggle("active");
    });
});

Sempervivum · 15. Juli 2023

Bei dem, was im Moment online ist, muss nur das flex-direction: column; heraus, dann sieht es fast perfekt aus:

Code

nav {
    /* flex-direction: column; */
    /* align-items: flex-end; */
}

[gelöst] Navbar mit Flexbox angefangen und mässig Erfolg gehabt

Jetzt mitmachen!

Teilen

Tags