Question

I’m looking to create a top-level horizontal menu, with a second-level horizontal menu below it. Clicking on the top level menu causes the second level menu to change, based on the top level one. clicking on a second level menu causes the content of the page to change.

(BTW – I’m looking to do all this in ASP.NET MVC, so if you have any insights specific to this framework, please share them).

1. I’m not sure what’s the best way to do the two-level menu, so there are zero page refreshes while the user plays with the top level menu. (CSS menu? javascript manipulating the page? a combination of both?)

2. How do I make the app refresh/redirect/load only the bottom pane (the main content of the page), rather than the entire page? ASP.NET MVC is pretty much full-page oriented by default. Should I frame its pages?

I’m a hard-core server developer working on his first web app, so be gentle… 🙂

Answer 1

Take a look at jQuery’s superfish plugin

http://users.tpg.com.au/j_birch/plugins/superfish – go to Examples and nav-bar style

This works by building up a html list and uses jquery and css to style it.

<ul>
   <li><a href="">Top level item 1</a>
       <ul>
           <li><a href="">Sub item</a></li>
       </ul>
   </li>
   <li><a href="">Top level item 2</a>
       <ul>
           <li>Sub item</li>
       </ul>
   </li>
</ul>

Each item could/should relate to a controller/action method. You will then have to work out which controller/action you are viewing to make sure the correct menu item is selected for each page.

Here’s a menu.ascx partial view I created.

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>

<% string menu = ViewContext.RouteData.Values["Controller"].ToString().ToLower(); %>
<% string submenu = ViewContext.RouteData.Values["Action"].ToString().ToLower(); %>

<div id="navigation">
    <ul id="menu" class="nav-menu nav-navbar">
        <% if (menu=="home") { %><li class="current"><% } else { %><li><% } %>
      <%= Html.ActionLink("Home", "Index", "Home") %>
   <ul></ul>
  </li>
  <% if (menu=="configuration") { %><li class="current"><% } else { %><li><% } %>
      <%= Html.ActionLink("Configuration", "Index", "Configuration") %>
   <ul>
       <% if (menu=="configuration" && submenu=="page") { %><li class="current"><% } else { %><li><% } %>
        <%= Html.ActionLink("Pages", "Pages", "Configuration") %>
    </li>
    <% if (menu=="configuration" && submenu=="headline") { %><li class="current"><% } else { %><li><% } %>
        <%= Html.ActionLink("Headlines", "Headlines", "Configuration") %>
    </li>
    <% if (menu=="configuration" && submenu=="file") { %><li class="current"><% } else { %><li><% } %>
        <%= Html.ActionLink("Files", "Files", "Configuration") %>
    </li>
    <% if (menu=="configuration" && submenu=="rules") { %><li class="current"><% } else { %><li><% } %>
        <%= Html.ActionLink("Application Rules", "Rules", "Configuration") %>
    </li>
   </ul>
  </li>
  ...