Facebook Style Footer Admin Panel

The popularity of social media has been booming in the past few years andFacebook 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.

PART 1 DEMO | FINAL DEMO

Step 1. Wireframe and Tooltip Bubbles – HTML & CSS

Lay out the wireframe of the admin panel using an unordered list for the foundation. The last two list items (Alert Panel & Chat Panel) will have sub-panels nested within them. Since these two panels will float to the right, the order in the markup will be reversed.

Notice that there is a <small> tag nested within the <a> tag, this is how we will achieve our tooltip bubble on the navigation.

HTML

<div id="footpanel">
    <ul id="mainpanel">
        <li><a href="#" class="home">Inspiration <small>Design Bombs</small></a></li>
        <li><a href="#" class="profile">View Profile <small>View Profile</small></a></li>
        <li><a href="#" class="editprofile">Edit Profile <small>Edit Profile</small></a></li>
        <li><a href="#" class="contacts">Contacts <small>Contacts</small></a></li>
        <li><a href="#" class="messages">Messages (10) <small>Messages</small></a></li>
        <li><a href="#" class="playlist">Play List <small>Play List</small></a></li>
        <li><a href="#" class="videos">Videos <small>Videos</small></a></li>
        <li id="alertpanel"><a href="#" class="alerts">Alerts</a></li>
        <li id="chatpanel"><a href="#" class="chat">Friends (<strong>18</strong>)</a></li>
    </ul>
</div>

CSS

First start by fixing the panel to the bottom of the viewport.

#footpanel {
	position: fixed;
	bottom: 0; left: 0;
	z-index: 9999; /*--Keeps the panel on top of all other elements--*/
	background: #e3e2e2;
	border: 1px solid #c3c3c3;
	border-bottom: none;
	width: 94%;
	margin: 0 3%;
}

As you may already know, IE6 does not understand fixed positioning. I stumbled across a tutorial that fixed this problem*.

*html #footpanel { /*--IE6 Hack - Fixed Positioning to the Bottom--*/
	margin-top: -1px; /*--Prevents IE6 from having an infinity scroll bar - due to 1px border on #footpanel--*/
	position: absolute;
	top:expression(eval(document.compatMode &&document.compatMode=='CSS1Compat') ?documentElement.scrollTop+(documentElement.clientHeight-this.clientHeight) : document.body.scrollTop +(document.body.clientHeight-this.clientHeight));
}

*Note: Due to heavy loading on the browser, an alternative solution would be to either use an position: absolute; or if the situation/client allows it use display: none; for those with IE6.

Style the unordered list which will be the foundation of this panel.

#footpanel ul {
	padding: 0; margin: 0;
	float: left;
	width: 100%;
	list-style: none;
	border-top: 1px solid #fff; /*--Gives the bevel feel on the panel--*/
	font-size: 1.1em;
}
#footpanel ul li{
	padding: 0; margin: 0;
	float: left;
	position: relative;
}
#footpanel ul li a{
	padding: 5px;
	float: left;
	text-indent: -9999px; /*--For text replacement - Shove text off of the page--*/
	height: 16px; width: 16px;
	text-decoration: none;
	color: #333;
	position: relative;
}
html #footpanel ul li a:hover{	background-color: #fff; }
html #footpanel ul li a.active { /*--Active state when sub-panel is open--*/
	background-color: #fff;
	height: 17px;
	margin-top: -2px; /*--Push it up 2px to attach the active button to sub-panel--*/
	border: 1px solid #555;
	border-top: none;
	z-index: 200; /*--Keeps the active link on top of the sub-panel--*/
	position: relative;
}

Declare the text replacement for each link.
You can download these great icons by Pinvoke here.

#footpanel a.home{
	background: url(home.png) no-repeat 15px center;
	width: 50px;
	padding-left: 40px;
	border-right: 1px solid #bbb;
	text-indent: 0; /*--Reset text indent since there will be a combination of both text and image--*/
}
a.profile{ background: url(user.png) no-repeat center center;  }
a.editprofile{ background: url(wrench_screwdriver.png) no-repeat center center; }
a.contacts{ background: url(address_book.png) no-repeat center center; }
a.messages{ background: url(mail.png) no-repeat center center; }
a.playlist{ background: url(document_music_playlist.png) no-repeat center center; }
a.videos{ background: url(film.png) no-repeat center center; }
a.alerts{ background: url(newspaper.png) no-repeat center center; }
#footpanel a.chat{
	background: url(balloon.png) no-repeat 15px center;
	width: 126px;
	border-left: 1px solid #bbb;
	border-right: 1px solid #bbb;
	padding-left: 40px;
	text-indent: 0; /*--Reset text indent since there will be a combination of both text and image--*/
}
#footpanel li#chatpanel, #footpanel li#alertpanel {	float: right; }  /*--Right align the chat and alert panels--*/

