« 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

ryan says:

You're my hero. I have been wanting this for so long! Well, I better get to hackin' - thanks!!!

James Milstid says:

John...
Thanks for the props!

You did a wonderful job of hacking my hack... it looks great! My version works fine, but wasn't quite ready for primetime and we discussed that via email. It was my plan to tweak it and make it pretty, but real life got in the way.

And you're right, there are so many other possibilities with this hack. I'm looking at implementing it in a footer or even replacing TypePad's text navigation atop the individual entry page... <-Previous | Main | Next-> ...or something like that.

I'm so glad you took the time to tweak it...

Thanks!
James

john t unger says:

Ryan, thanks! I really like the way it looks on this blog… can't wait to see what others do with it.

James,

Your instructions were great and really helped me figure this one out, so I totally owe you one. I'm geeked about all the other possibilities… Keep me posted as you play with it.

Bud Parr says:

This one's a keeper John - thanks!

lewism says:

Excellent hack, I'm working on mine at the moment too thanks to you. Also I found one other site which should really help make clean navigation menus and nav lists, listamatic it has tutorials too,its a good resource.

john t unger says:

Thanks Bud! I just noticed some buggy behavior with the menu in IE and camino, though so I may need to work on it a bit yet. Any thoughts you have would be appreciated, natch.

Thanks for the link to Listmatic, Lewism. Cool site!

Jay says:

Thanks! How about doing it with this version of the menu (drop down?)

http://www.dynamicdrive.com/dynamicindex1/chrome/index.htm

Is the trick where to place the external javascript file? In the main index right?

I get the menu nicely, it just doesn't drop down!

john t unger says:

Jay,

Wow, that menu is pretty sweet! I somehow didn't see it when I was looking at the dynamic drive site. I think I may have to switch to using it here!

If you look at the source code for the demo page

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. Either way, you'd need to do this on all the templates referenced in step 3 above.

I'll try playing with it sometime next week and give a more definitive answer then.

Jay says:

