[How-To] Facebook Layout kopieren
![[How-To] Facebook Layout kopieren](/images/7107fbdesign.png)
Zweite Element Ebene
Natürlich gibt es noch mehr Design Elemente. Wie das Logo und das Aufklappbare Benutzermenü. Letzteres realisieren wir in diesem Abschnitt. Ich habe mir eine Variante überlegt, mit der direkt und simpel mehrere Aufklappbare Menüs erstellt werden können. Dazu wird nur ein bisschen Javascript benötigt.
// Wenn Dokument fertig geladen ist document.addEventListener("DOMContentLoaded", function() { // Gib mir eine Liste aller Elemente die jeweiligen Klassennamen tragen var openers = document.getElementsByClassName("openDropdown"); for(var x = 0; x < openers.length; ++x) { // Füge all diesen Elementen einen KlickListener an openers[x].addEventListener("click", function(e) { // ... Ein Klick fand statt! // Gib mir eine Liste aller UL Elemente var dropdowns = document.getElementsByTagName("ul"); // Suche das UL Element mit dem selben Namenswert for(var i = 0; i < dropdowns.length; ++i) { var a = e.target; var ul = dropdowns[i]; // Besitzt dieses Element den selben Namenswert? if(ul.getAttribute("name") == a.getAttribute("name")) { // Ja, positioniere es unter dem auslösenden Element... ul.style.top = a.offsetTop + a.offsetHeight + 3 + "px"; ul.style.left = a.offsetLeft - ul.offsetWidth + a.offsetWidth + 10 + "px"; // ... und mach es sichtbar! ul.style.display = "block"; break; } } }); } });
Benutzermenü hinzufügen
Jetzt können aufklappbare Menüs effizient hinzugefügt werden.
<div class="bar"> <div> <a name="dd1" class="openDropdown" href="#">Open</a> <ul name="dd1" class="dropdown"> <li>Test 1</li> <li>Test 2</li> <li>Test 3</li> </ul> </div> </div>
Das a Element wird benötigt um das Menü aufzuklappen. Das passiert indem der selbe Wert beim Namen Attribut gewählt wird, wie bei dem Menü.

Damit der Barinhalt zentriert wird, muss das Stylesheet noch angepasst und folgende Regel hinzugefügt werden.
.bar > div { position: relative; width: 1024px; margin: 0px auto; }
Dropdown Style
Die Elemente für das dropdown Menü habe ich wie folgt gestylt.
.openDropdown { display: inline-block; padding: 10px; } .dropdown { background: rgb(255, 255, 255); padding: 10px 0px; border-radius: 3px; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5); list-style-type: none; min-width: 150px; } .dropdown > li { padding: 5px 10px 5px 30px; } .dropdown > li:hover { background: #4267b2; color: #fff; }
Kommentare
Glivorn> 4 Mt.Bcpbqn Ou Trouver Priligy Pour Ligne Sans Prescription En Ligne https://oscialipop.com - Cialis viagra sildenafil tabletas Oyazyx <a href=https://oscialipop.com>Cialis</a> Fwqhke Cygqrb Propecia Online Without A Prescription Cialis https://oscialipop.com - Cialis This isotope is taken up by the blood cells which then become radioactive. Xkykxv