JavaScript XML project phase 2

Phase 1 a JavaScript developer helped me to create the first foundations of this project, a purely JavaScript based front end which queries XML data and passes it into a view parsing data in a non specific but structured way, the end result was code which was dynamic and reusable.

The structure of the data has 3 levels.
1. Garden
2. Trunk
3. Branches

Phase 1 mainly dealt with the trunk and the branches, which is in this instance related to the bible as the trunk and the books as the branches from the XML documents, which queried this data and displayed in the view accordingly.
The specific data is pulled via URL hash, which is stored in the trunk data.
Phase 2 - what needs doing next.

Just as the trunk XML contained all the branch information, I would like a Garden.xml to contain all the trunk data, in phase 2 it will reference ENG_KJV.xml which is complete in terms of data structure, and a demo ENG_PLANTS.xml which will just reference a single piece of data to confirm it works as expected.

I want all of this to work from a single HTML file, which will serve as a kind of view and bootstrapper, the loading of this file will be dependant on the hash.

At the root which is referred to as the garden where no hash is present it will load the garden.xml file.
Someurl/ = garden.xml
In the garden.xml file it will contain data regarding all of the trees which are in the garden, to begin with ENG_KJV and ENG_PLANTS.

From this page the user will be presented with data extracted from the garden.xml file, along with a hyperlink which will take the user to the relevant trunk data.
For example from the garden someurl/ the user clicks King James Bible in English which will take the user to someurl/#ENG_KJV, this first hash also refers to the name of the XML file, ENG_KJV.xml
The part from here is already programmed and works, slight changes will need to be made to put things in line with this structure.

There will be a header which is visible when a user is in the trunk section.

Also in the trunk section there will be search function, here it will search name and shortname and tags, from the trunk xml file it is in, and all branches related to this trunk, any results will be displayed with pagination 10 results per page which are hyperlinked to the location it is found.

The header section which is currently an unordered list needs to be changed to a non styled dropdown menu with a go button, this menu needs to be dynamic as there will always be 2 options related to each other, eg Bible book and Chapter, or plant family and plant name, go will of course take the user to the relevant section.

From a styling perspective there will be some settings related to each trunk in the garden.xml file, for example there will be a default.css file, in phase 3 of this project there will be different themes which must be referenced from this XML file, so whatever is hard coded into this XML file is what is used when displaying this particular trunk.

I would also like the skeleton frame work done to make this mobile friendly.

If you require further information please let me know.

Just for further clarification this project must be written in pure JavaScript without any additional frameworks or libraries, the previous code uses AJAX for XML requests, I would also require the code to be commented especially the code related directly to styling.