Collapsible and icons Quick Launch in SharePoint 2013

Question

I'm very new in SharePoint and I've received the task to create an internal SharePoint site for our department. I searched a lot on internet regarding a way to add icons to quick launch menu but I cannot find anything from head to tail. For now I used CSS code.

The menu should look like this:

For the moment my result looks like this:

[![enter image description here][2]][2]

I tried to use JQuery, but again I'm new on this also. Can anyone help me with this problem?

Thank you so much for your help.

---

Hello, For the moment I was able to make the menu to colapse . Unfortunately I was unable to create arrows for the colapseble menu and I cannot add icons. Please , can anyone explain stept by step where should I put these codes for arrow and icons or to update these code accordingly? For the Icons code , I have to create other file or just put the code in the first file ?

Thank you very much for the help !

For now I use one CSS file and one JQuery files linked in Content Editor.

JQuery :

$(function(){ /set dynamic css logic/ if($('#sideNavBox .menu-item.selected').length){ //propagates the selected class, up the three. $('li.static').removeClass('selected'); $('#sideNavBox .menu-item.selected').parents('li.static').addClass('selected');

//collapses top siblings of selected branch $('#sideNavBox .menu-item.selected').parents('li.static').last().siblings() .find('> ul').hide(); } else $('#sideNavBox .root.static > li.static > ul').hide();

/set accordion effect/ $('#sideNavBox .root.static > li.static').each(function(){ if($(this).find('ul').length){ $(this).addClass('father').click(function(){ if($(this).children('ul').css('display') != 'none'){ $(this).removeClass('selected').children('ul').slideUp(); } else { /collapse-siblings/ $(this).siblings().removeClass('selected').children('ul').slideUp();

 /*expand*/
 $(this).addClass('selected').children('ul').slideDown();
}

/*added: stop event propagation to link nodes*/
$('a.static').click(function(event) {
    event.stopPropagation();
});

/*added*/
return false;

}); } }); });

---

CSS :

.ms-core-listMenu-verticalBox UL.root > LI > .menu-item{
font-weight:bold;
background-color:orange;
color:black;
border-bottom-color:black;
border-bottom-style:solid;
border-bottom-width:1px;
min-height:12px;
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: white !important;
background-color:grey !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;
}

Answer 1

Add below script to your Master Page.

    <script type="text/javascript">

jQuery(function($){  
  jQuery('.ms-core-listMenu-verticalBox ul.root > li > a').each(function ()  
  {  
     jChildren = jQuery(this).next('ul');  
     if(jChildren.length!=0)  
     {  
        $(this).find("span.menu-item-text").append("<img src='/Style Library/plusArrow.png' border='0' class='imgAlign' />");  
     }  
  });  
  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).parent("li").find("img.imgAlign").attr("src","/Style Library/minusArrow.png");  
    jChildrens.eq(selectedIndex).slideDown();  
   }  
   //Parents  
   jQuery('.ms-core-listMenu-verticalBox ul.root > li > a').mousehover(function (e) {  
     jChildren = jQuery(this).next('ul');  
     if(jChildren.length!=0)  
     {  
      e.preventDefault();  
      $(this).find("img.imgAlign").attr("src","/Style Library/plusArrow.png");  
      jChildrens.slideUp();  
      if (jChildren.is(':visible') == false)  
      {  
      $(this).find("img.imgAlign").attr("src","/Style Library/minusArrow.png");  
        jChildren.slideDown();  
      }  
     }  
   });  

 });  </script>

Create css file and refer to Master page or directly refer to Master page. (for below style)

.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;  
 }  

Refer here for step by step procedure and icon(+/-) files.

To add icons to your quick launch menu items,

<script>
function AppendMenuIcons() {
    var elements = document.querySelectorAll('ul[id^=zz][id$=_RootAspMenu] li span.menu-item-text');

    for (var i = 0; i < elements.length; i++) {
        var icon;
        // Set the FontAwesome icon based on the text of the menu item...
        switch (elements[i].innerHTML) {
            case 'Home':
                icon = 'home';
                break;
            case 'Public documents':
                icon = 'folder-open';
                break;
            case 'Recent':
                icon = 'flash';
                break;
            case 'Sales Community':
                icon = 'comments';
                break;
        }            
     elements[i].innerHTML = '<i class="'+icon+'"></i> ' + elements[i].innerHTML;

    }
 </script>
 <style>
 .home{

background-image: url("/Style Library/home.png");
height:7px;
width:7px;
 }
 </style>

Ref