Facebook Style Footer Admin Panel Part 2

Veröffentlicht: Januar 28, 2011 in About Webdesign, CSS, Facebook, HTML / XHTML, Tutorials, Webdesign

Like i promised, i now want to present you part 2 of Facebook Style Footer Admin Panel written by www.sohtanaka.com  Enjoy😉

Just like developing a drop-down menu, have a nested sub-panel within
the list item. Look at the image below to get an overview of how this
is layed out.

Collapsible Subpanel Demo

HTML

<li <strong>id="alertpanel"</strong>>
    <a href="#" class="alerts">Alerts</a>
    <div <strong>class="subpanel"</strong>>
        <h3><span> &ndash; </span>Notifications</h3>
        <ul>
            <li class="view"><a href="#">View All</a></li>
            <li>
                <a href="#" class="delete">X</a>
                <p><span style="color: rgb(153, 153, 153);"><!--Content--></span></p>
            </li>
            <li>
                <a href="#" class="delete">X</a>
                <p><span style="color: rgb(153, 153, 153);"><!--Content--></span></p>
            </li>
        </ul>
    </div>
</li>
<li <strong>id="chatpanel"</strong>>
    <a href="#" class="chat">Friends (<strong>18</strong>) </a>
    <div <strong>class="subpanel"</strong>>
        <h3><span> &ndash; </span>Friends Online</h3>
        <ul>
            <li><span>Family Members</span></li>
            <li><a href="#"><img src="chat-thumb.gif" alt="" /> Your Friend</a></li>
            <li><a href="#"><img src="chat-thumb.gif" alt="" /> Your Friend</a></li>
        </ul>
    </div>
</li>

CSS

Since we declared a list item link style already (with the text
replament technique), override the properties so we can use regular
links in the sub-panels.

Read the whole article

Kommentare

Schreibe einen Kommentar

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s