Hear us out...

Creating a Facebook style menu (The BAM Menu)

One of the questions we get most often about our website is, "How did you do your primary navigation menu?" (actually it's normally worded more like, "I really like that menu thingy at the bottom of you web page. It's like facebook! How'd you do that?") You can see the navigation on our main site at blindacre.com

Here's the answer.

It's actually pretty simple in it's current state.

First, you need to start off by building your containers with appropriate background images and such which looks something like this:

<div id="container"></div>

With CSS that looks eerily similar to this:

#container { height:70px; width:900px; }

Then add your background image, which gives you this:

#container { height:70px; width:900px; background:url(image.png) bottom center no-repeat; }

Now, what you're left with is a div that's at the top of your page that's 70 pixels tall, 900px wide and has a background image that's at the bottom/center of the div.

Next is the positioning trick. In order to get the div to stay at the bottom of the page and not move when you scroll there a bit more CSS to add to the container. We need to position the div to be static, and then center it in the window.

To make it not scroll:

#container { height:70px; width:900px; background:url(image.png) bottom center no-repeat; position:fixed; }

Take make it at the bottom of the window:

#container { height:70px; width:900px; background:url(image.png) bottom center no-repeat; position:fixed; bottom:0; }

To make it in the center. This is a two parter. First we need to determine the center of the page:

#container { height:70px; width:900px; background:url(image.png) bottom center no-repeat; position:fixed; bottom:0; left:50% }

That makes it so that the left side of the div is aligned to the middle of the screen. Now we need to pull the div to the left by giving it a negative left margin of half of the entire width of the div (remember that the div is already set to be 900px wide).

#container { height:70px; width:900px; background:url(image.png) bottom center no-repeat; position:fixed; bottom:0; left:50%; margin-left:-450px; }

That's it! Now you just need to find a good drop down menu system to plug into that and you're gold. The navigation system we used was a highly customized Jquery plugin that's meant to emulate Mac's Stacks. We had to retool it to work on a toggle so that one disappears when another is opened...but that's a different post for a different time ; )

-Steve

Hear us out...

Creating a Facebook style menu (The BAM Menu)

Archives