May 11, 2011

// // Leave a Comment

ADD CUSTOM NAVIGATION MENU IN SHAREPOINT MASTER PAGE:


1. To find the images use the following links



2. Add the following script in the master page … In between the </Body>  and  </html>

<script type="text/javascript">
OnLoading();
</script>

3. Add following script inside the HEAD section of master page…!

<script type="text/javascript">
function display(tdval, status) {
var td = "td"+tdval;   
var val = document.getElementById("hid_id").value;

if(val != td)
{

                               
if(status == 'yes')
{
document.getElementById(td).style.backgroundImage = "url('/sites/tkg/siteassets/images/newtab_on.gif')";
}   
else if( status == 'no')
{
document.getElementById(td).style.backgroundImage = "url('/sites/tkg/SiteAssets/Images/newtab_off.gif')";

}
                }
                }

 
function OnLoading()
{
                var locat = location.pathname.toUpperCase();
                               
                var val1 = "/SITES/TKG/LISTS/CLIENT%20DETAILS/NEWFORM.ASPX";
                var val2 = "/SITES/TKG/LISTS/ADD%20JOB/NEWFORM.ASPX";
                var val3 = "/SITES/TKG/LISTS/ADD%20JOB/ALLITEMS.ASPX";
               
                document.getElementById("td1").style.backgroundImage = "url('/sites/tkg/SiteAssets/Images/newtab_off.gif')";
                document.getElementById("td2").style.backgroundImage = "url('/sites/tkg/SiteAssets/Images/newtab_off.gif')";
                document.getElementById("td3").style.backgroundImage = "url('/sites/tkg/SiteAssets/Images/newtab_off.gif')";
               
                if(locat==val1)
                {
                                document.getElementById("td1").style.backgroundImage = "url('/sites/tkg/siteassets/images/newtab_on.gif')";
                                document.getElementById("hid_id").value = "td1";

                }
                else if(locat == val2)
                {
                                document.getElementById("td2").style.backgroundImage = "url('/sites/tkg/siteassets/images/newtab_on.gif')";
                                document.getElementById("hid_id").value = "td2";
                }
                else if(locat == val3)
                {
                                document.getElementById("td3").style.backgroundImage = "url('/sites/tkg/siteassets/images/newtab_on.gif')";
                                                                document.getElementById("hid_id").value = "td3";
}
}


</script>

4. Inside the div of <a name="mainContent"></a> add the following table code…..

<table cellpadding="0" cellspacing="0">
                                      <tr>
                                         <td id="td1"  class="navg"  align="center">
                                          <a href="/sites/tkg/lists/Client Details/NewForm.aspx"   onmouseover="display('1', 'yes');"      onmouseout="display('1', 'no');" ><b><font color="white">
                                                                                                                                                                                Add New Client</font></b></a>
                                         </td>
                                         <td id="td2"  class="navg" align="center" >
                                         <a href="/sites/tkg/lists/Add job/NewForm.aspx"   onmouseover="display('2', 'yes');"      onmouseout="display('2', 'no');" ><b><font color="white">
                                                                                                                                                                                Add New Job</font></b></a></td>
                                         <td id="td3"  class="navg" align="center">
                                         <a href="/sites/tkg/lists/Add job/AllItems.aspx"   onmouseover="display('3', 'yes');"      onmouseout="display('3', 'no');" ><b><font color="white">
                                                                                                                                                                                View Existing Jobs</font></b></a>
                                         </td>
                                         </tr>
                                         </table>

5. To the css add the following code

.navg{
                width:222px;
                height:30px;
                background:url('../../SiteAssets/Images/newtab_on.gif') no-repeat;
}

.navg:hover{
                width:222px;
                height:30px;
                background:url('../../SiteAssets/Images/newtab_off.gif') no-repeat;
}




6.You can get the images like this …  :) :) 



0 comments:

Post a Comment