Style the tooltip bubble, by default the <small> tag will be hidden with adisplay:none;. On hover over, allow the tooltip to appear with a display:block;

#footpanel a small {
	text-align: center;
	width: 70px;
	background: url(pop_arrow.gif) no-repeat center bottom;
	padding: 5px 5px 11px;
	display: none; /*--Hide by default--*/
	color: #fff;
	font-size: 1em;
	text-indent: 0;
}
#footpanel a:hover small{
	display: block; /*--Show on hover--*/
	position: absolute;
	top: -35px; /*--Position tooltip 35px above the list item--*/
	left: 50%;
	margin-left: -40px; /*--Center the tooltip--*/
	z-index: 9999;
}

PART 1 DEMO | FINAL DEMO

This is Part 2 of the Facebook Style Footer Admin Panel, if you haven’t checked out Part 1 this is the perfect time to check it out.

Step 2. Styling the Chat Panel & Alert Panel – HTML & CSS

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.

HTML

<li id="alertpanel">
    <a href="#" class="alerts">Alerts</a>
    <div class="subpanel">
        <h3><span> &ndash; </span>Notifications</h3>
        <ul>
            <li class="view"><a href="#">View All</a></li>
            <li>
                <a href="#" class="delete">X</a>
                <p><!--Content--></p>
            </li>
            <li>
                <a href="#" class="delete">X</a>
                <p><!--Content--></p>
            </li>
        </ul>
    </div>
</li>
<li id="chatpanel">
    <a href="#" class="chat">Friends (<strong>18</strong>) </a>
    <div class="subpanel">
        <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.

#footpanel ul li div a { /*--Reset link style for sub-panel links--*/
	text-indent: 0;
	width: auto;
	height: auto;
	padding: 0;
	float: none;
	color: #00629a;
	position: static;
}
#footpanel ul li div a:hover {	text-decoration: underline; } /*--Reset hover style for sub-panel links--*/

Style the sub-panel container with an absolute positioning that will sit at the top of the main footer panel (27px from the bottom of the footer panel). Then create the headings using an <h3>.

#footpanel .subpanel {
	position: absolute;
	left: 0; bottom: 27px;
	display: none;	/*--Hide by default--*/
	width: 198px;
	border: 1px solid #555;
	background: #fff;
	overflow: hidden;
}
#footpanel h3 {
	background: #526ea6;
	padding: 5px 10px;
	color: #fff;
	font-size: 1.1em;
	cursor: pointer;
}
#footpanel h3 span { /*--Right aligned "-" icon--*/
	font-size: 1.5em;
	float: right;
	line-height: 0.6em;
	font-weight: normal;
}

The following section is the area that will be scrollable. Use an overflow: auto; to allow the scroll to appear when the content exceeeds the <ul> height.

#footpanel .subpanel ul{
	padding: 0; margin: 0;
	background: #fff;
	width: 100%;
	overflow: auto;
	padding-bottom: 2px;
}
#footpanel .subpanel li{
	float: none; /*--Reset float--*/
	display: block;
	padding: 0; margin: 0;
	overflow: hidden;
	clear: both;
	background: #fff;
	position: static;  /*--Reset relative positioning--*/
	font-size: 0.9em;
}

Chat Panel

#chatpanel .subpanel li { background: url(dash.gif) repeat-x left center; }
#chatpanel .subpanel li span {
	padding: 5px;
	background: #fff;
	color: #777;
	float: left;
}
#chatpanel .subpanel li a img {
	float: left;
	margin: 0 5px;
}
#chatpanel .subpanel li a{
	padding: 3px 0;	margin: 0;
	line-height: 22px;
	height: 22px;
	background: #fff;
	display: block;
}
#chatpanel .subpanel li a:hover {
	background: #3b5998;
	color: #fff;
	text-decoration: none;
}

