title: Changing the selected Menu items class across pages
body: <p>For my website project I am using ASP.NET MVC "Razor". Learning as I go.</p>
  
  <p>I have 5 or 6 pages on my site, and one page that is on another site.  I want users to feel like they are using the same site for all. </p>
  
  <p>There is a typical HTML menu for the pages which follows the standard pattern of using a XHTML unordered list and CSS to layout:</p>
  
  <pre><code>&lt;ul id="menu"&gt;
      &lt;li class="selected"&gt;&lt;a href="@Href("~/")"&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="http://ceklog.kindel.com"&gt;cek.log&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="@Href("~/Services")"&gt;Services&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="@Href("~/Charlie")"&gt;Charlie's Stuff&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="@Href("~/Contact.cshtml")"&gt;Contact&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Elsewhere on SO I found questions similar to mine, where people wanted to track the selected menu item, but within a dynamic page. For example:</p>
  
  <p><a href="https://stackoverflow.com/questions/3968763/javascript-changing-the-selected-menu-items-class">Javascript Changing the selected Menu items class</a></p>
  
  <p>But this approach won't work in my case because in my case the user is not changing a selection on one page, but navigating to another page completely.</p>
  
  <p>How can this be done?</p>