I have the following file structure in my project. The files I will be using in this tutorial are all found in the root directory “loopreportingapp.github.io” ~ as shown by the image below.
In my adventure today, I will be using jQuery to import code snippets of the files “menu.html” and “side-bar.html” into “index.html” and other html files that are in the project folder “reports”. Having the file system structured this ways is organized and okay but it causes havoc when it comes to updating the sidebar and navigation menu’s of html files in the reports folder.
I know most of you experts out there will suggest using php or dynamic scripting but the problem with my app is i don’t have a mysql server account or even a fair bit of knowledge about php or other dynamic scripting languages out there. If you are someone who is in my shoes, then you’re in luck coz this tutorial is for you.
Diving straight into coding
I’m going to cut the long chase and dive right into coding now.
1. Import your jQuery file into “index.html” by typing this code into header
This is assuming, your jquery file is in the same directory as your “index.html” file. 2. Navigate to where you want your “dynamic” menu to be loaded to and create a div there. Give it an ID. This is important as you shall see in the next step. Below is my example of the main navigation menu div
Make sure you put nothing else in between the opening and the closing div tags. 3. Type in this code before the closing body tag.
4. Save your html file and open it in a browser. You should see the menu appearing where you want it to.
Sample Files & Source Code
Below are sample source codes of my project files.
I got most of my materials for this tutorial on these sites