Hi Joey,
We will have to hide the 3rd level and deeper menu items from the SiteMenu using CSS. The side menu can be setup without additional CSS. I am using SuperFish for this example.
1. In your layout.master file, set the SiteMenu control to UseSuperfish=true and UseTreeView=false. Then use the PageMenu control with StartingNodeOffset=2.
<portal:SiteMenu id="SiteMenu1" runat="server"
UseTreeView="false" HideMenuOnSiteMap="false" UseSuperfish="true"
Direction="Horizontal" TopLevelOnly="false" />
<portal:PageMenu id="PageMenu1" runat="server"
UseTreeView="true" StartingNodeOffset="2"/>
2. In your stylemenu.css file, hide menu items below the second level:
.sf-menu ul ul,
.sf-menu ul .sf-sub-indicator{
display:none !important;
visibility: hidden !important;
}
If you are not currently using SuperFish for your dropdown menu:
-
Copy the stylemenu.css, shadow.png and arrows-ffffff.png files from the Mitchinson-Earthy skin to your skin.
-
Add the following to your layout.master file directly above the <portal:mojoGoogleAnalyticsScript control.
<portal:SiteScript id="superfish" runat="server" ScriptRelativeToRoot="/ClientScript/jqmojo/mojosuperfish.js" />
<script type="text/javascript">
$(document).ready(function(){
$("ul.sf-menu").supersubs({minWidth:12,maxWidth:27,extraWidth:1}).superfish(
{pathClass:'current',pathLevels:0,speed:'fast'});
});
</script>
HTH,
Joe D.