Sharepoint navigation menu collapse

Question

Does anyone know when in sharepoint you´ve created a navigation structure in site settings navigation / that i can only add a page under a heading and have to hide the page which is the heading?

How I can make the menu collapse when clicking on the top menu rather then immediate display?

I want to display the second level when clicking on any of the first and then when clicking on the second for the first to dissapear and the 2nd and 3rd to be displayed and the breadcrum to easily go back home.

How can this be done in the portal not with publishing sites? Any advice would be greatly appreciated.

Answer 1

Jquery is the way:

<script type="text/javascript" src=http://yourMoss/sites/Shared%20Documents/jquery-x.x.x.js&gt;&lt;/script&gt;
<script type="text/javascript">
$(function(){
//initialize menus
    var menuRows = $("[id$='QuickLaunchMenu'] > tbody > tr");
    var menuHd = menuRows.filter("[id!='']:has(+tr[id=''])");
    //set img path for when submenu is hidden
    var closedImg = "/_layouts/images/plus.gif";
    //set img path for when submenu is visible
    var openedImg = "/_layouts/images/minus.gif";
    var cssInit = {
        "background-image": "url('"+closedImg+"')",
        "background-repeat": "no-repeat",
        "background-position": "100% 50%"
    }
    var cssClosed = {"background-image": "url('"+closedImg+"')"}
    var cssOpen = {"background-image": "url('"+openedImg+"')"}
    //hide submenus
    menuRows.filter("[id='']").hide();
    //apply initial inline style to menu headers
    menuHd.find("td:last").css(cssInit);
    menuHd.click(function () { 
        var styleElm = $(this).find("td:last")
        var nextTR = $(this).next("tr[id='']");
        if (nextTR.is(':visible')) {
            nextTR.hide();
            styleElm.css(cssClosed);
        } else {
            nextTR.show();
            styleElm.css(cssOpen);
        }
    });
});
</script>