Sharepoint2010 - QuickLaunchMenu accordion style

Question

I try to change QuickLaunchMenu of my Sharepoint2010 site to use accordion style.

How can I get the current selected item? Is there a possibility to add a css class to the current (active) nav-item? How can I add a third hierarchy level?

This is my jQuery code:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#s4-leftpanel-content li.static>ul.static").each(function(){
                $(this).hide();
            });
            $("#s4-leftpanel-content ul.root>li.static>a").click(function(ev){
                //ev.preventDefault();
                var child = $(this).parent().children('ul');            
                $("#s4-leftpanel-content li.static>ul.static").each(function(){
                        $(this).hide();            
                });
                child.toggle();
            });
            //disable heading click
            $("#s4-leftpanel-content ul.root>li.static>a").toggle(
                function () {},
                function () {}
            );
        });
    </script>

and this is my quick launch control:

<SharePoint:UIVersionedContent UIVersion="4" runat="server">
                        <ContentTemplate>
                            <SharePoint:AspMenu id="V4QuickLaunchMenu" runat="server" EnableViewState="false" 
                                DataSourceId="QuickLaunchSiteMap" 
                                UseSimpleRendering="true" 
                                UseSeparateCss="false" 
                                SelectStaticItemsOnly="true" 
                                CustomSelectionEnabled="true" 
                                Orientation="Vertical" 
                                StaticDisplayLevels="3" 
                                MaximumDynamicDisplayLevels="2" 
                                SkipLinkText=""
                                CssClass="s4-ql">
                            </SharePoint:AspMenu>
                        </ContentTemplate>
                    </SharePoint:UIVersionedContent>

Any help would be appreciated.

thanks!

Panco · Answer 1 · 2011-05-23T15:26:38.703

As the AspMenu is inherited from the Menu class (part of WebControls Namespace) and

For active selected, see SelectedItem property

msdn.microsoft.com/EN-US/library/0f4wwt2y

For CSS, there are StaticSelectedStyle, DynamicSelectedSytle and LevelSelectedSytles In your case, you created 3 levels of static menu and 2 levels of dynamic menu. take a look on StaticSelectedStyle and DynamicSelectedSytle for CSS style.

BTW, as you limit yourself on creating Maximum 2 levels of dynamic menu, I believe that's why you can't create the 3 levels.

    <DynamicSelectedStyle
        BackColor="color name|#dddddd"
        BorderColor="color name|#dddddd"
        BorderStyle="NotSet|None|Dotted|Dashed|Solid|Double|
            Groove|Ridge|Inset|Outset"
        BorderWidth="size"
        CssClass="string"
        Font-Bold="True|False"
        Font-Italic="True|False"
        Font-Names="string"
        Font-Overline="True|False"
        Font-Size="string|Smaller|Larger|XX-Small|X-Small|Small|
            Medium|Large|X-Large|XX-Large"
        Font-Strikeout="True|False"
        Font-Underline="True|False"
        ForeColor="color name|#dddddd"
        Height="size"
        HorizontalPadding="size"
        ItemSpacing="size"
        OnDisposed="Disposed event handler"
        VerticalPadding="size"
        Width="size"
    />
    <StaticSelectedStyle
        BackColor="color name|#dddddd"
        BorderColor="color name|#dddddd"
        BorderStyle="NotSet|None|Dotted|Dashed|Solid|Double|
            Groove|Ridge|Inset|Outset"
        BorderWidth="size"
        CssClass="string"
        Font-Bold="True|False"
        Font-Italic="True|False"
        Font-Names="string"
        Font-Overline="True|False"
        Font-Size="string|Smaller|Larger|XX-Small|X-Small|Small|
            Medium|Large|X-Large|XX-Large"
        Font-Strikeout="True|False"
        Font-Underline="True|False"
        ForeColor="color name|#dddddd"
        Height="size"
        HorizontalPadding="size"
        ItemSpacing="size"
        OnDisposed="Disposed event handler"
        VerticalPadding="size"
        Width="size"
    />

Take a look on this. http://msdn.microsoft.com/en-us/library/microsoft.sharepoint.webcontrols.aspmenu_members.aspx

http://msdn.microsoft.com/en-us/library/ms476607.aspx

score 1 · Answer 2 · answered Aug 24 '11 at 10:39

Hi i have found one way to make accordion for the sharepoint Quicklaunch with out changing asp control attributes. here is the way i have worked.

<script type="text/javascript" src="/_layouts/Scripts/jquery-1.4.4.min.js"></script>    
<script type="text/javascript" src="/_layouts/Scripts/jquery.easing.js"></script>
<script type="text/javascript" src="/_layouts/Scripts/jquery.dimensions.js"></script>
<script type="text/javascript" src="/_layouts/Scripts/jquery.accordion.js"></script>
<script type="text/javascript" src="/_layouts/Scripts/navaccord.js"></script>

below code added in "navaccord.js" file

jQuery().ready(function(){      
    // second simple accordion with special markup
    jQuery('.root ').accordion({
        header: '.menu-item',
        navigation: true,
        event: 'click',         
        animated: 'easeslide',
        active: '.tab4',
        selectedClass: 'active'

    });

    // bind to change event of select to control first and seconds accordion
    // similar to tab's plugin triggerTab(), without an extra method
    var accordions = jQuery('.root');

    jQuery('#switch select').change(function() {
        accordions.accordion("activate", this.selectedIndex-1 );
    });
    jQuery('#close').click(function() {
        accordions.accordion("activate", -1);
    });
    jQuery('#switch2').change(function() {
        accordions.accordion("activate", this.value);
    });
    jQuery('#enable').click(function() {
        accordions.accordion("enable");
    });
    jQuery('#disable').click(function() {
        accordions.accordion("disable");
    });
    jQuery('#remove').click(function() {
        accordions.accordion("destroy");
        wizardButtons.unbind("click");
    });
});
$(function () {
$("ul>li>ul>li>a").removeClass("menu-item");
$("ul>li>ul").css({'display':'none', 'height':''});
        });

Hope this helps to every one, Only issue will be accordion collapse after selected page loads.

Sharepoint2010 - QuickLaunchMenu accordion style

2 Answers2