Easy menus on vanilla hosting (GDrive or site44)

Way back when (I'm not too sure about how long ago now) I volunteered to work on a site for a charity. This was when I was first starting out in the web and I wanted to not only produce a good finished product but I also wanted to test out all sorts of new techniques. I seem to remember making JavaScript jump through all sorts of loops in order to make the menu for the site. Someone ran it through an analyser though and because the analyser wasn't very good and because I'd misused JavaScript to such an extent it failed in terms of SEO. Chastened I re-wrote it using server side (PHP) includes and felt a little disappointed.

Things have changed though!

I love the idea of free and a mate's nephew recently asked about getting his first website up and running easily and cheaply. I pointed him to site44, simply sign up for a free Dropbox account, link the two and you can edit files on your local machine and see the result on the internet using a site44 URI. Brilliant!

Then a couple of weeks back I got to hearing about Google allowing shared folders to serve their content, including HTML. I just had to have a play with this and so came about my rather limited site hosted on GDrive (an easier URI to remember is http://gdriv.es/drmsite).

But getting back to my original point: I use BootStrap a lot now in order to standardise the look and feel of my stuff. As such I have a lovely fixed menu bar on all pages but remembering to add each and every new page I create is a pain in the arse! I also follow the pattern of creating each new project in it's own directory. This meant that I got to starting to think about using JavaScript to create the menu on each page. I'd need to define the new project in one place and one place only and JavaScript would do the rest!

So I created a vars.js file:

var links = [
    {
        "url":"folder1",
        "text":"Project 1"
    },
    {
        "url":"folder2",
        "text":"Project 2"
    },
    {
        "url":"folder3",
        "text":"Project 3"
    },
    {
        "url":"folder4",
        "text":"Project 4"
    },
    {
        "url":"folder5",
        "text":"Project 5"
    },
    {
        "url":"folder6",
        "text":"Project 6"
    }
];
var base = "<The public link to your shared folder>";

The <The public link to your shared folder> link is an interesting one and is explained in greater detail on this comment on lifehacker.

I also created a simple functions.js:

$(function(){
    if(getDir() === base){
        $.each(links, function(k,v){
            $("#siteLinks").append($("<li></li>").append($("<a></a>", {
                "href": v.url,
                "text": v.text
            })));
        });
    }else{
        var dir = getDir();
        $.each(links, function(k,v){
            if(dir === base + "/" + v.url){
                $("#siteLinks").append($("<li></li>", {
                    "class": "active"
                }).append($("<a></a>",{
                    "href": "./",
                    "text": v.text
                })));
            }else{
                $("#siteLinks").append($("<li></li>").append($("<a></a>", {
                    "href": "../" + v.url,
                    "text": v.text
                })));
            }
        });
    }
});

function getDir(){
    var path = document.location.pathname;
    var dir = path.substring(path.indexOf('/', 1)+1, path.lastIndexOf('/'));
    return dir;
}

This means that all I need to do include vars.js and functions.js in each file and make sure that my menu declaration has this snippet of HTML:

<div class="nav-collapse">
    <ul class="nav" id="siteLinks"></ul>
</div>

Easy ehh?

UPDATE

I've updated the script, listing is here: http://drmsite.blogspot.co.uk/2013/03/multi-level-bootstrap-menu-on-gdrive-or.html.