Create a Quick, Sticky Menu

During this quick tutorial we're going to implement a sticky menu with CSS, toggling its visibility with jQuery. It's the perfect way to give visitors social links, additional places within a network of sites, or even personalize settings.

Step 1: Setting up the Page

Let's start out by making a basic HTML page. We'll load CSS into the <head>, then jQuery (at the bottom of the document) for the toggle animation.

We will use the data-icons attribute to specify our font icons. The font icons will be used to effectively decorate our main menu items. Font glyphs can be scaled and colored without loss of resolution, whereas using bitmap images offer less flexibility. We will talk about this more as we progress.

Step 3: Adding Filler Content

To highlight what's going on, let's add some dummy text and a logo. Make sure that there is enough content for you to scroll if you want to see the final result in its full glory..

Note: It's very important to declare position: relative for div.sticky-toolbar as it will allow us to position other elements properly against it.

Step 6: @font-face Load

As mentioned earlier, we won't be using bitmap images for our icons. Instead, we will use @font-face to pull in font files for use in the browser.

@font-face is a css rule which allows you to download a particular font from your server to render a webpage if the user hasn't got that font installed. This means that web designers will no longer have to adhere to a particular set of "web safe" fonts that the user has pre-installed on their computer.- font-face.com

We're going to use Entypo; an Open Source bundle of free icons for commercial and personal use. It has a PSD, EPS, PDF, OpenType, TrueType and various other files, so let's download them for use in our project.

Here are our @font-face declarations, which we paste into our CSS file. Make sure that the paths correctly point to the font files within the project, otherwise they won't show up.

We now select all elements within our markup with the data-icons attribute, tacking a :before pseudo element onto each one and filling that pseudo element with whatever characters are held within the data-icons value.

Note: To maximize crisp and clear webfont icons (at least in webkit browsers), include a -webkit-font-smoothing: antialiased; to this section. You could also apply this to everything using the global selector: * { -webkit-font-smoothing: antialiased; }

Now add some hover effects, and you're done.

div.sticky-toolbar ul li a:hover{
background-color: #1ABC9C;
}

Step 8: Styling the Pop-up Menu

That's dealt with our menu bar, now let's add some styling to the pop-up menu:

Note: In its default state we have to hide this section with display: none;. Later on we'll toggle the visibility with jQuery. You can leave the display value empty for now, until you finish the styling, but don't forget to bring it back later.

Step 10: Create an Arrow With CSS

Instead of creating a transparent .png arrow image, we'll use a nice trick creating the same effect (though completely scalable) with CSS borders. It's possible to use pseudo elements for this too, if you'd rather not muddy your markup up with additional elements: