Hello Everyone, today’s article is going to have an intensive information about how to style the navigation menu for SharePoint Foundation 2013, in this case, we’ll have some common requirements, and we’ll go through how to achieve them to deliver a nice looking menu for the top navigation.
Problem:
The requirement that we have this time, is to create a menu which will include sub-items (dynamic items) that will appear when we hover over the static menu item.
We need all static menu items to have the following characteristics:
1- To be in uppercase format, meaning all letters in the sentence should be capitalized.
2- To have the white color, and a custom color: #f0b530 in case of anchor hover (Note that some of the static items maybe used only as containers for dynamic list items, and don’t act as hyperlinks).
The characteristics for the dynamic list that appears when we hover over a static item that contains sub-items:
1- To have the width of the maximum li that will appear inside the list, if you have a list item that will be 400px long, the ul should stretch to fit that size.
The characteristics for the dynamic items inside the list:
1- To have the “>” before each item
2- To have only the first letter in the sentence as capital letter, only the first letter in the sentence.. remember that!
3- On hover, to have a custom color, same one mentioned earlier: #f0b530
These are the requirements, so let’s get to the solution, shall we?!
Solution:
First things first, for my example, I use the following css to set the background color for my menu:
.ms-core-listMenu-horizontalBox {
background-color: rgb(163,160,143);
text-transform: uppercase;
}
Now we will need to style the static menu items that act as a container for my ul, to give them a white bold text, use the following css:
li.static span.dynamic-childrenspan {
color: white;
font-weight: bold;
}
As you see in the image below, the background color gave us a nearly grey background, and all letters in the static items are uppercase as required, note also that they are bold and white colored which what the second css snippet does.
Now, what if we hover over the “RESSOURCES HUMAINES” item, ul should be displayed with all items inside, and we should have the ul width to equal the longest item inside, also all items should have the first letter capitalized, and prefixed with > character, so use the following css for that:
li.dynamic {
height: 25px;
width: 100%;
white-space: nowrap;
}
The style above, gives a height for each item inside the list for 25px, and a maximum width it can get, which is 100%, also the white-space: nowrap, it prevents the item from breaking to a second line when it gets to a specific width, this is a MUST USE.
Now we’ll add > before each link as follows:
a.dynamic:before{
width: 100%;
content: ” > “;
}
In this case we are using a pseudo class for the anchor to prefix it using the content property.
We need the anchor tag to have the white color by default, not the blue color:
a.dynamic{
font-weight: bold;
color: white!important;
}
And when hovering, to have the custom color:
li.dynamic:hover a {
color: #f0b530!important;
}
But what about having it all in small letters, and the first letter in the sentence to be capital letter? You might think you would get a way with Text-Transform: Capitalize, but wait a minute, this property will capitalize the first letter of EACH WORD, remember we want only the first letter of the first word, we’ll use the following snippet:
li.dynamic span {
display: inline-block;
text-transform: lowercase;
}
li.dynamic span:first-letter {
text-transform: capitalize;
}
The first style, will change the display for the span to inline-block, this is because in the second style we want to use the :first-letter, and this pseudo selector works on block elements only (span by default is not block), and we also transform all text to lowercase, in the second style, we get the first letter of the span, and capitalize it, nice ha?
To the last part, to style the ul itself to make it stretch, convert the display to inline-table, and give it a large z-index so it’s always shown when hovering:
ul.dynamic{
display: inline-table;
z-index: 10000;
}
That’s it, now you should have something that will be similar to this:
Enjoy your SharePoint designing now!
M . D
