« New Hacks on the Way This Week | Main | Design Changes »

John T. Unger

How To: Create a Dynamic Horizontal Navigation Menu for TypePad Blogs

John T. Unger May 16, 2006

This Hack goes out to James Milstid who got me started on it and Jeff Noble, the most recent of many readers to request a top level menu hack. Additional props to Dynamic Drive CSS Library for the CSS code, and my pal Ffej who pointed me to Dynamic Drive in a completely random act of perfect timing earlier today. And to think that I was gonna lay this out with tables originally!

James posted a great tutorial a couple weeks ago on creating a top level navigation menu. I started playing with it, and was immediately struck with a bunch of possible variations that could be applied to his idea. The drawback? It ended up taking me two weeks to post about it because I was trying out all the possibilities… The Upside? It gave me a bunch of new ideas that allowed me to create the hack below, which I think more closely approximates the look of Word Press menus that TypePad users have been emailing me about. I'm going to repurpose James' instructions to create tomorrow's hack: a "sticky post" that allows you to put a text (and/or image) block at the top of each entry, below the header.

To create a dynamic horizontal menu as seen above, follow the steps in the extended post. You must have a TypePad Pro account and be using advanced templates in order to use this Hack.

Note: when altering your existing template code, it is a very good idea to copy your code and paste it into a text document in case you make a mistake and need to start from scratch. More tips on Code Hacking Safety can be found here: 10 Tips for Working with Advanced Templates.

