how to set active menu selected item

Oct 29, 2013 at 6:09 PM
Hello,

I would like to have the background color of my menu button item changed when i selected it.
Not only when i click on it but also I want to reflect the chosen page.

Thanks

Emmanuel
Oct 30, 2013 at 3:58 AM
Edited Oct 30, 2013 at 4:02 AM
You have 2 options:

1) go to App_Code > rcHelpers.cshtml and change simple menu helper - think would be the "cleanest" way to do it. You can detect what page the user is on and apply css to menu element
try the top menu http://www.quoteauto-insurance.com/

2) you can use jquery to detect the page name and apply css
try the top menu - same result with jquery http://www.garageforyou.com/
Oct 30, 2013 at 5:57 PM
Thanks for your answer

Could you provide an example of the simple menu helper or a link to a tutorial
I tried to found something to be applied in razor but without success

Thanks

Emmanuel
Nov 1, 2013 at 2:26 PM
One way of doing that would be something like that (you will have to change it to fit your menu, but it should give you some idea how it can be done) :
@helper SimpleMenu()
    {
    var db = Database.Open("razorC");
    var sqlSelect = "select * from rc_SimpleMenu order by smOrderId DESC";
    var data = db.Query(sqlSelect);
    
    var pageName = Context.GetRouteValue("rcPageName");
    if ((pageName == null) || (pageName=="default")) { pageName = ""; }
    
   <ul class="sf-menu">
   @for (int i = 0; i < data.Count(); i++)
   {

       if (data.ElementAt(i).smURL.ToString().StartsWith("~"))
       {
       <li @if(i==0){<text>class="first"</text>}>
       <a @if (pageName.ToLower()== data.ElementAt(i).smURL.Replace("~/", "").ToLower())
          {<text>class="current"</text>} href="@Href(data.ElementAt(i).smUrl)" target="@data.ElementAt(i).smTarget">@data.ElementAt(i).smName</a></li>
       }
       else
       {
        <li @if(i==0){<text>class="first"</text>}>
        <a href="@data.ElementAt(i).smUrl" target="@data.ElementAt(i).smTarget">@data.ElementAt(i).smName</a></li>
       }
       
   }
   <li class="last"></li>
    </ul>
}
Nov 1, 2013 at 2:57 PM
Thanks a lot

I will try and let you know

Emmanuel
Nov 1, 2013 at 3:13 PM
Everything is perfect thnks a lot

I am waiting for the new vesion to be available

Emmanuel
Nov 20, 2013 at 10:59 AM
just fyi..

more or less the same when i had to do it

@helper SimpleMenu() {
var db = Database.Open("razorC");
var sqlSelect = "select * from rc_SimpleMenu order by smOrderId DESC";
var data = db.Query(sqlSelect);
//
var testtt = Context.GetRouteValue("rcPageName");
if (testtt == "default") { testtt = ""; }
testtt = "~/" + testtt;
foreach (var row in data)
{
    if(row.smURL.ToString().StartsWith("~")){


        if (String.Equals(row.smURL.ToString(), testtt))
        {
            <li><a href="@Href(row.smUrl)" target="@row.smTarget" class="active">@row.smName</a></li>
        }
        else
        {
            <li><a href="@Href(row.smUrl)" target="@row.smTarget">@row.smName</a></li>
        }
    }
    else
    {
        <li><a href="@row.smUrl" target="@row.smTarget">@row.smName</a></li>
    }
}
}