Quick Launch Accordion in SharePoint 2013

Modifying the master page

• On the head tag of master page html add below lines

<!--SPM:<SharePoint:ScriptLink Name="~sitecollection/Style Library/jquery.js" runat="server"/>-->

<!--SPM:<SharePoint:ScriptLink Name="~sitecollection/Style Library/master.js" runat="server"/>-->

Modify the javascript file

• On the master.js file add the below code.

 jQuery(function($) {  
 var jChildrens = jQuery('.ms-core-listMenu-verticalBox ul.root ul');  
   //Expand Active Parent node  
   var selectedIndex = -1;  
   for(var i=0; i < jChildrens.length; i++) {  
     jChidlren = jQuery(jChildrens[i]);  
     if(jChidlren.find('li.selected').length > 0) {  
       selectedIndex = i;  
       break;  
     }  
   }  
   jChildrens.hide();  
   if(selectedIndex!=-1)  
   {  
    jChildrens.eq(selectedIndex).slideDown();  
   }  
   //Parents  
   jQuery('.ms-core-listMenu-verticalBox ul.root > li > a').click(function (e) {  
     jChildren = jQuery(this).next('ul');  
     if(jChildren.length!=0)  
     {  
      e.preventDefault();  
      jChildrens.slideUp();  
      if (jChildren.is(':visible') == false)  
      {  
        jChildren.slideDown();  
      }  
     }  
   });
   //Parent Click
   jQuery('.ms-core-listMenu-verticalBox ul.root > li > a > span').click(function (e) {  
     var url = jQuery(this).parent('a').attr("href");  
  window.location=url;
   });    
 });  

Collapsed:

Expand:

Quick launch (Left navigation) styles in SharePoint 2013

Modify the master page

• Add a link to Custom Css in master page.
• On the head tag of master page html add below highlight lines

<!--SPM:<SharePoint:CssRegistration Name="Themable/corev15.css" runat="server"/>-->

<!--SPM:<SharePoint:CssRegistration Name="https://portal.sharepoint.com/Style Library/Master.css" runat="server" After="corev15.css" />-->

• In your Custom master.css file, add the below CSS classes

 .ms-core-listMenu-verticalBox UL.root > LI > .menu-item{  
  font-weight:bold;  
  background-color:#5482AB;  
  color:#ffffff;  
  border-bottom-color:#ffffff;  
  border-bottom-style:solid;  
  border-bottom-width:1px;  
  min-height:25px;  
  padding-top:5px;  
  padding-left:10px;  
  font-size:12px;  
  font-family:Arial, Helvetica, Sans-Serif !important;  
 }  
 .ms-core-listMenu-verticalBox > ul.root > li.static > ul.static > li.static > a:hover {  
   color: #ffffff !important;  
   background-color:#D95E00 !important;  
   text-decoration:none;  
 }  
 .ms-core-listMenu-verticalBox > ul.root > li.selected > a {  
    background-image:none;  
    background-color:#D95E00;  
   color:#ffffff !important;  
 }  
 .ms-core-listMenu-verticalBox > ul.root > li > a:hover {  
    background-image:none;  
    background-color:#D95E00;  
   color:#ffffff !important;  
   text-decoration:underline;  
 }  
 .ms-core-listMenu-verticalBox > ul.root > li.static > ul.static > li > a {  
  font-size:12px;  
  padding-left:10px;  
  font-family:Arial, Helvetica, Sans-Serif !important;  
 }  
 .ms-core-listMenu-verticalBox > ul.root > li.static > ul.static > li > a.selected {  
   background:none;  
    color: #D95E00 !important;  
   background-color:#ffffff !important;  
    text-decoration: none;  
    border: 1px #fff solid;  
    font-weight:bold;  
 }  
 .ms-core-listMenu-verticalBox a.selected  
 {  
  border: 1px #fff solid !important;  
 }  
 .ms-core-listMenu-verticalBox UL.root UL  
 {  
  margin:0px 0px 10px 0px !important;  
 }  

Top Navigation Styles in SharePoint 2013

Modify the master page

• Add a link to Custom Css in master page.
• On the head tag of master page html add below highlight lines

<!--SPM:<SharePoint:CssRegistration Name="Themable/corev15.css" runat="server"/>-->

<!--SPM:<SharePoint:CssRegistration Name="https://portal.sharepoint.com/Style Library/Master.css" runat="server" After="corev15.css" />-->

