Reinventing the wheel, one line of code at a time.

Theming SharePoint (5 of Infinite)

Today I bring you more of the same! Well, not quite, but today’s post is about navigation. Having covered the left / quick launch navigation, I decided it was time to tackle the top navigation. Reasons? Drop down menus are definately nice, and I think there is a possibility to again get away from tables while adding some nice styling and better functionality. Enter javascript!

Step 1: Get this JavaScript menu (.js) and put it into “C:\…\12\TEMPLATE\LAYOUTS\1033\”

Step 2: Time to get Visual Studio open again, remember that menu we made for the left hand side navigation? Well we can use the same class and reconfigure it a bit for the top nav. This code adds some extra functionality that I will cover in a step or two. Once you are done creating the class, follow the same steps mention in the 4th installment of this series to get the navigation control installed.

[+]View Code CSHARP

Step 3: We need to add the styles to our ever-growing CSS file! Here they are.

[-]View Code HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

.dropdown {
	float: left;
}
.dropdown dt {
	width: 150px;
	height: 22px;
	border: 0px solid #000;
	padding: 0px;
	font-weight: bold;
	cursor: pointer;
	text-align: center;
}
.dropdown a{
	color:white;
}
.dropdown dt:hover {
	background: url('/_layouts/images/topnavhover.gif');
}
.dropdown dd {
	position: absolute;
	overflow: hidden;
	margin-top: 0px;
	margin-left: 0px;
	width: 170px;
	height: 22px;
	display: none;
	background: #fff;
	z-index: 200;
	opacity: 0;
 
	border: 1px solid #25475A;
	background: #DAE8EF;
	border-top: 0px;
}
.dropdown ul {
	margin: 0px;
	width: 170px;
 
	list-style: none;
	border-top: none;
}
.dropdown li {
	display: inline;
	text-align: left;
}
 
.dropdown a, .dropdown a:active, .dropdown a:visited {
	font-size: 0.8em;
	padding: 2px;
	padding-top: 3px;
	display: block;
	color: #2D2D2D;
	font-weight: bold;
	text-decoration: none;
	width: 100%;
}
.dropdown a:hover {
	/*background: #7BC143;*/
	text-decoration: underline;
	color: #000;
}
.dropdown .underline {
}

Step 4: Now what was that extra functionality? Well for our SharePoint site I have created an image slide animation that slides out from the top nav. This is so when users hover over the various departments, we can show some images about what the departments do in the whitespace of the site. Here is rollover.js, which again we put in the same directory as the other js file.

The code is a modified version of the previous menu code to include resizing the margin instead of just the height. This will force the div to slide up rather than down which is what we want. I have also modified it to include a hack (currh < 20 instead of < 2) to make sure the div is hidden.

[+]View Code HTML

Step 5: Now that we have the code setup, we need to add the controls and js files to the masterpage! First we need the javascript files. I was having trouble with the second, but a manual include worked.

[-]View Code HTML
1
2

<SharePoint:ScriptLink language="javascript" name="dropdown.js" Defer="true" runat="server"/>
<script type="text/javascript" language="javascript" src="/_layouts/1033/rollover.js">

Next we need the divs for the images that slide out. This piece is optional.

[-]View Code HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14

<!-- BEGIN: IMAGE DIVS -->
<div id="ImageDivContainer">
    <div style="background-image:url('/images/departments/Accounting.png');" id="AccountingImgDiv">&nbsp;</div>
    <div style="background-image:url('/images/departments/Loss.png');" id="LossImgDiv">&nbsp;</div>
    <div style="background-image:url('/images/departments/HumanResources.png');" id="Human-ResourcesImgDiv">&nbsp;</div>
    <div style="background-image:url('/images/departments/Loss.png');" id="Information-TechnologyImgDiv">&nbsp;</div>
    <div style="background-image:url('/images/departments/Loss.png');" id="ReinsuranceImgDiv">&nbsp;</div>
    <div style="background-image:url('/images/departments/Loss.png');" id="UnderwritingImgDiv">&nbsp;</div>
    <div style="background-image:url('/images/departments/Loss.png');" id="CollectionsImgDiv">&nbsp;</div>
    <div style="background-image:url('/images/departments/Loss.png');" id="General-CounselImgDiv">&nbsp;</div>
    <div style="background-image:url('/images/departments/Loss.png');" id="ManagementImgDiv">&nbsp;</div>
    <div style="background-image:url('/images/departments/Loss.png');" id="Underwriting-SupportImgDiv">&nbsp;</div>
</div>
<!-- END: IMAGE DIVS -->

Next, under PlaceHolderGlobalNavigation, we put our custom control and remove the SharePoint:AspMenu.

[-]View Code HTML
1

<asp:DropDownNavigation id="CustomTopListNavigation" DataSourceId="topSiteMap" runat="server" AppendLevel="false" />

And finally, we add the styles for the image divs into our CSS file. Again, this is not required.

[-]View Code HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

#ImageDivContainer{
	position:relative;
	float: right;
	/*right:5%;
	top:35px;*/
	margin-right: -4px;
	overflow:hidden;
	width:550px;
	height:100px;
	vertical-align:bottom;
}
 
#ImageDivContainer div{
	position:absolute;
	right:0;
	display:none;
	width:550px;
	height:100px;
	z-index: 200;
	opacity: 0;
	margin-top: 100px;
	margin-left: 0px;
}

This entry was posted on Friday, July 11th, 2008 at 12:32 pm and is filed under General. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

« Theming SharePoint (4 of Infinite)
Bad Day In The Saddle »

Leave a Reply