Thanks John! It worked fine. Now, did you finagle the google search so that it could fit in your menu as well? Did you place the form data in the same

  • element? Thanks John!

  • Nacho says:

    Well then, I tried the whole thing, including the dynamic drop down menus. You can see it here:

    WoodMoor Village

    Only a small problem... there is a gap between the menu text and the drop down menus, and I'm still trying to make sense of why. It did work well in another blog, with no gap at all.

    Any hints about how to get rid of that gap?

    Thanks again for the hack all!

    N

    Nacho says:

    John:

    Thanks for the hint and tips here. I was pretty successful modifying the script a bit and having it work. You can see it here:

    WoodMoor Village
    http://www.woodmoorvillage.org/

    The most difficult problem was not anything with the CSS at all! It was a stupid mistake. I had placed the external css file that comes with the drop down menu, in a directory that I later deleted. I forgot completely about that and kept tearing my non-existent hair out trying to figure out why the menu would not drop down! Well, duh! because the call to the external file just could not find it. In the absence of feedback I kept thinking it was something more obscure!

    In any case, thanks again. I tried adding the search box to the menu but no luck yet. We'll see if I can make it work later.

    Best,

    N

    Rich Owings says:

    Hi John-

    I tried modifying your instructions to use this for a 728 x 15 AdSense text ad, but I still can't get it to go all the way across the page. I'm pretty sure the problem is in the stylesheet. Any suggestions?

    Russell James says:

    Hi John, I came to your site after seeing you as the featured blog on Typepad and I love it. I've gone through this menu bar hack and managed to get the bar on my blog. The only problem is that it appears right at the top, over my blog header!

    I've changed back to the original template so you won't see the bar on my blog at the moment, but do you have any suggestions to get the menu to appear under the blog header, as it does on yours?

    Thanks for all your work here!

    Russell.

    Russell James says:

    Further to my last comment, I've worked out that the 'sliding doors' menu I was using doesn't work well on my blog so I've used the same chrome menu as you, which actually looks better.

    However, I'm now having trouble getting the menu to start where the graphic banner ends so there's a big green area under there!

    I've left it up on my blog to look at, if you can help, that would be great.

    Thanks!

    john t unger says:

    Hi Russel,

    I've taken a look at your blog and viewed the source code and CSS for the menu. It *looks* to me like you did it correctly…

    I can't see your actual template code, just the html output from it in the view source window, so it's a bit hard to tell exactly what's going on.

    But here's a good guess: When I click on the "big green area," it reloads your index page. That suggests to me that it isn't part of the menu you added, but part of the header where you have your logo graphic. The code for this was created when you originally started the blog as a basic template and is called into the main index template as a "pkg" which means that it uses a standard template served by TypePad (which doesn't show up in your template list). You *could* replace that with a custom template, but that might be overkill.

    I also can't find a reference to the color that's being displayed in the green area anywhere in your CSS, which is a bit weird.

    I'm gonna have to refer you to the TypePad Help Team on this one, I'm afraid. I just can't tell from here what's going on. Please do drop me a note and let me know if they're able to help you figure it out… I'd like to know, and it would help if I can pass the info on if the problem repeats on any other blogs.

    Russell James says:

    Hi John,

    I've managed to figure it out myself, which is a real result as I'm quite new to this CSS stuff! Here goes....

    You were right, the green colour that was coming through is the bottom of the original header that I was using when I first set up my basic blog. When I started using a graphic image (which is 180px high) instead of the Typepad header (210px high) I added this code to the CSS (not using advanced template at that time):

    #banner {height: 180px; background-position:0px 0px; }

    This served a purpose at the time as it covered the original header up to the bottom of the new graphic.

    Then I had a problem when I added the navigation bar as it was on top of the bottom part of the original Typepad header so when you clicked on any of the buttons it just took me back to my index page. You could see the buttons nicely but effectively they were 'underneath' the header.

    So then I adjusted the CSS above to

    #banner {height: 210px; background-position:0px 0px; }

    That meant that my buttons worked but it left that green area exposed. So then I went into the stylesheet and changed the colur of that original header to white (FFFFFF), which was better but still meant there was a gap. Then I found this code in the stylesheet:

    #banner-header a
    {
    display: block;
    left: 0;
    top: 0;
    height: 210px;
    text-indent: -1000em

    I've now changed the 210px to 175px which has reduced the header nicely.

    Job done!

    Thank you!

    Russell.

    john t unger says:

    Russel,

    Congrats! It looks totally awesome!

    Also, thanks for sharing in such detail how you were able to fix the problem… That kind of info can be really helpful to other readers who may have similar issues. Plus, heck, it's just inspiring when you see someone figure stuff out on their own.

    I think this deserves a post on the blog as an example of brave hacking. Yeah, maybe a weekly medal of honor kind of thing… Stay tuned.

    Julie says:

    I know absolutely nothing about using advanced templates and changing code, but with your instructions I was able to add a navigation bar to my blog. Trust me, that is saying a lot. It turned out really good and it was much easier than I expected. I am so happy with your help that I included your website as one of the buttons. Thank you for your help, I'll be back for more.
    You can check out my fancy new navigation bar here: http://blahdiblah.blogs.com/blahdiblah/

    john t unger says:

    Julie,

    Man, I love hearing feedback like that! I'm so glad it worked well for you. And thanks for the link… that's really cool!

    jlt says:

    man, i am lame. none of the hacks i try seem to work. maybe the powell street advanced templates i've been putting them into somehow miss the necessary code or don't relate to modules as they should, or maybe i'm an idiot.

    i tried this, and all I got was a little ">" at the very top of my blog. oh well!

    jlt says:

    ok, i think i got it to work. i need to get rid of the > from the top of the weblog, no idea how that got there, and format it to match the rest of the site, but otherwise, i think it's working! yay!

    thanks for the example! this site is a goldmine of information!

    john t unger says:

    jlt,

    Looks good to me. I like the new design!

    The basic templates pre-designed by TypePad don't always include all the code you might want if you're going to tweak templates. It's usually best to start from scratch in the design wizard and then convert to advanced when you've done as much as you can do in basic to realize the design you want.

    Graham says:

    John, I'd love to see your run through on how to install the dropdown version of the chrome menu. I've tried and failed to do it, whereas I had no major difficulty following your non-dropdown version.

    john t unger says:

    Graham,

    I'm kind of working on applying the dropdown menu to one of my other blogs. When I get the thing working, I will do a tutorial.

    Code is still proving pretty difficult for me to follow while I get through this quit smoking thing… I'm hoping it'll get easier soon (or I could always go back to smoking. but not coding is out.)

    If you could email me some info about where you got hung up, that might help.

    Jim says:

    Can anyone help?
    After following the above directions, I had a great Chrome Toolbar.
    Then, suddenly it place of the toolbar I have the words: "Image Not Available"
    See here: www.realestatetomato.com
    What have I done and how do I go about getting it back to where it was?
    Thanks for your help.

    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