• In your Custom master.css file, add the below CSS classes

 .ms-breadcrumb-top {  
  background-color:#5482AB;  
 }  
 .ms-core-listMenu-horizontalBox {  
 background-color:#5482AB;  
   padding: 0px;  
   margin: 0px;  
   padding-left: 10px;  
   color: #ffffff;  
 }  
 .ms-core-listMenu-horizontalBox li.static {  
  color: #ffffff;  
 }  
 .ms-core-listMenu-horizontalBox li.static a:hover{  
  color: #ffffff !important;  
 }  
 .ms-core-listMenu-horizontalBox li.static > .ms-core-listMenu-item {  
   color: #ffffff;  
    white-space: nowrap;  
    border: 1px solid transparent;  
    padding: 6px 10px;  
    line-height: 20px;  
    height: 20px;  
    font-size: 10pt;  
    font-weight:bold;  
    font-family:Arial, Helvetica, Sans-Serif;  
    margin-right:5px;  
 }  
 .ms-core-listMenu-horizontalBox li.static span.static {  
 }  
 .ms-core-listMenu-horizontalBox li.static > .ms-core-listMenu-item:hover {  
   text-decoration: none;  
    background-color:#D95E00;  
    background-image:none;  
 }  
 .ms-core-listMenu-horizontalBox li.selected a.selected {  
   text-decoration: none;  
    background-color:#D95E00;  
    background-image:none;  
 }  
 ul.dynamic {  
  background-color:#f7f7f7;   
  border:1px solid #b8babd;  
  padding:0px;  
 }  
 ul.dynamic .ms-core-listMenu-item {  
  background-color:#f7f7f7;  
  line-height:20px;  
  font-size: 9pt;   
  font-weight:normal;   
  color:#333;  
  font-family:Arial, Helvetica, Sans-Serif !important;  
  padding:5px;  
 }  
 ul.dynamic .ms-core-listMenu-item:hover {  
    color:#ffffff;  
    background-color:#D95E00;  
 }  
 .ms-listMenu-editLink  
 {  
   display:none !important;  
 }  

• ms-listMenu-editLink  class is for edit Links button.

Fixed width master page in SharePoint 2013

Designing a fixed width site in SharePoint 2013, its very simple. Below steps resolves the issue of Ribbon not appearing on top when editing a long page. The ribbon position is fixed.

Modifying the master page

• Open the master page HTML.

• Add below line just above the div with id ms-designer-ribbon. So the code will look like this

<div id="mainwrapper" class="mainwrapper" runat="server">

<div id="ms-designer-ribbon">

• Add the div closing tag just above the body closing tag

</div>

</body>

• Add the link to custom css and js file in master page
• On the head tag of master page html add below lines

<!--SPM:<SharePoint:CssRegistration Name="Themable/corev15.css" runat="server"/>-->

<!--SPM:<SharePoint:ScriptLink Name="~sitecollection/Style Library/PMO/master.js" runat="server"/>-->

<!--SPM:<SharePoint:CssRegistration Name="https://portal.sharepoint.com/Style Library/Master.css" runat="server" After="corev15.css" />-->

Adding the CSS

• Add the below styles in your master.css file

 body  
 {  
   overflow: auto !important;  
 }  
 .mainwrapper  
 {  
   width: 980px;  
   margin: 0 0;  
   padding: 0;  
   margin-left: auto;  
   margin-right: auto;  
   border-top:none;  
 }  
 body #s4-workspace {  
  overflow: visible !important;  
  position:relative;  
  padding-top:44px;  
 }  
 #ms-designer-ribbon  
 {  
  position:fixed;  
  z-index: 100;  
  width:980px;  
 }  
 body #s4-ribbonrow {  
  position: fixed;  
  z-index: 100;  
  width:980px;  
 }  
 #s4-ribbonrow .ms-MenuUIPopupBody, #s4-ribbonrow .ms-popoutMenu, .ms-cui-menu[id ^= "Ribbon."] {  
  position: fixed !important;  
  background-color:#ffffff;  
 }  
 #s4-mainarea  
 {  
   width: 980px;  
 }  

Add the Script

• Add the below javascript in your master.js file

 function FixRibbonAndWorkspaceDimensions() {  
   g_frl = true;  
   var elmRibbon = GetCachedElement("s4-ribbonrow");  
   var elmWorkspace = GetCachedElement("s4-workspace");  
   var elmTitleArea = GetCachedElement("s4-titlerow");  
   var elmBodyTable = GetCachedElement("s4-bodyContainer");  
   if (!elmRibbon || !elmWorkspace || !elmBodyTable) {  
     return;  
   }  
   if (!g_setWidthInited) {  
     var setWidth = true;  
     if (elmWorkspace.className.indexOf("s4-nosetwidth") > -1)  
       setWidth = false;  
     g_setWidth = setWidth;  
     g_setWidthInited = true;  
   }  
   else {  
     var setWidth = g_setWidth;  
   }  
   var baseRibbonHeight = RibbonIsMinimized() ? 55 : 145;  
   var ribbonHeight = baseRibbonHeight + g_wpadderHeight;  
   if (GetCurrentEltStyle(elmRibbon, "visibility") == "hidden") {  
     ribbonHeight = 0;  
   }  
   if (elmRibbon.children.length > 0 && document.getElementsByTagName("html")[0].className.indexOf('ms-dialog-nr') == -1) {  
     elmWorkspace.style.paddingTop = ribbonHeight + 'px';  
   }  
 }  

The result master page will look like this.

For page with long text, the ribbon is always display at top