I tried using CSS as below but didn't work, is there any jQuery to use for telerik menu to do such thing
ul#menu1 li a
{ background-color: #0067b1;
padding: 0.5em 0.5em;
font-size : 1.0em small;
text-decoration: none;
line-height: 2.2em;
}
ul#menu1 li a:hover {
background-color:#72cef5;
padding: 0.5em 0.5em;
font-size : 1.0em small;
text-decoration: none;
line-height: 2.2em;
}
ul#menu1 li a:active {
background-color: #72cef5;
text-decoration: none;
}
ul#menu1 li.selected a {
background-color:#72cef5 ;
color: #000 !important;
}
16 Answers, 1 is accepted
I am not sure how you set the ".selected" CSS class in your last CSS rule, but the !important clause there will prevent any other color style from being applied. In addition, the ".selected" CSS rule is last, so its color style will take precedence over the previous color styles anyway.
So you should remove the !important clause and move the 4th CSS rule to a 3rd position.
Kind regards,
Dimo
the Telerik team
Rank 1
Hi Dimo,
Thank you for your above suggestion but didn't work. But now i am using the below telerik code for my menu bar, its working fine but i want to hightlight selected menu item when it is clicked. Is there any thing i have to change in CSS or any jquery which will help.
@{ Html.Telerik().Menu()
.Name(
"Menu")
.Items(menu =>
{
menu.Add().Text(Html.ActionLink("Home", "Index", "Home").ToHtmlString()).Encoded(false);
menu.Add().Text(Html.ActionLink("Accounts", "Index", "Accounts").ToHtmlString()).Encoded(false);
menu.Add().Text(Html.ActionLink("More...", "Index", "More").ToHtmlString()).Encoded(false)
.Items(item => {
item.Add().Text(Html.ActionLink("Products", "Index", "Products").ToHtmlString()).Encoded(false);
item.Add().Text(Html.ActionLink("Exports", "Index", "Exports").ToHtmlString()).Encoded(false);
});
}).Render();}
Thank you in advance.
I am starting to suspect that I don't understand what exactly are you trying to do and what do you mean by "selected item" - is it simply the item that the user is currently clicking, or it is the item that corresponds to the current web page?
If the following CSS does not serve your purpose, please provide a runnable project or a live URL, so that I can see what is your scenario.
#Menu .t-link a{ color: #000; text-decoration: none;}#Menu .t-link a:hover{ color: #009;}#Menu .t-link a:active{ color: #f00;}All the best,
Dimo
the Telerik team
Rank 1
Thank you for your reply. To make more clear i have attached the image how i want the menu bar, sorry the project i am working is not hosted and i can't provide you the runable URL.
Ya i mean simply when user is clicking "Home" than it should change its colour as active, i think attached picture will make you more clear, it shows how "Home" highlighted when user is in that page.
In telerik menu bar i couldn't find that property.
Pls need your help asap.
Thanks
If I understand correctly, your question is not related to the clicking itself, but the the menu item's selected state, which is related to the currently displayed web page.
First of all, you should implement the Menu in such a way, so that the selected state CSS class is applied to the corresponding menu item when the user is on a given web page. For example:
http://demos.telerik.com/aspnet-mvc/menu/sitemapbinding
In case you prefer using hard-coded items, it is better to specify the actions and routes via the Action setting, instead of injecting a whole new ActionLink in the Text():
<% Html.Telerik().Menu() .Name("Menu1") .Items(menu => { menu.Add().Text("Home").Action("FirstLook", "Menu"); menu.Add().Text("SiteMap").Action("sitemapbinding", "Menu"); menu.Add().Text("Binding to Model").Action("databindingtomodel", "Menu"); menu.Add().Text("Templates").Action("templates", "Menu"); }) .ItemAction((item) => { if (item.ActionName == "FirstLook") { item.Selected = true; } }) .Render();%>Of course, the condition check above is overly simplified.
So now that you have the t-state-selected CSS class working, you need some custom CSS:
.t-menu .t-link a{ text-decoration: none; color: #666;}.t-menu .t-state-selected{ background-color: #355b7e; padding-top:4px; margin-top:-4px; -moz-border-radius: 4px 4px 0 0; -webkit-border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0;}.t-menu .t-state-selected a{ color: #fff;}.t-menu .t-state-selected .t-link:hover{ background-color:transparent;}The above styles are your starting point. You will need to tweak the Menu appearance some more, to achieve the desired look.
All the best,
Dimo
the Telerik team
Rank 1
Thank you for your answer. Because i am new with Telerik and MVC so i am still having problem.
From below code it shows if "Home" is clicked it is highlighted but if i click "SiteMap", still "Home" highlighted. so How can we put the condition on this code below to make if "SiteMap" is clicked then only it is highlighted and Home is back to original color and so on to "Binding to Models" and Templates".
.ItemAction((item) => { if (item.ActionName == "FirstLook") { item.Selected = true; } })
For example and to better clarify my requirement i have attached the link of one web application,
please see the menu of this website. how the background color changed if selected when you are in the "Product" page
and when you click "resource", "Products" page color goes to original and "Resources" is seleted and highlighted
http://www.sugarcrm.com/crm/products/crm-products.html
I don't see a link in your message, but please inspect the attached demo, which shows how the selected Menu item changes according to the current page.
Kind regards,
Dimo
the Telerik team
Rank 1
yes thats the one i am talking about. But it is done in .aspx but how do i apply those properties in my MVC RAZOR i mean in below code.
<% Html.Telerik().Menu() .Name("Menu1") .Items(menu => { menu.Add().Text("Home").Action("FirstLook", "Menu"); menu.Add().Text("SiteMap").Action("sitemapbinding", "Menu"); menu.Add().Text("Binding to Model").Action("databindingtomodel", "Menu"); menu.Add().Text("Templates").Action("templates", "Menu"); }) .ItemAction((item) => { if (item.ActionName == "FirstLook") { item.Selected = true; } }) .Render();%>The link i had attached was below but i am not sure why you can't see. http://www.sugarcrm.com/
http://www.sugarcrm.com/crm/
In this case the WebForms and Razor syntax are identical.
Dimo
the Telerik team
Rank 1
On below code, i tried it highlight the Firstlook and also sitemapbinding. Is there any property that i can appliy as if Fistlook is click than it is highlighted and other is not and if sitmapbinding is click than only sitemapbinding is highlighted and not FirstLook.
.ItemAction((item) => {
if (item.ActionName == "FirstLook") { item.Selected = true; }
if (item.ActionName == "sitemapbinding")
{
item.Selected = true;
}
})I did not understand your question. In case you want to apply CSS classes at the moment the user clicks on a Menu item, you can do this manually via DOM operations in the OnSelect event.
http://www.telerik.com/help/aspnet-mvc/telerik-ui-components-menu-client-api-and-events.html#ClientEvents
http://demos.telerik.com/aspnet-mvc/menu/clientsideevents
Dimo
the Telerik team
Rank 1
Thank you for your help,
Below is my code how i am trying to make menu. I got a problem with Ajax.ActionLink as shown below in filter. When i apply this code "Filter" option is highlighted and doesnot go off when clicked to "Add". Please let me know what went wrong.
<
div id="menu">
@{ Html.Telerik().Menu()
.HtmlAttributes(new { style = "background: blue; font-weight:bold; color:White; text-decoration:underline;" })
.Name("Menu").Items(menu => {
menu.Add().Text("Add").Action("Addlist", "Account");
menu.Add().Text("Edit").Action("Index", "Home");
menu.Add().Text("Maintenance").Action("Index", "Home");
menu.Add().Text(Ajax.ActionLink("Filter", "FilterShow", "Account",
new AjaxOptions
{UpdateTargetId =
"ViewFilter",
InsertionMode = InsertionMode.Replace,
HttpMethod = "GET"
}).ToHtmlString()).Encoded(
false);
menu.Add().Text(
"Export").Action("Index", "Home");
})
.ItemAction((item) =>
{
var url = Request.Url.ToString();
url = url.Substring(url.IndexOf("//") + 2);
if ((url.IndexOf("/" + item.ActionName) >= 0) ||
(item.ActionName == "Index" && item.ControllerName == "Home") && (url.IndexOf("/") < 0 || url.IndexOf("/") == url.LastIndexOf("/")))
{
item.Selected = true;
}
}).Render();}
</div>
<style type="text/css">
#menu.t-menu a.t-link
{ text-decoration: underline;
color: White;
}
#menu.t-menu .t-state-selected
{
background: #e5effb url('Content/Telerik/Office2007/sprite.png') repeat-x 0 -560px;
-moz-border-radius: 4px 4px 0 0;
-webkit-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0;
}
#menu.t-menu .t-state-selected a
{
color: black;
text-decoration:underline;
}
#menu.t-menu .t-state-selected .t-link:hover
{
background-color:transparent;
}
</style>
I suspect the problem is caused by the fact that the Filter item is implemented differently, compared to the other items, so it becomes Selected. Please debug and modify your ItemAction method.
In addition, since the Filter button does not cause a page reload, ItemAction is not executed, so you may end up with the wrong selected Menu item. In this case you may need to remove and add the t-state-selected CSS class manually.
Dimo
the Telerik team
Rank 1
Yes, it is caused by filter because Ajax is used for filter option. How can i remove and add the t-state-selected CSS class manually? Where do i need to add this, could you please point out on my above code.
Thank you!
You can do this easily with jQuery. For example
Removing the class in the OnSelect event handler
$(".t-state-selected", this).removeClass("t-state-selected");
Adding the class in the OnSelect event handler
$(e.item).addClass("t-state-selected");
http://demos.telerik.com/aspnet-mvc/menu/clientsideevents
Dimo
the Telerik team
Rank 1