Archiv für die Kategorie ‘Facebook’

Facebook Style Footer Admin Panel Part 2

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

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

Facebook Style Footer Admin Panel – Part 1

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

Today i browsed the web for you and i found a very interesting page called sohtanaka.com. This page offers tutorials e.g. for Facebook.

Here`s a very interesting tutorial beginning with part 1 about „Facebook Style Footer Admin“

The popularity of social media has been booming in the past few years and Facebook definitely has climbed high to the top of the social network rankings. Facebook has many Ajax driven features and applications that are very impressive, and one of the things I particularly like is the footer admin panel, where it neatly organizes frequently used links and applications.

This week I would like to cover part 1 of how to recreate the Facebook footer admin panel with CSS and jQuery.

Final Demo

Read the whole Tutorial on www.sohtanaka.com