Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Take a look at jQuery's superfish plugin</p> <p><a href="http://users.tpg.com.au/j_birch/plugins/superfish" rel="nofollow noreferrer">http://users.tpg.com.au/j_birch/plugins/superfish</a> - go to Examples and nav-bar style</p> <p>This works by building up a html list and uses jquery and css to style it.</p> <pre><code>&lt;ul&gt; &lt;li&gt;&lt;a href=""&gt;Top level item 1&lt;/a&gt; &lt;ul&gt; &lt;li&gt;&lt;a href=""&gt;Sub item&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt;&lt;a href=""&gt;Top level item 2&lt;/a&gt; &lt;ul&gt; &lt;li&gt;Sub item&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;/ul&gt; </code></pre> <p>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.</p> <p>Here's a menu.ascx partial view I created.</p> <pre><code>&lt;%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %&gt; &lt;% string menu = ViewContext.RouteData.Values["Controller"].ToString().ToLower(); %&gt; &lt;% string submenu = ViewContext.RouteData.Values["Action"].ToString().ToLower(); %&gt; &lt;div id="navigation"&gt; &lt;ul id="menu" class="nav-menu nav-navbar"&gt; &lt;% if (menu=="home") { %&gt;&lt;li class="current"&gt;&lt;% } else { %&gt;&lt;li&gt;&lt;% } %&gt; &lt;%= Html.ActionLink("Home", "Index", "Home") %&gt; &lt;ul&gt;&lt;/ul&gt; &lt;/li&gt; &lt;% if (menu=="configuration") { %&gt;&lt;li class="current"&gt;&lt;% } else { %&gt;&lt;li&gt;&lt;% } %&gt; &lt;%= Html.ActionLink("Configuration", "Index", "Configuration") %&gt; &lt;ul&gt; &lt;% if (menu=="configuration" &amp;&amp; submenu=="page") { %&gt;&lt;li class="current"&gt;&lt;% } else { %&gt;&lt;li&gt;&lt;% } %&gt; &lt;%= Html.ActionLink("Pages", "Pages", "Configuration") %&gt; &lt;/li&gt; &lt;% if (menu=="configuration" &amp;&amp; submenu=="headline") { %&gt;&lt;li class="current"&gt;&lt;% } else { %&gt;&lt;li&gt;&lt;% } %&gt; &lt;%= Html.ActionLink("Headlines", "Headlines", "Configuration") %&gt; &lt;/li&gt; &lt;% if (menu=="configuration" &amp;&amp; submenu=="file") { %&gt;&lt;li class="current"&gt;&lt;% } else { %&gt;&lt;li&gt;&lt;% } %&gt; &lt;%= Html.ActionLink("Files", "Files", "Configuration") %&gt; &lt;/li&gt; &lt;% if (menu=="configuration" &amp;&amp; submenu=="rules") { %&gt;&lt;li class="current"&gt;&lt;% } else { %&gt;&lt;li&gt;&lt;% } %&gt; &lt;%= Html.ActionLink("Application Rules", "Rules", "Configuration") %&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; ... </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload