Creating a Custom Welcome Menu for SharePoint Server 2010 – Part 1
Part 1 – Overview, Profile Picture, and User Name
A project I am working on called for a custom implementation of the SharePoint Welcome menu control. The replacement control needed to provide the following:
- Implement the look and behaviors that the designers created.
- Exclude some default SharePoint menu items (such as My Regional Settings).
- Reuse some existing SharePoint menu items (such as Sign Out/Sign in as a Different User).
- Allow for the addition of other custom menu items in the future.
- Display thumbnail of the user’s profile picture.
I had to create a control that looked and behaved like the following:
The designers came up with some clean, semantic markup married with some jquery, for me to start from:
<div class="header">
<img class="header-logo" src="/images/header_logo.png" alt="" width="169" height="78" />
<div class="header-bar">
<div class="profile_menu">
<a href="#" class="profile_btn">
<span class="image"><img src="" style="width:20px;height:20px" /></span>
<span class="name">John Doe</span>
<span class="arrow"></span>
</a>
<div class="profile_dropdown">
<div class="dropdown_bkgrd">
<ul>
<li>Edit Profile</li>
<li>My Site</li>
<li>Log Out</li>
<li>Sign in as a Different User</li>
</ul>
</div>
</div>
</div>
</div>
</div>
This is part 1 of a three part series.













