2

I would like to know how to come up with a Quick Launch Menu like this on SharePoint 2013 Online which has Accordian Style. How do I go about it?

enter image description here

  • How did you style your menu to look like that with the inverted bit (triangle) on the right? – surfnode Feb 23 '18 at 16:24
4

You can create a custom css style and reference it through master page. For styling quick launch you can use following styles

.ms-core-listMenu-verticalBox UL.root > LI > .menu-item {
     /*Style each menu item*/
}
.ms-core-listMenu-verticalBox > ul.root > li.static > ul.static > li.static > a:hover {
     /*Style on hove sub items*/
}
.ms-core-listMenu-verticalBox > ul.root > li.selected > a { 
     /*Style selected top level item*/
}
.ms-core-listMenu-verticalBox > ul.root > li > a:hover {  
     /*Style top level mouse hover*/
}
.ms-core-listMenu-verticalBox > ul.root > li.static > ul.static > li > a { 
     /*Style sub level mouse hove*/
}
.ms-core-listMenu-verticalBox > ul.root > li.static > ul.static > li > a.selected {  
     /*Style selected sub item*/
}
.ms-core-listMenu-verticalBox a.selected {
     /*Style Selected Item*/
}
.ms-core-listMenu-verticalBox UL.root UL {
     /*Style Outer Box*/
}
  • Thanks @Amal ! Question is, do you have an example of how this kind of styling is used. For better understanding visually? – Ngeshlew Nov 27 '14 at 15:41
  • Yes akashkarda.blogspot.com/2014/05/… – Amal Hashim Nov 27 '14 at 15:41
  • And a link on how to put the CSS in the Master Page? – Ngeshlew Nov 27 '14 at 15:42
  • Its on the same article. Read the top section – Amal Hashim Nov 27 '14 at 15:43
  • How do get to the master page is the question I am kindly asking. – Ngeshlew Nov 27 '14 at 15:44

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.