1、Facebook Style Footer Admin Panel w/ CSS jQuery- Tutorial by Soh Tanakabody background: #7f7f7f url(background.gif) no-repeat center top;margin: 0;padding: 0;font: 10px normal Verdana, Arial, Helvetica, sans-serif;height: 100%;* margin: 0; padding: 0; outline: none;img border: none;h1 font-size: 1.2
2、em;padding: 5px 10px;color: #ccc;width: 940px;margin: 0 auto;h1 a color: #fff; h1 span font-weight: normal;#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%;margi
3、n: 0 3%;*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(patMode #footpanel ul padding: 0; margin: 0;float: left;width: 100%;list-style: non
4、e;border-top: 1px solid #fff; /*-Gives the bevel feel on the panel-*/font-size: 1.1em;#footpanel ul lipadding: 0; margin: 0;float: left;position: relative;#footpanel ul li apadding: 5px;float: left;text-indent: -9999px;height: 16px; width: 16px;text-decoration: none;color: #333;position: relative;ht
5、ml #footpanel ul li a:hoverbackground-color: #fff; html #footpanel ul li a.active /*-Active state when subpanel is open-*/background-color: #fff;height: 17px;margin-top: -2px; /*-Push it up 2px to attach the active button to subpanel-*/border: 1px solid #555;border-top: none;z-index: 200; /*-Keeps t
6、he active area on top of the subpanel-*/position: relative;#footpanel a.homebackground: url(home.png) no-repeat 15px center;width: 50px;padding-left: 40px;border-right: 1px solid #bbb;text-indent: 0; /*-Reset text indent-*/a.profile background: url(user.png) no-repeat center center; a.contacts backg
7、round: url(address_book.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.messages background: url(mail.png) no-repeat center center; a.editprofile background: url(wrench_screwd
8、river.png) no-repeat center center; #footpanel a.chatbackground: 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-*/a.alerts background: url(newspaper.png) no-repeat center center; #fo
9、otpanel li#chatpanel, #footpanel li#alertpanel float: right; /*-Right align the chat and alert panels-*/#footpanel a small /*-panel tool tip styles-*/text-align: center;width: 70px;background: url(pop_arrow.gif) no-repeat center bottom;padding: 5px 5px 11px;display: none; /*-Hide by default-*/color:
10、 #fff;font-size: 1em;text-indent: 0;#footpanel a:hover smalldisplay: 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;#footpanel ul li div a /*-Reset link style for subpanel li
11、nks-*/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 link style for subpanel links-*/#footpanel .subpanel position: absolute;left: 0; bottom: 27px;display: none; /*-Hide by default-*/wid
12、th: 198px;border: 1px solid #555;background: #fff;overflow: hidden;padding-bottom: 2px;#footpanel h3 background: #526ea6;padding: 5px 10px;color: #fff;font-size: 1.1em;cursor: pointer;#footpanel h3 span font-size: 1.5em;float: right;line-height: 0.6em;font-weight: normal;#footpanel .subpanel ulpaddi
13、ng: 0; margin: 0;background: #fff;width: 100%;overflow: auto;#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;#chatpanel .subpanel li background:
14、 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 apadding: 3px 0; margin: 0;line-height: 22px;height: 22px;background: #fff;display: block;#chatpanel
15、 .subpanel li a:hover background: #3b5998;color: #fff;text-decoration: none;#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;#alertp
16、anel .subpanel li a.deletebackground: 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-pos
17、ition: left bottom; #footpanel #alertpanel li.view text-align: right;padding: 5px 10px 5px 0;$(document).ready(function()/Adjust panel height$.fn.adjustPanel = function() $(this).find(“ul, .subpanel“).css( height : auto); /Reset subpanel and ul heightvar windowHeight = $(window).height(); /Get the h
18、eight of the browser viewportvar panelsub = $(this).find(“.subpanel“).height(); /Get the height of subpanelvar panelAdjust = windowHeight - 100; /Viewport height - 100px (Sets max height of subpanel)var ulAdjust = panelAdjust - 25; /Calculate ul size after adjusting sub-panel (27px is the height of
19、the base panel)if ( panelsub = panelAdjust ) /If subpanel is taller than max height.$(this).find(“.subpanel“).css( height : panelAdjust ); /Adjust subpanel to max height$(this).find(“ul“).css( height : ulAdjust); /Adjust subpanel ul to new sizeelse if ( panelsub FacebookInspiration Design BombsView
20、Profile View ProfileEdit Profile Edit ProfileContacts ContactsMessages (10) MessagesPlay List Play ListVideos VideosAlertsNotificationsView AllXAntehabeo abico quod duis odio tation luctus eu ad lobortis facilisis.XEt voco Duis vel quis at metuo obruo, turpis quadrum nostrud lobortis facilisis.XTego
21、 nulla eum probo metuo nullus indoles os consequat commoveo oslobortis facilisis.XAntehabeo abico quod duis odio tation luctus eu ad lobortis facilisis.XNonummy nulla eum probo metuo nullus indoles os consequat commoveo lobortis facilisis.XTego minim autem aptent et jumentum metuo uxor nibh euismod
22、si lobortis facilisis.XAntehabeo abico quod duis odio tation luctus eu ad lobortis facilisis.Friends (18) Friends OnlineFamily MembersYour FriendYour FriendYour FriendYour FriendYour FriendOther FriendsYour FriendYour FriendYour FriendYour FriendYour FriendYour FriendYour FriendYour FriendYour FriendYour FriendYour FriendYour FriendYour FriendYour FriendYour FriendYour FriendYour FriendYour FriendYour FriendYour FriendYour FriendYour FriendYour FriendYour Friend
