Another technique article from Smashing Magazine I just can’t live without. 50 is just too many to pick favorites from, so here are all of them.

Facebook Style Footer Admin Panel Part 1

November 29th, 2009

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.

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>Inspiration 

Design Bombs</li> <li>View Profile View Profile</li> <li>Edit Profile Edit Profile</li> <li>Contacts Contacts</li> <li>Messages (10) Messages</li> <li>Play List Play List</li> <li>Videos Videos</li> <li id=”alertpanel”>Alerts</li> <li id=”chatpanel”>Friends (18)</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 a display: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

What’s Next?

Part 2 of this tutorial will go over how to style the sub-panels and how to activate them using jQuery. If anyone had any questions or comments regarding the tooltip technique, please let me know!

Similar Posts:

• Facebook Style Footer Admin Panel Part 2
• Side Navigation Tooltip / Popup Bubble
• Styling Post Headings That Stick Out
• CSS Vertical Navigation with Teaser
• Fancy Thumbnail Hover Effect w/ jQuery

Did You Enjoy This Post?

Subscribe via RSS ,by email, or by twitter to get all upcoming
tutorials and articles delivered straight to you.

Bookmark or Share this Post!

• 

• 

• 

• 

• 

• 

Tags: css, Intermediate, navigation

This entry was posted on Sunday, November 29th, 2009 at 8:49 pm and is filed under CSS/XHTML. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Interesting take on a footer panel ala everyone’s favorite social networking site – Facebook.

Does anyone else see a layout trend from some of these? The one above seems to catch my eye the most.

Advertisement

Hyperlinks (or links) connect Web pages. They are what make the Web work, enabling us to travel from one page to the next at the click of a button. As Web Standardistas put it, “without hypertext links the Web wouldn’t be the Web, it would simply be a collection of separate, unconnected pages.”. So without links, we’d be lost. We look for them on the page when we want to venture further. Sure, we pause to read a bit, but inevitably we end up clicking a link of some sort.

[Offtopic: by the way, did you already get your copy of the brand new Smashing Book?]

Styling Links

When you style links, remember that users don’t read; they scan. You’ve heard that before, and it’s true. So, make sure your links are obvious. They should also indicate where they will take the user.

Let’s start by looking at CSS selectors and pseudo-classes:

• a:link { }
  Unvisited link.
• a:visited { }
  Visited links.
• a:hover { }
  The user mouses over a link.
• a:focus { }
  The user clicks on a link.
• a:active { }
  The user has clicked a link.

The TLC uses not only plaint text links, but also icons to communicate the corresponding file types.

Ensure Contrast

Links should stand out not only from the background but from the surrounding text. If the font color is black and the link color is black, you have a problem. Make your links stand out by using one or more than one of the following techniques.

• text-decoration: underline;
  Underline.
• font-weight: bold;
  Bold.
• font-size: 1.4em;
  Enlarge.
• color: #ed490a;
  Color.
• background-color: #c0c0c0;
  Background.
• border-bottom: 2px solid #a959c3;
  Border.

If you decide to make links blue, then make sure no other text (including headings) is blue, because users will expect it to be a link, too.

Also, don’t underline text that isn’t linked because users expect underlined text to be a link. And keep in mind users with poor sight. Red won’t stand out to someone who is color blind, so consider underlining or bolding links, in addition to changing the color.

A helpful technique that I always use is to slightly blur the focus. Links with good contrast should still stand out when you look at the page.

Don’t Forget About Visited Links

Visited links are often overlooked, but they are very helpful, especially on larger websites. Knowing where they’ve been before is helpful for users, whether because they want to avoid pages they’ve visited or to make a point of visiting them again.

Give visited links a darker shade of color, so that they stand out but aren’t as obvious as unvisited links.

Use the Title Attribute

The title attribute is usually overlooked, but it’s a convenient way to add descriptions to your links and can be especially useful for those who rely on screen readers.

Example

Use Button Styles

To make really important links stand out—say, a call to action or a “More info” link at the bottom—use a button style. And you can reuse the style again and again without having to edit any graphics.

For more information, check out “Super-Awesome Buttons With CSS3 and RGBA” and “Call to Action Buttons.”

