Build Your Own Business Website header image

How to Create a CSS-Tricks Style Navigation Menu

Difficulty Level -

Filed Under Topics - , , ,

Listed Under Lesson Subjects -

Applies to -

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

Part 1 – Create the Image Sprite

In this session we discuss the components of the menu, where to find open source icons and how we will create the menu using our BYOB Thesis Nav Menu plugin and custom code. Then we show how to create the image sprite which is the basis of the menu using photoshop.

Video Transcript

So tonight, what we’re going to do is work on how to create this CSS Tricks Navigation Menu primarily using the BYOB Thesis Nav Menu plugin. There is one feature of this that we’re not going to be able to do that way and that is the easing that happens when these colors change. But we will work on that here in custom code once we have the menu itself built.

And the way this whole thing starts off with is understanding what’s happening here. What we have here is a background image that runs you know, from side to side obviously. And then you’ve got the menu here in the middle at the width of the page. And then the menu is divided into these individual menu elements and then each menu element has its own image that stands in for the book or the face or the scissors. And so this is an image sprite.

And in addition to that, each menu has this background color that happens when you hover. And then if you switch to it, it has the background color plus this bottom border. And you can do all of what I just described using my Thesis nav menu plugin and so that’s what we’re going to build here tonight.

And we’re going to start off by showing you how to create the sprite for each of these different icons. Now I downloaded these icons… well actually, let’s just start off first here. This is a PSD file that I have created essentially to mock this up. And what we have here is… well you know, you often hear me talk about creating a mock up. A mock up is essentially a representation of what you want the site to look like when it’s completed or the element to look like. So in this case, we want our menu to look like this. We’ll go ahead and pick those colors from the other menu but generally speaking you know, we want these icons and these menu items and we’ll have you know, a larger text at the top, smaller text on the bottom. The active menu’s going to have the underline and then these things will have its own hover color.

And so anyway, this is our mock up. Now I got these little icons from a free icon source, Open Source Icons. So that’s the name of the site where I got these. And if you come over here and just look at Open Source Icons… yeah actually, that’s what it was. It’s this one here with GreepIt. So This guy has this 100 icon set and he allows you to download it for free. However, you can’t sell them or sublicense them or transfer them. But you can use them in your projects and there’s lot of different icons here. From these icons, I’ve selected a set of icons that I’m using here. So the house, the chat, the you know, eat some pie delivery blah blah blah… right? Okay so we’ve got those icons and that’s what I’m going to use to create the sprite.

Now because we have this mock up, I can use this mock up to actually create the sprite. And my mock up has each of these menu items as being 150 pixels wide. So when we get around to defining it, it’s all going to be 150 pixels. And then each of the menu images themselves are centered in that.

And what I’m really going to do here is essentially, turn off every layer. Let’s see, so I’m going to turn off all my text layers. So turn off all my text layers and then turn off that layer and this layer and then turn off my buttons layer. And so now all I have is my transparent layer with each of these icons on. I could turn off my icons layer too, right? But obviously, we don’t want to do that.

And so what I’m going to do now is crop this image to the width of our navigation menu. And let’s just see… we want to snap to that line, snap to that line. And actually you know, I think I’m going to snap to the top line too. So we’re just going to… so this is going to be the size of our sprite and it’s going to have each one of these things in it in that location. So I’m just going to hit enter and I’m going to save this as… or save for web and devices. I’m going to save it as a png 24 because they’re semi-transparent images. So 900 pixels wide, 62 pixels tall and it’s actually quite small even though it’s a large image. It’s transparent and only a couple of colors so it’s actually a very small image. So we’re just going to go ahead and save that.

And I’m going to go ahead and… for the moment, let’s see… computer and then let’s see, graphics, tutorial graphics. And then we’re going to have our navigation menus and then css 3 tricks menu png. Save that image and now we have our sprite image all set up. That’s sprite image is created first as a mock up and then since I have my mock up doe, I turn off the layers I don’t care about or that I don’t want in the sprite. And I crop the image down to the right size and I have it to work from.

0 Comments… add one
0 comments… add one