Step One: Adding the CSS to Your Blog

  1. Go to DDCSS and choose a design from their list of CSS menus. I went with the Chrome Menu Bar, and will use that code for this example. If you use one of the other designs, you'll have to adjust some of the instructions below (such as file names for the images).
  2. The Menu Design Page at DDCSS is organized into sections: Demo, Images, CSS and HTML. You'll want to leave the page open so that you can access each section as needed.
  3. Below the demo image of the menu, you'll see the images needed for the background of your menu bar. Save these to your hard drive.
  4. Open another tab or window in your browser and login at www.typepad.com.
  5. Upload your background images using the File Manager. This is different than inserting an image into a post… Use the Instructions here if you need help.
  6. Click on the name of each image (not the link icon) to open them in another window or tab. Copy the URL for each image so that you can insert it into your CSS in steps 10-13.
  7. Click the Weblogs tab in TypePad and go to the blog for which you wish to create a horizontal navigation menu.
  8. If you are already using an advanced template, click the Design tab. If you are using a Basic template follow these instructions to convert your template to advanced.
  9. Under Advanced Templates, Click on your Stylesheet file. Scroll all the way to the bottom and paste the CSS code from DDCSS below where it says /* other css */.
  10. Find the line that reads:
    background: url(media/chromebg.gif) center center repeat-x;
  11. Replace the text in the parenthesis with the URL you copied in step 6 for the image with the name chromebg.gif.
  12. It should now read something like this (if you use as many directories as I do):
    background: url(http://johntunger.typepad.com/typepadhacks/images/00/assets/menu/chromebg.gif) center
  13. Find the line that reads:
    background: url(media/chromebg2.gif) center center repeat-x;
  14. Replace the text in the parenthesis with the URL you copied in step 6 for the image with the name chromebg2.gif.
  15. Click Save at the bottom of the page.

Step Two: Creating A Template Module for Your Menu

  1. Near the bottom of the page, locate and click Create New Template Module.
  2. Give your new template a name of banner-header by typing it in the Template Name field.
  3. Paste the following code into the Template Body field:
    <!-- banner -->
    <div id="banner">
        <div id="banner-inner" class="pkg">
            <$MTWeblogIncludeModule module="banner-header"$>
            <h1 id="banner-header"><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName$></a></h1>
            <h2 id="banner-description"><$MTBlogDescription$></h2>
    </div></div>
       
  4. Return to the Menu Design Page at DDCSS and select the code in the HTML field. Paste it into the Template Body field below the two </div> tags.
  5. Replace the links provided in the example code with your own links and descriptions. You can have more or fewer links than the example provides. A standard rule of thumb for the human attention span is no more than seven links.
  6. When you have your links the way you want them, Click Save at the bottom of the page.

Step Three: Including Your New banner-header Module into Your Templates

  1. Return to the Design tab for your blog.
  2. Click on your Main Index Template. Replace <$MTWeblogIncludeModule module="banner"$> with <$MTInclude module="banner-header"$>
  3. Click Save.
  4. Return to the Design tab and click on your Archive Index Template.
  5. Replace <$MTWeblogIncludeModule module="banner"$> with <$MTInclude module="banner-header"$> and click Save.
  6. Return to the Design tab and for each of the following templates Category Archives, DataBased Archives, and Individual Archives replace <$MTWeblogIncludeModule module="banner"$> with <$MTInclude module="banner-header"$> Click Save for each one.
  7. You're done! Click Save and Republish your site (be sure that Publish all Files is selected in the popup window).
  8. View your blog in a new tab or window. If you don't see the menu at the top, hold the shift key down the first time you reload the page.
     

Okay! You should now have a totally rockin' new menu at the top of your blog. Yay!

Tags: , , , , , , , , , , ,

More Like This: Advanced Templates , Blog Tools , CSS , Hacks for Layout + Design , Hacks for Navigation

Comments

john t unger says:

Jim,

The "Image Not Available" message means that the backbround images for the menu are not linked properly to the locations you provided in your code. See numbers 5 + 6 under Step One: Adding the CSS to Your Blog above. I'm guessing that you either forgot to change the URL for the images or that you made a simple mistake in the html or URL to link to the images. Either way, it's an easy enough thing to fix.

Oops. Just went to check again and see that you did get it fixed. I'll post the reply anyway in case others have the same issue at some point.

Nice header graphic, BTW!

David Alexander says:

John,

As you can see, I am having the same problem as others. The navigation ends up at the top of my banner and is somehow layered with the custom graphic so that the links do not work. Everything goes back to the index page. Can you help?

David

David Alexander says:

A follow up to my previous comment... Now for some reason, I lost my header graphic. Very confused at this point.

Darla says:

AACCKKK!! I followed the instructions correctly. I made my own graphics instead of using the chrome, but now the menu bar shows above my banner image!!! HELP!

yoichi says:

Hi,
I love this. But I have a problem. I've tried "Sliding Doors Bars Tab Menu" from DDCSS and the tabs show up fine on IE but doesn't seem to work for Firefox 2.0.
Have I done something wrong or is this not compatiblewith FF2.0?
Thanks for your help in advance.

yoichi says:

Hi again,
I don't no exactly why but it worked out with the "Chrome Menu Bar". It must be something to do with my rich template.

Tonja says:

I had the same thing happen with the menu bar showing above my banner graphic - is there a magic fix?

john t unger says:

Hi Tonja,

That tends to happen if you omit a div tag somewhere along the way… or if you pasted the code in on the wrong side of one. It could be some other kind of tag, but usually it's a div.

If you saved a back up of your original template, go through and make sure that all the tags are properly nested.

It gets really confusing sometimes when there are a lot of tags.

Chris Taylor says:

I have a graphic extending down the left-hand-side of a 3-column layout. Half of it displays in the banner and the other half is in the "alpha" column. I can't put the DD Color Tabs II horizontal menu immediately below the banner or it will break up the image. Instead I have tried to place the menu in the "beta-inner" section, immediately before the [$MTWeblogIncludeModule module="entry-list-sticky"$] tag, but it doesn't want to display at all now. It worked fine when coupled in a module with the banner but doesn't seem to want to work when placed independently as a module immediately before the entries. Any suggestions?

Chris Taylor says:

Actually I figured out my own problem, I realised I was using the wrong tag [MTWeblogIncludeModule when I should have been using MTIncludeModule]. Also, it looks a lot prettier placed in the "beta" section rather than the "beta-inner" section. (It works in beta-inner too, it just looks ugly with a larger space between the banner and menu.)

The only thing I can't sort out now is how to center it properly. I'm trying to use margin: 0 auto; on the "#invertedtabs" tag but it isn't working out for me.

Cuatro says:

Hey John,

I was trying to get my drop down menu that you, Nacho and Jay found and I am having a problem with the script. Every time I scroll over the menu bar the choices pop up in background about 200px to the right of the nav bar... can you help

www.cbeyondknox.blogs.com/teamhuerta

cuatro says:

i got it figured out John...it had to do with the positioning of the dropdown tabs...changed it's position to :fixed and bottom: fluid

thanks for all your wonderful hacks....keep it up

kristen says:

I've tried this hack twice, and both times I end up with a vertical bulleted list sandwiched in the area between my banner and my main body of my site. Nothing horizontal, and nothing graphical about it, either. Very confused!

kristen says:

Rule #1 of web design - the second you tell someone in a forum that you're stuck is the second you figure it out for yourself. Sorry!

Carla says:

john, my links in the nav aren't working. they just default to the home page. i did everything exactly as you described. the nav bar shows up fine; it's just that the individual links don't work. Any ideas?

Carla says:

I figured it out. You have to delete these two lines in "banner-header" for the links to work:
\
<$MTBlogName$>
<$MTBlogDescription$>

Steve says:

John-

Hi John, I'm a newbie when it comes to css and typepad templates - so thanks for the help. Also I love all of your sites. I'm using them as inspiration.

Something went awry on the way to creating the http://www.dynamicdrive.com/dynamicindex1/chrome/demo.htm

"you'll see a link to the external javascript between the head tags. I'm pretty sure you could also just paste the JS code into the template between the head tags, but it's probably easiest to upload it to your files and link to it-HOW DO I GET THE LINK TO THE JS CODE BETWEEN THE HEAD TAGS. WHICH TEMPLATE DO I USE TO UPLOAD THE LINK AND WHERE IN THE TEMPLATE DO I PASTE THE JS LINK Either way, you'd need to do this on all the templates referenced in step 3 above.PLEASE ELABORATE ON WHERE TO PLACE THE JS."

Also like Krisitn my nav bar is vertical with no graphical anything.

Thanks in advance for your help-

David Smith says:

I found this hack really useful and I’ve used it on my website www.ToyTalk.co.uk.

I’m not very experienced when it comes to web layout, but I found the instructions were very straightforward and worked well. I adapted the colours on the menu layout to reflect those used in my site and I’m very pleased with the result.

By taking the main navigation links that were in my right-hand column and putting them under the banner, I not only made the site look more sophisticated, I gave a more prominent position to the affiliate ads I have in the right column, which may help earn more money!

There is just one thing I am looking into improving – the entire page used to have a frame around it, extending down both extreme edges of the site and framing it rather neatly. Since putting in the navigation bar, this frame has limited itself to the banner and the navigation bar – as you can see, the bottom of the frame is now just under the navigation bar. This not only leaves the edges of the page ‘floating’ somewhat, it also seems to have added extra white space between the nav bar and the star of the page content. I am looking into this and hope to be able to sort it out.

A great hack though, and I’m looking into others on this site as well. Thanks for this great website!

David Smith says:

Well, wouldn't you know it - I'd made a mistake when copying in the code to my style sheet. Somehow, I pasted an extra in there which had fouled things up. Once removed, the layout worked perfectly.

Just another lesson in taking extreme care when editing code!

john t unger says:

Hi David,

Yeah, most page load errors on TypePad seem to stem from extra tags or unclosed tags! It's always the first place I check.

Unclosed tags in the sidebar are especially problematic, so I usually look there first. It's an easy mistake to make with sidebar items because so much cut and paste happens in that space.

Fran says:

Hi John,

I'm trying to put together a dynamic menu with the drop-down and I have the same question as Steve up above.

I can't get the drop-downs to work.

You suggested putting the Javascript between the head tags up above (http://www.typepadhacks.org/2006/05/how_to_create_a.html#comment-18338656), but I don't see any head tags in my main index template (I haven't checked the other ones yet. just trying to figure the main out!).

Do I need to create head tags, or is there something else I'm missing?!

Your help is GREATLY appreciated as I'm not a CSS person and this stuff makes my brain hurt!

Katie Konrath says:

I'd also really appreciate advice on the drop-down menu. I was able to create a dynamic menu with no problem, but I'm not sure about the additional steps talked about in the comments to create a drop-down one.

Please help us non-html gurus!

Roben-Marie says:

Thanks so much for these instructions. I have been wanting to add a simple navigation bar to my blog to cut down on sidebar clutter, but didn't know how. I fact, I am very new to all of this and thought it would be difficult. I found your instructions very easy to follow. I had a few problems, but was able to resolve them. Since the objective is to place the bar on my main blog page, I made a copy of it and used that for my practice blog. I had a few mistakes, but got it to work. I loved it! Here is my question, and I am sorry if I missed it reading through here or your other directions...I don't want to use Advanced Templates because I am so very new to this. I want to add the bar and then switch back to Basic Design. Is this possible? I don't want to take a chance and switch to Advanced on My default/Main Blog and then not be able to go back. And, if I can go back, will the addition of the nav. bar remain? Does this make sense?

Love your tips and directions are the best I've seen! Can't thank-you enough! Roben-Marie :)

john t unger says:

Hi Roben-Marie,

The nav bar will only work in advanced templates and will not remain if you switch back to basic templates. But there's no need to be scared of using an advanced template on your main blog… your old basic template will always be available to you under the tab "saved designs" (unless you intentionally delete it).

Advanced templates are needed for most of the hacks I documents here, and you can always try them out on a test blog like you described doing in your comment. So long as you try new stuff out on a test blog, there's really nothing to fear from going live with your new advanced template.

john t unger says:

Fran,

you can find everything you need to know about working with head tags in typepad in this post: Custom Head Module Reference Page

The comments to this entry are closed.

TrackBack

TrackBack URL for this entry:
http://www.typepad.com/services/trackback/6a00d8341c4fdf53ef00d834c047a769e2

Listed below are links to weblogs that reference How To: Create a Dynamic Horizontal Navigation Menu for TypePad Blogs:

» BLAUGI gets a nice new horizontal CSS menu. from BLAUGI Blog of Autodesk User Group International
If you cast your eyes along the bottom of the BLAUGI banner above, you should hopefully see 7 new AUGI blue (#004282) tabs running horizontally from left to right. The tabs have been added to aid with navigation (enhance end [Read More]

typepad hacks is a typepad featured weblog typepad hacks is listed on Alltop social media

Subscribe

Email RSS Comments  
Subscribe to TypePad Hacks with email Read TypePad Hacks posts via RSS Join the conversation at TypePad Hacks via RSS (comments feed) subscriber count

Search

Socialize

Twitter Logo
    follow typepadhacks on twitter

    Read and reply to the 100 most recent comments at the TypePad Hacks Community Page


    Grazr

    Colophon

    Powered by TypePad
    Member since 03/2005

    TypePad Status

    Creative Commons License