Hover State

Offering feedback to users that they’re hovering over a link is good practice. The best way to do this is to change the background color, change the text color or remove the underline.

a:hover { text-decoration:none;  text-shadow: 0 0 2px #999;  }

The mouse pointer usually turns from an arrow into a hand when the user hovers over a link. But this functionality is sometimes lost; for example, in IE when the link contains a span element, or on “Submit” buttons. Fix this by adding the cursor type via CSS.

a:hover span { cursor: pointer }

Active State

Provide visual feedback to the user to indicate that they have clicked a link, so that they know to wait. One nice effect is to move the link down one or two pixels, which gives the link the appearance of being pressed.

a:active { padding-top: 2px; }

Apply Padding

Here is a good usability tip. Add padding to your links. This way, the user doesn’t have to hover over the exact point of the text. Instead, they can hover in proximity and still be able to click. This works well for navigation links.

a { padding: 5px; }

Use Icons for File Types

If your links point to files in various formats, inform the user of as much using icons. This prepares them for the file type they are about to open, whether it’s PDF or JPEG, for example.

For some great resources, check out “Fam Fam Fam Silk Icons” and “Social Media Mini Icon Pack.”

Use Icons for Recognition

Just as you would use icons for file types, use icons to identify where links go or what they do. This user can more quickly absorb a visual icon than text.

Make Anchor Text Descriptive

Use meaningful text, not “Click here.” The problem with the latter is that it forces the user to read around the link to understand why they should “Click here.” Anchor text such as “See Britney on a beach” speaks for itself. It’s also more SEO-friendly.

Link Your Logo

Always link your logo to the home page. Most users expect this convention across the Web. That said, don’t assume that users know this. Regular surfers expect it, but a number of users still look for the “Home” link.

<h1>Site name</h1>

h1 a {  background: url(images/logo.gif) no-repeat top left;  display: block;  text-indent: -9999px;  width: 200px;  height: 60px;  }

Don’t Open New Windows

Just don’t do it. Let the user decide when and where to open a new tab or window. Users expect links to open in the same window. If you really must do it, at least add an icon to show that this will happen. There are exceptions; for example, it you don’t want to break the flow of a check-out process.

Micro-Formats

As the Web becomes more semantic, consider incorporating micro-formats into your link structures, to help machines understand how a link fits into a page and its relationship to other pages. For example, the following…

My Friend

tells search bots that this text links to a friend who I’ve met, which is useful for discovering connections between links. You can also read more about micro-formats.

Showcase Of Links In Web Design

Komodo Media

Hicks Design

Notable App

UX Booth

Max Voltar

Elliot Jay Stocks

The TLC

Sam Brown

Adii Rockstar

Forty Seven Media

Stefan Persson

Huge

AWP

Simple Bits

Andy Rutledge

Brian Hoff

Simon Collison

Further Reading

• Padded Link Targets for Better Mousing, 37 Signals
• Top Ten Mistakes in Web Design, Useit
• Guidelines for Visualizing Links, Useit
• Styling Text Links, Andy Rutledge
• Showing Hyperlink Cues With CSS
• Don’t Lose Your Focus

(al)

I really like the Fibonacci Design one. It seems easy to maintain a blog site with it, minus much of the CMS capabilities.

Create rich, dynamic websites from Photoshop designs or choose from a selection of pre-built site packs – and without having to code.
Fully hosted and template-driven, with BaseKit you can change your design, add pages and edit text in real time. With readymade contact forms, maps, video and social networking widgets adding functionality is as easy as point, click, drag and drop.

- Create a Website Directly From Photoshop
Go from design to template-driven website in minutes. Import your Photoshop file and BaseKit converts your design to a standards-compliant template – in seconds.

- Advanced functionality, drag and drop Web 2.0
Make your website dynamic without having to code. Simply point, click, drag and drop readymade contact forms, maps, video and social networking widgets and publish. Advanced functionality the easy way.

- Update and refresh, anytime
Fully hosted and template-driven, with BaseKit you can add pages, edit text and change the design in real time.

- Get what you see
BaseKit’s Editor is browser-based so what you see is what you get – true WYSIWYG. Website design and development without the surprises.