Using out-of-the-box features means that one reuses
components that come with the platform rather than creating new components. SharePoint is the platform, not the finished
components. The power of SharePoint is its incredible flexibility in creating
exactly what you want. We create custom
solutions to provide user friendliness, branding and to achieve specific business
requirements.
There are many ways to customize SharePoint,
- Visual Studio
- SharePoint Designer
- Content Editor Web parts
Visual
studio solutions like web parts, event handlers, Site /list definitions,
Features etc requires administrator permissions to deploy and publish on
server.
SharePoint
designer helps users to customize site without administrator help. Designer can
be used for branding, look and feel changes in SharePoint pages and web parts.
Content
editor web parts can be used to injecting page level scripts, CSS styles and
HTML.
SharePoint
has Links list which is used for managing and displaying links, this list is displayed
as bulleted items in web part. We can customize the look and feel of the web
part to display images on mouse hover. Following are the highlights of the Menu
item web part with pop out images on
mouse hover.
This is simple Menu constructed using SharePoint List, XSLT,
CSS and JQuery.
Following are the highlights of the Menu part- Easily Customizable, easy to change height width of menu item
- No use of Visual Studio
- Pop out images on each menu, administrator should be able to Change Images of each Menu link, Menu text,
- Using SharePoint Designer
- SharePoint List to Hold List items
- Picture Library for menu Images
- Library for CSS file ,J Query files and script files
Please follow below steps
- Create Custom SharePoint List
Fields Type
MenuText Single line of
text
MenuLink Hyperlink field
MenuImage Picture Field
Order Decimal
- Open SharePoint site in SharePoint Designer.
- Create Web Part Page
- Add Empty Dataview web part
- Select data source menu and Add custom list created for Menu
- Select required field and select Add as Multiple item view, Fields will be added to dataview
- Customize XSLT view and remove table and row element from item template
- Add <div id="site_content"><ul id="sdt_menu" class="sdt_menu">
- Change Item row view template in XSLT
<xsl:template name="dvt_1.rowview">
<xsl:if
test="string-length(@MenuLink) > 0">
<li>
<a title="{@MenuLink.desc}"
target="_blank" href="{@MenuLink}">
<img src="{@MenuImage}" alt="{@MEnuImage.desc}" />
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">
<xsl:value-of select="@MenuText"
/>
</span>
</span>
</a>
</li>
</xsl:if>
</xsl:template>
- Save XSLT and close.
- Create Style Sheet file
ul.sdt_menu{
margin:0;
padding:0;
list-style: none;
font-family:"Myriad Pro", "Trebuchet MS", sans-serif;
font-size:11px;
width:auto;margin-top:80px;
}
ul.sdt_menu a{
text-decoration:none;
outline:none;
}
ul.sdt_menu li{
float:left;
width:115px;
height:60px;
margin:1px;
position:relative;
cursor:pointer; border:1px dotted #000; margin-right:1px; list-style:none; background:#999;
}
ul.sdt_menu li > a{
position:absolute;
top:0px;
left:0px;
width:110px;
height:65px;
z-index:12;
background:transparent url(../images/overlay.png) no-repeat bottom right;
}
ul.sdt_menu li a img{
border:none;
position:absolute;
width:0px;
height:0px;
bottom:0px;
left:75px;
z-index:100;
}
ul.sdt_menu li span.sdt_wrap{
position:absolute;
top:25px;
left:0px;
width:115px;
height:40px;
z-index:15;
}
ul.sdt_menu li span.sdt_active{
position:absolute;
background:#111;
top:65px;
width:120px;
height:0px;
left:0px;
z-index:14;
}
ul.sdt_menu li span span.sdt_link,
ul.sdt_menu li span span.sdt_descr,
ul.sdt_menu li div.sdt_box a{
margin-left:15px;
text-transform:uppercase;
}
ul.sdt_menu li span span.sdt_link{
color:#fff;
font-size:14px;
float:left;
clear:both;
}
ul.sdt_menu li span span.sdt_descr{
color:#0B75AF;
float:left;
clear:both;
width:155px;
font-size:10px;
letter-spacing:1px;
}
ul.sdt_menu li div.sdt_box{
display:block;
position:absolute;
width:188px;
overflow:hidden;
height:170px;
top:85px;
left:0px;
display:none;
background:#000;
margin-left:10px;
}
ul.sdt_menu li div.sdt_box a{
float:left;
clear:both;
line-height:30px;
color:#0B75AF;
}
ul.sdt_menu li div.sdt_box a:first-child{
margin-top:15px;
}
ul.sdt_menu li div.sdt_box a:hover{
color:#fff;
}
- Add Script File
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(function () {
$('#sdt_menu > li').bind('mouseenter', function () {
var $elem = $(this);
$elem.css('background-color', '#fDA000');
$elem.find('img')
.stop(true)
.animate({
'bottom': '60px',
'width': '125px',
'height': '65px',
'left': '0px'
}, 400, 'easeOutBack')
.andSelf()
.find('.sdt_wrap')
.stop(true)
}).bind('mouseleave', function () {
var $elem = $(this);
$elem.css('background-color', '#999');
var $sub_menu = $elem.find('.sdt_box');
if ($sub_menu.length)
$sub_menu.hide().css('left', '0px');
$elem.find('.sdt_active')
.stop(true)
.animate({ 'height': '0px' }, 300)
.andSelf().find('img')
.stop(true)
.animate({
'width': '0px',
'height': '0px',
'left': '85px'
}, 400)
.andSelf()
.find('.sdt_wrap')
.stop(true)
.animate({ 'top': '25px' }, 500);
});
});
</script>
- Please change the JQuery files path according to your environment
- Add Content editor web part on same page and Add CSS and Java Script files on page.
- Menu is ready to use
- Please remember to Change dataview web part properties to show all items in list or if required to filter menus, and to order menu items
- You can Export the dataview web part to reuse it.
 |
| Menu SharePoint XSLT |
 |
| Menu with Pop Out Images on Mouse Hover SharePoint |
 |
| Menu with Pop Out Images on Mouse Hover SharePoint |