Alert Panel

#alertpanel .subpanel { right: 0; left: auto; /*--Reset left positioning and make it right positioned--*/ }
#alertpanel .subpanel li {
	border-top: 1px solid #f0f0f0;
	display: block;
}
#alertpanel .subpanel li p {padding: 5px 10px;}
#alertpanel .subpanel li a.delete{
	background: url(delete_x.gif) no-repeat;
	float: right;
	width: 13px; height: 14px;
	margin: 5px;
	text-indent: -9999px;
	visibility: hidden; /*--Hides by default but still takes up space (not completely gone like display:none;)--*/
}
#alertpanel .subpanel li a.delete:hover { background-position: left bottom; }
#footpanel #alertpanel li.view {
	text-align: right;
	padding: 5px 10px 5px 0;
}

Step 3. Activating the Subpanel – jQuery

Adjust the Subpanel Height

The tricky part about the collapsible sub-panel is to make sure the content does not stretch beyond the height of the viewport when active.

To make sure the height does not exceed past the viewport, use the following function to calculate and resize the sub-panel according to the viewport size.

The following script contains comments explaining which jQuery actions are being performed.

jQuery

//Adjust panel height
$.fn.adjustPanel = function(){
    $(this).find("ul, .subpanel").css({ 'height' : 'auto'}); //Reset sub-panel and ul height

    var windowHeight = $(window).height(); //Get the height of the browser viewport
    var panelsub = $(this).find(".subpanel").height(); //Get the height of sub-panel
    var panelAdjust = windowHeight - 100; //Viewport height - 100px (Sets max height of sub-panel)
    var ulAdjust =  panelAdjust - 25; //Calculate ul size after adjusting sub-panel

    if ( panelsub > panelAdjust ) {	 //If sub-panel is taller than max height...
        $(this).find(".subpanel").css({ 'height' : panelAdjust }); //Adjust sub-panel to max height
        $(this).find("ul").css({ 'height' : panelAdjust}); ////Adjust subpanel ul to new size
    }
    else if { //If sub-panel is smaller than max height...
        $(this).find("ul").css({ 'height' : 'auto'}); //Set sub-panel ul to auto (default size)
    }
};

//Execute function on load
$("#chatpanel").adjustPanel(); //Run the adjustPanel function on #chatpanel
$("#alertpanel").adjustPanel(); //Run the adjustPanel function on #alertpanel

//Each time the viewport is adjusted/resized, execute the function
$(window).resize(function () {
    $("#chatpanel").adjustPanel();
    $("#alertpanel").adjustPanel();
});

Add the Toggle Function

Since both of the chat and alert panels are collapsible, we must treat this like the logic of an accordion (when one opens, the other closes). We also need to allow the panels to collapse when clicking out of the sub-panels.

The following script contains comments explaining which jQuery actions are being performed.

//Click event on Chat Panel and Alert Panel	
$("#chatpanel a:first, #alertpanel a:first").click(function() { //If clicked on the first link of #chatpanel and #alertpanel...
    if($(this).next(".subpanel").is(':visible')){ //If subpanel is already active...
        $(this).next(".subpanel").hide(); //Hide active subpanel
        $("#footpanel li a").removeClass('active'); //Remove active class on the subpanel trigger
    }
    else { //if subpanel is not active...
        $(".subpanel").hide(); //Hide all subpanels
        $(this).next(".subpanel").toggle(); //Toggle the subpanel to make active
        $("#footpanel li a").removeClass('active'); //Remove active class on all subpanel trigger
        $(this).toggleClass('active'); //Toggle the active class on the subpanel trigger
    }
    return false; //Prevent browser jump to link anchor
});

//Click event outside of subpanel
$(document).click(function() { //Click anywhere and...
    $(".subpanel").hide(); //hide subpanel
    $("#footpanel li a").removeClass('active'); //remove active class on subpanel trigger
});
$('.subpanel ul').click(function(e) {
    e.stopPropagation(); //Prevents the subpanel ul from closing on click
});

//Show/Hide delete icons on Alert Panel
$("#alertpanel li").hover(function() {
    $(this).find("a.delete").css({'visibility': 'visible'}); //Show delete icon on hover
},function() {
    $(this).find("a.delete").css({'visibility': 'hidden'}); //Hide delete icon on hover out
});

FINAL DEMO