Blog

Where we discuss our work, thoughts, and process

Quickly Build and Share a Sitemap with a jQuery Sitemap Creator

A while back we saw the SlickMap CSS that generated a sitemap from nested unordered lists and we were inspired. Since the DOM is so easy to manipulate using jQuery, why couldn't we build a nice and quick sitemap creator?  With a little bit of free-time hacking, we came up with the HiFi Sitemap Creator.

HiFi Sitemap Creator

With this tool it is easy to create and collaborate on a sitemap. Using the textbox on the right, you can build textile-like nested lists.  This instantly updates the sitemap to the left.  When you click the save button, a custom link is generated for your sitemap.  Share this with a client and they can see and edit the very same sitemap!  They can even make changes and send a link back.

Additionally, since this is based on CSS it prints beautifully:

sitemap print

This was largely based around the Slickmap CSS and jQuery.  Some custom functions were written to translate the textile list to and from html.  This will allow us to add cool features like edit-in-place and drag-and-drop in the future.  For now though, we really like being able to quickly type plain text and see generate a good-looking sitemap.

We also used the Recess PHP Framework to build a RESTful key-value store for the saved sitemaps.  This took no time at all becuase of the great scaffolding and tools it has out of the box.  It was my first time integrating Recess and jQuery and it couldn't have gone better.

Check out the final product and be sure to leave comments and suggestions on how to improve it.

Comments

's avatar
Mark Andrews
Wow this is so helpful. I will be using this with my clients from here on in. Is there a version that I can integrate with my website as a client tool?

Regards

Mark
's avatar
Mark Andrews
When I try to save the site map nothing happens?

Mark
's avatar
Aark Mndrews
Hi, have you ever got the drag drop to work with this?
's avatar
Ben NMC team member
Cool script. However, when you have a fourth level the tab remains yellow!!!

Can you amend the css pls so that it deepens up to 5 levels?
's avatar
Grace
Hi. Not able to save the sitemap. Any suggestion?
's avatar
windERP
When I am trying to add any hyperlink than it is not working. I am trying to create for my site http://www.winderp.com/ . Any Idea..?

Leave a comment

Real Time Web Analytics