Metro Finance Navigation
I am using Sitefinity 6.3 and am a newbie. I am trying to make our navigation work like the demo site. It appears, that in the demo site, they are using the radmenu control so that it works with the layout.css. Can someone please show how to insert the radmenu control in the Navigation widget to make this work like the demo. Nothing I have done seems to make the bar show up when selected. Below is part of the layout.css and the navigation Id selectors that should make this work. I will be thankful for any help!
Scott Bryan
#Navigation ul li
{
float: left;
margin-left: 10px;
}
#Navigation ul li a
{
width: 100px;
height: 20px;
margin: 0;
padding: 80px 10px 20px 10px;
display: block;
color: #666666;
cursor: pointer;
text-decoration: none;
background: #fff;
}
#Navigation ul li a:hover
{
color: #141E26;
padding-bottom: 10px;
border-bottom: 10px solid #f8f8f8;
background: #F8F8F8;
}
#Navigation ul li a span
{
margin: 0;padding: 0;
float: none;
display: inline;
white-space: normal;
}
#Navigation ul li a.rmSelected
{
color: #A90E1E;
padding-top: 75px;
padding-bottom: 15px;
border-bottom: 10px solid #A90E1E;
}
Hi Scott,
In Sitefinity 6.1 we have introduced a new Navigation widget which is using the Kendo UI Menu. However, you can still use the old navigation widget which uses the RadMenu control. You may take a look at the following article on how to use can use the old navigation widget in your Sitefinity project.
If you would like to use a custom navigation widget, here is a sample on how you can map the SitefinitySiteMapDataSource to the RadMenu control:
<%@ Register Assembly="Telerik.Sitefinity" TagPrefix="navigation" Namespace="Telerik.Sitefinity.Web.UI.NavigationControls" %>
<%@ Register TagPrefix="telerik" Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" %>
<
navigation:SitefinitySiteMapDataSource
runat
=
"server"
ShowStartingNode
=
"false"
ID
=
"dataSource"
/>
<
telerik:RadMenu
ID
=
"RadMenu1"
runat
=
"server"
EnableEmbeddedSkins
=
"false"
DataSourceID
=
"dataSource"
>
</
telerik:RadMenu
>
#Navigation ul li a.rmSelected
color
:
#A90E1E
;
padding-top
:
75px
;
padding-bottom
:
15px
;
border-bottom
:
10px
solid
#A90E1E
;
Thank you so much Sabrie, I will let you know the results
Scott