Templating Sidebar Navigation

Description

This script manages a website's sidebar navigation(list of webpage links). Manually entering a website's links on each page is tedious and error prone. Using this script, all the links can be entered in a single file and they will all link up automatically.

Audience

Basic web design/development skills are required. You will be editing a list of links in an html file and creating corresponding html pages. With your website pages linked up, you will be left with a starting point for the rest of the website work of designing/developing and editing each of the pages.

This tool will be great for the web designer/develop who is currently editing their site wide navigation lists of links by hand. Or else, if you are using one of many platforms, libraries or frameworks primarily for the benefits of their template system then you may find this script does all that you need.

Usage

Once you download and extract the zip archive you will have a number of files. The index.html is the root file. Then there is an html, css and js file all named sidebar. You will not be interested in editing the sidebar.js file unless you are looking into further development. You will want to edit the sidebar.css file especially to change the colours. As a first time user, you will want to begin with the sidebar.html page. This is where you will edit your website's sidebar navigation list.

There are existing sample links to help you understand how the system works. For each link added in sidebar.html, you will want to add corresponding files. You can copy the index.html as a template. Then update the sidebar.js at the bottom of the page. For example, the sample "page" link is one level up and so the "./sidebar.js" link in "page/index.html" was updated to "../sidebar.js". The sample "page/level2" is two levels up and so the "./sidebar.js" link in "page/level2/index.html" was updated to "../../sidebar.js". Incidentally, this library alleviates the need for having to manually update such links. With out it, you would have to update all links on the page similarly. With it, you just update the one sidebar.js src link.

The width of the sidebar is set in both sidebar.css and sidebar.js files. See "#sidebarDiv" at line 51 in sidebar.css. If you want to change the width, you must edit both the width, left, box-shadow properties. Then see the corresponding "sidebarDiv.style.left" property setting at line 193 in sidebar.js. You will want to match to whatever width you prefer in both files.

Final Notes

This script reads the url and expects to be running from the root directory.

This script loads files after the firing of the load event and so you can not use it locally. It only works on a web server.

License

gpl v3

Free for personal or business use.
Source code is included -no obfuscation.
Not for re-sale.