Implement the admin panel at the bottom of Facebook through CSS and jquery

Social networking sites have become more and more popular in recent years, and Facebook is a top-ranked social networking site. Facebook has a lot of Ajax-specific effects and features that are impressive. The management panel at the bottom of it is one I particularly like. It will almost always use the most functional links to show and organize here.
This week I'm going to use the first section to explain how to implement the admin panel effect at the bottom of Facebook through CSS and jquery.

Part 1 Demo Final demo

Part I: Structure and information balloon--html&css
The structure of the admin panel is created using no sequence table ul. The last two Li lists (Alert panel & Chat panel) will be given IDs to them. At the same time, the two structures float right, and the sequence in the code is reversed before and after the display effect.

Note:A tag contains a small tag, which is primarily a structure created to implement information hints in navigation.
First, HTML structure code:

<div id= "Footpanel" > <ul id= "Mainpanel" > <li><a href= "#" >inspiration <small>desi GN bombs</small></a></li> <li><a href= "#" >view profile <small>view Profile< /small></a></li> <li><a href= "#" >edit profile <small>edit PROFILE&LT;/SMALL&GT;&L 
        T;/a></li> <li><a href= "#" >contacts <small>Contacts</small></a></li> <li><a href= "#" >messages (a) <small>Messages</small></a></li> <li ><a href= "#" >play List <small>play list</small></a></li> <li><a href= "#" >videos <small>Videos</small></a></li> <li id= "Alertpanel" ><a href= "#" >aler ts</a></li> <li id= "Chatpanel" ><a href= "#" >friends (<strong>18</strong>) </a ></li> </Ul> </div> 

Second, CSS style:
1, first, the management panel is fixed to the bottom of the browser visual window

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

As you may know, IE6 does not support fixed. I stumbled across an article that could fix the bug problem with IE6.

*html #footpanel {/*--ie6 hack-fixed positioning to the bottom--*/
	margin-top: -1px;/*--prevents IE6 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: If this is the case, the browser's resolution will be slow, and the alternative solution is either to choose absolute positioning or position: absolute; to let the client or client allow it to not appear under IE6.

2, the definition of the Management Panel unordered list structure style

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

3, to the Li inside each a label to define the corresponding class to define the picture. You can get the idea here. Download Icon

#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 would 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'll be a combination of both text and image--*/} #footpanel Li#chatpanel, #footpanel li#alertpanel {float:right;}
 /*--right align the chat and alert panels--*/

4, the definition of information box, the beginning of the small tag is hidden, when the mouse passed the message box effect is displayed.

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

Analysis of how Facebook site defines the bottom management panel
Original English:Facebook Style Footer Admin Panel Part 1