Mondgesang
Lieutenant
- Registriert
- Dez. 2023
- Beiträge
- 675
Vor einigen Jahren habe ich mal eine Methode zur Erstellung von Navigationen aufgeschnappt, die basierte auf Listen.
Und mit CSS hat man das ganze eben schön kachelig gemacht, mit entsprechenden Dropdowns usw.
Jetzt stolpere ich gerade über eine Methode in W3 Schools die arbeitet nur mit </div>s.
Und das CSS dazu:
Optisch läuft das ganze bei beiden Methoden auf dasselbe hinaus.
Nur ist dieser Code hier deutlich schlanker und braucht irgendwie deutlich weniger Zeilen, als eine Liste in eine Navbar umzuhübschen.
Frage: ist das ein klassischer Fall von viele Wege führen nach Rom und nimm einfach was dir besser liegt? Oder hat das auch Performance-Auswirkungen? Ich weiß ja nicht, ob es vielleicht Dinge gibt (Listen oder vielleicht zu viele <div>s) die einem Browser unnötig zu schaffen machen und die Performance der Seite beeinträchtigen könnten.
Eigentlich setze ich immer große Stücke auf W3 Schools, da ich vieles dort gelernt habe und vertraue, dass die nicht mit langsamem, ressourcenfressendem Code um die Ecke kommen würden.
HTML:
<ul>
<li>Link 1</li>
<li>Link 2</li>
<ul>
<li>Unterlink 1</li>
<li>Unterlink 2</li>
</ul>
<li>Link 3</li>
</ul>Und mit CSS hat man das ganze eben schön kachelig gemacht, mit entsprechenden Dropdowns usw.
Jetzt stolpere ich gerade über eine Methode in W3 Schools die arbeitet nur mit </div>s.
HTML:
<div class="navbar">
<a href="#home">Home</a>
<a href="#news">News</a>
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</div>Und das CSS dazu:
CSS:
.navbar {
overflow: hidden;
background-color: #444;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}Optisch läuft das ganze bei beiden Methoden auf dasselbe hinaus.
Nur ist dieser Code hier deutlich schlanker und braucht irgendwie deutlich weniger Zeilen, als eine Liste in eine Navbar umzuhübschen.
Frage: ist das ein klassischer Fall von viele Wege führen nach Rom und nimm einfach was dir besser liegt? Oder hat das auch Performance-Auswirkungen? Ich weiß ja nicht, ob es vielleicht Dinge gibt (Listen oder vielleicht zu viele <div>s) die einem Browser unnötig zu schaffen machen und die Performance der Seite beeinträchtigen könnten.
Eigentlich setze ich immer große Stücke auf W3 Schools, da ich vieles dort gelernt habe und vertraue, dass die nicht mit langsamem, ressourcenfressendem Code um die Ecke kommen würden.
