1

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:

enter image description here

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

enter image description here

  • Hello, Thank you so much for your answer. For the last part, regarding the icons, I have to install something like FontAwasome? I apologize if ask a stupid question but I try to figure how to I should do it . Thank you ! – Calugaru Ion Mihai Oct 29 '18 at 12:38
  • Hello , Sorry for bothering you again. Unfortunately the menu did not collapse. Can you please help me to understand what I do wrong . Thank you ! – Calugaru Ion Mihai Oct 30 '18 at 8:25
  • Check browser console, getting any error? – Anil Pal Oct 31 '18 at 4:50
  • Hello, For the moment I was able to make the menu to collapse . Unfortunately I was unable to create arrows for the collapsible menu and I cannot add icons. Please , can you show me step by step where should I put these codes? For now I use one CSS file and one JQuery file linked in Content Editor. – Calugaru Ion Mihai Nov 5 '18 at 12:45
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

  • Hello, Thank you so much for your answer. For the last part, regarding the icons, I have to install something like FontAwasome? I apologize if ask a stupid question but I try to figure how to I should do it . Thank you ! – Calugaru Ion Mihai Oct 29 '18 at 12:34
  • no need of fontawesome...its simple Jquery and icons – Anil Pal Oct 29 '18 at 12:46
  • Hello, For the moment I was able to make the menu to colapse . – Calugaru Ion Mihai Nov 5 '18 at 12:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.