none
quick launch - slide out RRS feed

  • Question

  • Is there a way to access to the Quick Launch menu to make it a slide out menu without accessing the master page, or can I create a new SharePoint menu that works like the quick launch in a web part so I can make it a slide out menu and show everything within the site and subsites? I've only see it done in the master, however, I can't tweak the master page.
    Tuesday, February 10, 2015 3:24 PM

All replies

  • You can use CSS and JavaScript to manipulate the quick launch. Both CSS and JavaScript can be inserted onto a page using a content editor web part.

    Try saving the following text into a text file and then upload it to a document library on your site:

    <style> .ms-quicklaunchouter{display:none;z-index:2;background-color:white;border:1px solid black;} #MSO_ContentTable{margin-left:20px;} [unselectable="on"]{-webkit-user-select:none;-moz-user-select:-moz-none;-ms-user-select:none;user-select:none;}
    </style> <script> var table = document.createElement("div"); table.setAttribute("style","display:table;"); var quicklaunch = document.querySelector(".ms-quicklaunchouter"); var quicklaunchcontainer = document.getElementById("s4-leftpanel-content"); var slider = document.createElement("div"); slider.setAttribute("style","display:table-cell;cursor:pointer;"); slider.setAttribute("unselectable","on");
    slider.id = "quicklaunchslider"; slider.setAttribute("state","collapsed"); slider.innerHTML = "&gt;&gt;"; table.appendChild(quicklaunch); table.appendChild(slider); quicklaunchcontainer.appendChild(table); slider.onclick = togglequicklaunch; function togglequicklaunch(){ var slider = document.getElementById("quicklaunchslider"); if(slider.getAttribute("state") == "collapsed"){ document.querySelector(".ms-quicklaunchouter").style.display = "table-cell"; slider.setAttribute("state","expanded"); slider.innerHTML = "&lt;&lt;"; }else{ document.querySelector(".ms-quicklaunchouter").style.display = "none"; slider.setAttribute("state","collapsed"); slider.innerHTML = "&gt;&gt;"; } } </script>

    Also add "position:" "absolute;" (without quotes) to the .ms-quicklaunchouter style. For some reason the MSDN forum code editor strips that out.

    Then add a content editor web part to the page where you want the quick launch slider to appear, and edit the web part properties of the content editor web part. In the "Content Link" field, paste in the path to your uploaded text file.

    What that CSS and JavaScript does is hide the quick launch content and instead shows you a smaller link you can click to expand or collapse the quick launch.

    • Edited by thriggle Tuesday, February 10, 2015 10:59 PM
    Tuesday, February 10, 2015 7:25 PM
  • Hi,

    Per my understanding, you might want to customize the style of the Quick Launch without modifying the master page.

    Quick Launch is designed for navigation in a site scope, thus, to customize it and take effect on the whole site, it is required to apply the customization in the master page.

    If there is a concern about modifying the design of the original master page, a workaround is that you can create a custom master page and add the customization there.

    Thanks

    Patrick Liang

    Forum Support

    Please remember to mark the replies as answers if they help and unmark them if they provide no help. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com


    Patrick Liang
    TechNet Community Support

    Wednesday, February 11, 2015 12:07 PM
    Moderator
  • You can use CSS and JavaScript to manipulate the quick launch. Both CSS and JavaScript can be inserted onto a page using a content editor web part.

    Try saving the following text into a text file and then upload it to a document library on your site:

    <style> .ms-quicklaunchouter{display:none;z-index:2;background-color:white;border:1px solid black;} #MSO_ContentTable{margin-left:20px;} [unselectable="on"]{-webkit-user-select:none;-moz-user-select:-moz-none;-ms-user-select:none;user-select:none;}
    </style> <script> var table = document.createElement("div"); table.setAttribute("style","display:table;"); var quicklaunch = document.querySelector(".ms-quicklaunchouter"); var quicklaunchcontainer = document.getElementById("s4-leftpanel-content"); var slider = document.createElement("div"); slider.setAttribute("style","display:table-cell;cursor:pointer;"); slider.setAttribute("unselectable","on");
    slider.id = "quicklaunchslider"; slider.setAttribute("state","collapsed"); slider.innerHTML = "&gt;&gt;"; table.appendChild(quicklaunch); table.appendChild(slider); quicklaunchcontainer.appendChild(table); slider.onclick = togglequicklaunch; function togglequicklaunch(){ var slider = document.getElementById("quicklaunchslider"); if(slider.getAttribute("state") == "collapsed"){ document.querySelector(".ms-quicklaunchouter").style.display = "table-cell"; slider.setAttribute("state","expanded"); slider.innerHTML = "&lt;&lt;"; }else{ document.querySelector(".ms-quicklaunchouter").style.display = "none"; slider.setAttribute("state","collapsed"); slider.innerHTML = "&gt;&gt;"; } } </script>

    Also add "position:" "absolute;" (without quotes) to the .ms-quicklaunchouter style. For some reason the MSDN forum code editor strips that out.

    Then add a content editor web part to the page where you want the quick launch slider to appear, and edit the web part properties of the content editor web part. In the "Content Link" field, paste in the path to your uploaded text file.

    What that CSS and JavaScript does is hide the quick launch content and instead shows you a smaller link you can click to expand or collapse the quick launch.

    this is interesting, though not what I'm looking for. I'm looking to make it something like this

    menu

    

    Friday, February 13, 2015 2:52 PM