[Solved] Menu styling (Removing down arrow)

[ls]

I have been holding off on using the Telerik MVC menu because your Webforms menu looks so much better.  Is there any way to remove the down arrow from each menu header.   It seems kind of redundant with so many top level categories.

Thanks,

Mike

[Alex Gyoshev]

Hi Mike,

The following CSS will remove the arrow:
.t-menu .t-arrow-down {
    display: none;
}

Greetings,
Alex Gyoshev
the Telerik team

[ls]

Alex,

Worked great!   Thanks.

I'm sure this is a long shot but could the ASP.NET MVC menu ever be made to look similar the ASP.NET AJAX menu?

http://demos.telerik.com/aspnet-ajax/menu/examples/default/defaultcs.aspx

For example the rounded corners and back shadow is what gives the Ajax menu that polished look.   Is this not possible in MVC?

[Alex Gyoshev]

Hello Mike,

The following styles would enable rounded corners for browsers that support the border-radius CSS3 property:

.t-menu .t-animation-container
{
    margin-top: -3px;
}

.t-menu .t-group
{
    padding: 1px 2px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}
       
.t-menu .t-group .t-item
{
    padding: 1px 0;
}

.t-menu .t-group .t-link
{
    margin: 1px;
}

.t-menu .t-group .t-state-hover
{
    margin: 0;
    border-width: 1px;
    border-style:solid;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
}

There is a back shadow, which is available for browsers that have the box-shadow CSS3 property implemented. Adding all this styling for IE would require additional markup and images - thus introducing a performance hit for every browser and every page. Furthermore, the upcoming IE9 supports all these properties.

Greetings,
Alex Gyoshev
the Telerik team

[ls]

Alex,

Wow looks great on FireFox!   Will have to wait for IE9 for the rounded corners and backshadow.  I agree using images not worth it at this point in IE.

Thanks,

Mike