Adding WP to a custom javascript website, made with list

I have a website I created here: https://stevenmorgandesigns.com/university/

The site is built with javascript and the entire thing is one unordered list, like so:

MY MENU:

<ul id="menu">

<li><a href="#!/page_home"><span>home</span><b></b></a></li>
<li><a href="#!/page_about"><span>about us</span><b></b></a></li>
<li class="with_ul"><a href="#!/staff"><span>our staff</span><b></b></a>

<li><a href="#!/page_records"><span>your records</span><b></b></a></li>
<li class="last"><a href="#!/page_contacts"><span>contact us</span><b></b></a>

THIS CORRESPONDS TO THE DIFFERENT PAGES (OR LISTS IN THIS CASE)

<li id="page_home">
<ul id="blockList">

<li>
<header class="bg1"><span>treatments</span>What we treat</header>
<div>
<img src="images/page1_im1.jpg" width="276" height="174">
<a href="#">Learn More About What We Treat</a> </div>
</li>
<li>
<header class="bg2"><span>how we treat</span>Treatments that we offer</header>
<div>
<img src="images/page1_img2.jpg" width="276" height="174">
<a href="#">Learn More About Treatments We Offer</a> </div>
</li>
<li>
<header class="bg3"><span>for your visit</span>What you need to bring</header>
<div>
<img src="images/page1_img3.jpg" width="276" height="174">
<a href="#">Learn More About What You Need To Bring</a> </div>
</li>

As you see the a href tag is very specific and it links to a new list item of the corresponding page. I cannot figure out a good way to impliment WordPress into this sort of HTML format.

I would also like my client to be able to create a new page on the menu bar.

Please let me know if you have way to do this.

[Moderator Note: Please post code or markup snippets between backticks or use the code button. As it stands, your code has now been permanently damaged/corrupted by the forum’s parser.]