HIGHLIGHTING THE MENU ITEM.

Munikumar G

Total Post:9

Points:63
Posted by  Munikumar G
 2559  View(s)
Ratings:
Rate this:

Hi,

I am using Menu controls like this.how can i highlighting the menu item here.

<%

 

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

<%

if (Request.IsAuthenticated) {

%>

Welcome

<b><%: Page.User.Identity.Name %></b>!

[ <%

: Html.ActionLink("Log Off", "LogOff", "Account") %> ]

<%

}

else {

%>

<ul id="top-navigation">

<li><span><span><%: Html.ActionLink("Dashboard", "Index", "AppHome")%></span></span></li>

<li><span><span><%: Html.ActionLink("Index", "Index", "AppHome")%></span></span></li>

  

<li><span><span><%: Html.ActionLink("About", "About", "AppHome")%></span></span></li>

</ul>

<%

}

%>

 

In site.master using like this.

<% Html.RenderPartial(

"LogOnUserControl"); %></div>

Thanks

Munikumar

  1. Chris Anderson

    Post:65

    Points:455
    Re: Highlighting the menu item.

    Hi,

    You can highlight menu item by using CSS.
    For eg.

    <html>
    <head runat="server">
        <title>Index</title>
        <style type="text/css">
            .required
            {
                text-decoration:none;
            }
            .required:hover
            {
                background-color:Blue;
                color:White;
            }
            li
            {
                list-style-type:none;
                display:inline;
                margin-left:10px;
            }
        </style>
    </head>
    <body>
        <div>
            <ul>
                <% foreach (var hobby in ViewBag.Hobbies) { %>
                <li>
                    <font color="blue"><%: Html.ActionLink((string)hobby, "Index", "Home", new { @class = "required" })%></font>
                </li>
                <% } %>
            </ul>
        </div>
    </body>
    </html>

  1. Munikumar G

    Post:9

    Points:63
    Re: Highlighting the menu item.

    Hi,

     Thanks Rohit.

      But selected menu item how to create.

     

       Thanks

    Munikumar

  1. Chris Anderson

    Post:65

    Points:455
    Re: Highlighting the menu item.

    Hi Muni,

    First you have to create class in css, as given below:

        <style type="text/css">
            .required
            {
                text-decoration:none;
            }
            .required:hover
            {
                background-color:Blue;
                color:White;
            }
        </style>

    After creating css, apply css class in ActionLink control:

    <%: Html.ActionLink("Home", "Index", "Home", new { @class = "required" })%>

  1. Chris Anderson

    Post:65

    Points:455
    Re: Highlighting the menu item.

    hi,

    You can modify the look of menus with the help of css that how menu look initially and react after selecting.
    have you got your answer?

      Modified On Nov-03-2011 01:22:38 AM
  1. Munikumar G

    Post:9

    Points:63
    Re: Highlighting the menu item.

    Hi,

    I am using this code for MenuItem highlighting.It's working..........

    1.Site.Mater

           <% Html.RenderPartial("MenuControl"); %>

    2.MenuControl.ascx

           <ul id="top-navigation">
     <li><%: Html.ActionMenu("Campaigns", "Index", " Home ")%></li>
      <li><%: Html.ActionMenu(" Campaigns", "Index", "Home")%></li>
      <li><%: Html.ActionMenu("Mails", "Index", "Home")%></li>
    <li><%: Html.ActionMenu("My Reports", "Index", " Home ")%></li>
    </ul>

    3.Then create new folder in app. Name like Html

             namespace EMM360.Html
    {
    public class Extention
    {
    public static Dictionary<Menu, Menu> GetDictionary()
    {
    Dictionary<Menu, Menu> urls = new Dictionary<Menu, Menu>();
    urls.Add(new Menu { Controller = "AppHome", Action = "Index" }, new Menu { Controller = "AppHome", Action = "Index" });
    urls.Add(new Menu { Controller = "Email", Action = "Index" }, new Menu { Controller = "Email", Action = "Index" });

    return urls;
    }
    }
    public static class HtmlExtensions
    {
    public static MvcHtmlString ActionMenu(this HtmlHelper helper,String linkText,string actionName,String controllerName)
    {
    var tag= new TagBuilder("li");
    if(helper.ViewContext.RequestContext.IsCurrentRoute(null,controllerName,actionName)||
    helper.ViewContext.RequestContext.IsParentRoute(controllerName,actionName))
    {
    tag.AddCssClass("active");
    }
    else
    {
    tag.AddCssClass("inactive");
    }
    tag.InnerHtml = helper.ActionLink(linkText, actionName, controllerName).ToString();
    return MvcHtmlString.Create(tag.ToString());
    }
    }
    public static class RequestExtentions
    {
    public static bool IsCurrentRoute(this RequestContext context, String areaName)
    {
    return context.IsCurrentRoute(areaName, null, null);
    }
    public static bool IsCurrentRoute(this RequestContext context, String areaName, String controllerName)
    {
    return context.IsCurrentRoute(areaName, controllerName, null);
    }
    public static bool IsCurrentRoute(this RequestContext context, String areaName, String controllerName, params String[] actionNames)
    {
    var routeData = context.RouteData;
    var routeArea = routeData.DataTokens["area"] as String;
    var current = false;

    if (((String.IsNullOrEmpty(routeArea) && String.IsNullOrEmpty(areaName)) || (routeArea == areaName)) &&
    ((String.IsNullOrEmpty(controllerName)) || (routeData.GetRequiredString("controller") == controllerName)) &&
    ((actionNames == null) || actionNames.Contains(routeData.GetRequiredString("action"))))
    {
    current = true;
    }
    return current;
    }
    public static bool IsParentRoute(this RequestContext context, String controller, String action)
    {
    var routeData = context.RouteData;
    Menu returnUrl = null;
    Menu requestUrl = new Menu { Action = routeData.GetRequiredString("action"), Controller = routeData.GetRequiredString("controller") };
    Menu linkUrl = new Menu { Action = action, Controller = controller };

    var urls = Extention.GetDictionary();
    urls.TryGetValue(requestUrl, out returnUrl);

    if (returnUrl != null && returnUrl.Equals(linkUrl))
    return true;
    else
    return false; ;
    }
    }
    }



    4. Create Menu Model

    public string Text { get; set; }
    public string Action { get; set; }
    public string Controller { get; set; }

    public override bool Equals(object obj)
    {
    return base.Equals(obj as Menu);
    }
    public bool Equal(Menu obj)
    {
    return obj != null && obj.Action == this.Action && obj.Controller == this.Controller;
    }
    public override int GetHashCode()
    {
    return (Action + Controller).GetHashCode();
    }


       

        Thanks

    G Munikumar

Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!