jquery load page content into div using a stored var

Question

I can't explain this but I'm trying to auto detect the page, and place the corresponding submenu for that page...

BASICALLY MY QUESTION IS HOW DO I WRITE THIS LINE...OR??

$( "#navsubmenu" ).load("Templates/navigation.html", submenu);

here is a bit of background:

//detect url
var page = window.location.href;
//strip off url address and get page name
var page_name = page.substring(page.lastIndexOf('/') + 1);
//concatenate string nav-submenu to page name and strip off html to get the submenu name

var submenu = '.nav-submenu-' + page_name.substr(0, page_name.lastIndexOf('.'));

in this example it is the index page:

<ul class="nav-submenu-index">
  <li class="sectionTitle">OF INTEREST</li>
  <li><a href="#">Link #1</a></li>
  <li><a href="#">Link #2</a></li>
  <li><a href="#">Link #3</a></li>
  <li><a href="#">Link #4</a></li>
  <li><a href="#">Link #5</a></li>
</ul>

so basically submenu will be nav-submenu-index if the page loaded is index.html

but I don't know how to write it correctly, this doens't work:

$( "#navsubmenu" ).load("Templates/navigation.html submenu");

I tried this and got ALL the menus on the while page, not the actual fragment:

$( "#navsubmenu" ).load("Templates/navigation.html", submenu);

and the div it writes into is just:

<div id="aside"></div>

Answer 1

Use string concatenation:

$("#navsubmenu").load("Templates/navication.html " + submenu);