[How-To] Facebook Layout kopieren

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;
}