Using SuperFish Menus

Using SuperFish Menus

You can use the jQuery SuperFish plugin with the mojoPortal CMS SiteMenu and PageMenu controls. To use SuperFish, you must add the UseSuperFish=True property to your menu controls, include some javascript in your layout.master and copy the CSS from the stylemenu.css file in the mitchinson-earthy or mitchinson-earthy-alt1 skin.

Layout.Master

Add the following to the bottom of your layout.master file, directly above the </form> tag. <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>

Replace your SiteMenu control with the code below. Note that if you want to have a Vertical menu, you should either change the Direction="Horizontal" to Direction="Vertical" or remove the Direction property entirely.

<portal:SiteMenu id="SiteMenu1" runat="server"
MenuSkinID="Superfish"
UseTreeView="true"
TreeViewShowExpandCollapse="false"
TreeViewExpandDepth="-1"
HideMenuOnSiteMap="false" ></portal:SiteMenu>

theme.skin

Add this in your theme.skin file

<portal:mojoTreeView runat="server" SkinID="Superfish"
ContainerCssClass="AspNet-Menu-Horizontal"
RootUlCssClass="sf-menu sf-navbar"
RenderLiCssClasses="true"
RenderAnchorCss="true"
LiCssClass=""
LiRootExpandableCssClass="sf-with-ul"
LiRootNonExpandableCssClass=""
LiNonRootExpnadableCssClass=""
LiSelectedCssClass="current"
LiChildSelectedCssClass="current"
LiParentSelectedCssClass=""
AnchorCssClass="inactive"
AnchorSelectedCssClass="current"/>

stylemenu.css

Copy the contents of the stylemenu.css file from either the jqueryui-1 or mitchinson-earthy-alt1 skins. For Horizontal menus use jqueryui-1, for Vertical menus use mitchinson-earthy-alt1. Note that the mitchinson-earthy skins are older and not as up to date, they can be found in the extra-skins.zip on our codeplex download page.

Created: 2010/03/18 -- Joe Davis of i7MEDIA

i7MEDIA: Elegant mojoPortal Solutionsi7MEDIA, LLC offers Custom Skinning Services for mojoPortal. Trusted by the mojoPortal community and founded by mojoPortal Community Manager, Joe Davis, i7MEDIA is your source for elegant mojoPortal solutions.

Updated 2012-02-04 by Joe Audette