Advertisement

# Create a Quick, Sticky Menu

Read Time:7 minsLanguages:

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.

## Step 2: Filling up the Page

Now let's create some structural elements.

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

## Step 4: General Styles

First we will load up Eric Meyer's Reset CSS, placing it at the top of our css file above others selectors:

You'll notice I've made the div.wrapp 70% wide, plus I've stated that images should be a maximum of 100% wide. This is a solid start when building a fluid layout.

## Step 5: Styling the Toolbar

Next up, we'll add some toolbar styles - first by fixing the wrapper to the side of the page, effectively removing it from the document flow.

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.

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.

For example, this is our first anchor:

and our CSS will use the value &#128227; to fill its :before element.

## Step 7: Styling the Toolbar Elements

Let's add some cool looking effects to our icons..

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.

## 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 9: Styling the Pop-up Menu Elements

Onwards! Let's add some styling for the menu elements:

and a simple :hover effect:

## 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:

For more details on how this is achieved, check out this CSS Triangles quick tip by Joren Van Hee.

## Step 11: Creating a Toggle Function

For the last step we will use a jQuery snippet, allowing us to toggle our pop-up menu. Add the following <script> section to the bottom of our document, underneath the call to jQuery itself.

Within the \$(document).ready function (to make sure all our page content is loaded and ready to go) we apply jQuery's fadeToggle() method to the .popup, on the #support's click event:

Note: Please make sure you've included the return false statement, which will prevent you returning to the top of the page every time you click on the icon.

## Conclusion

An easy and quick approach to create something cool and functional in your next project. You can change it in any way you like, I look forward to hearing how you use it in the comments!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.