UNDP | Templates

Java Script Tab Menus

The menus are created with a javascript plugin called ULTIMATE DROP DOWN MENU Version 4.5 by Brothercake.

Please download the menu files here and apply the following code to your website:

UNDP Tab Menu New(JavaScript) Zip file
This file controls the contents of the pull-down tab menu, and can be downloaded, modified, and kept locally.

Please note that IF you want to apply a similar drop-down menu to your site, you will need to adjust the global navigation code like below.

HTML CODE

Insert the following Javascript codes within the <head> </head> containers. Please note that these files can be downloaded using the link above. USE ALL JAVASCRIPT!

	
<script type="text/javascript" src="/new_menu/udm-custom.js"></script>
<script type="text/javascript" src="/new_menu/udm-control.js"></script>
<script type="text/javascript" src="/new_menu/udm-style.js"></script>
<script type="text/javascript" src="/new_menu/udm-dom.js"></script>

Insert the following code right before the <div class="banner"> tag. This files holds the global navigation menu items that is located in the blue bar at the top of the page.

<div class="header">
<table border=0 cellpadding=0 cellspacing=0 id="nav">
 <tr>
  <td class="first">&nbsp;</td>
  <td><a href="/">UNDP Home</a></td>
  <td><div><a onmouseover="openMenu('about',this)" onmouseout="closeMenu('about')" 
  href="/about/" name="amenu" id="amenu" hbxrootmenuid="//Aboutall_menus" 
  hbxrootmenuorientation="down">About UNDP</a></div></td>
  <td><div><a onmouseover="openMenu('regions',this)" onmouseout="closeMenu('regions')"  
  href="/regions/" name="rmenu" id="rmenu" hbxrootmenuid="//Regionsall_menus" 
  hbxrootmenuorientation="down">Regions</a></div></td>
  <td><div><a onmouseover="openMenu('mdgs',this)" onmouseout="closeMenu('mdgs')" 
  href="/mdg/" name="mmenu" id="mmenu" hbxrootmenuid="//MDGsall_menus" 
  hbxrootmenuorientation="down">MDGs</a></div></td>
  <td><div><a onmouseover="openMenu('whatwedo',this)" onmouseout="closeMenu('whatwedo')"  
  href="/focusareas/" name="pmenu" id="pmenu"  hbxrootmenuid="//wwUNDPdoall_menus" 
  hbxrootmenuorientation="down">What We Do</a></div></td>
  <td><a href="http://content.undp.org/go/newsroom">Newsroom</a></td>
  <td class="last">&nbsp;</td>
 </tr>
</table>

Insert the following code at the end of the page, right before the </body> tag ends. This file holds the sub menu items.

<ul id="udm" class="udm">
<li id="about"><a id="aboutButton" href="/">About</a>
 <ul style="width:15em;">
  <li><a href="/about/" 
  name="&lid=//Aboutall_menus//Whoweareandwhatwedo">
  Who we are & What we do</a></li>
  <li><a href="/partnerships/" 
  name="&lid=//Aboutall_menus//StrategicPartnerships">
  Partnerships</a></li>
  <li><a href="/execbrd/" 
  name="&lid=//Aboutall_menus//ExecutiveBoard">
  Executive Board</a></li>
  <li><a href="http://www.uncdf.org/english/" 
  name="&lid=//Aboutall_menus//UNCDF">
  UN Capital Development Fund</a></li>
  <li><a href="http://www.unifem.org/" 
  name="&lid=//Aboutall_menus//UNIFEM">
  UNIFEM</a></li>
  <li><a href="http://www.unv.org/" 
  name="&lid=//Aboutall_menus//UNV">
  UN Volunteers</a></li>
  <li><a href="http://jobs.undp.org" 
  name="&lid=//Aboutall_menus//Jobs">
  Jobs</a></li>
  <li><a href="/procurement/" 
  name="&lid=//Aboutall_menus//Procurement">
  Procurement</a></li>
 </ul>
</li>

<li id="regions"><a id="regionsButton" href="/">Regions</a>
 <ul style="width: 25em;">
  <li><a href="/africa/" 
  name="&lid=//Regionsall_menus//RBA">
  Africa</a></li>
  <li><a href="/arabstates/" 
  name="&lid=//Regionsall_menus//RBAS">
  Arab States</a></li>
  <li><a href="/asia" 
  name="&lid=//Regionsall_menus//RBAP">
  Asia & the Pacific</a></li>
  <li><a href="/europe/" 
  name="&lid=//Regionsall_menus//RBEC">
  Europe & the Commonwealth of Independent States</a></li>
  <li><a href="/latinamerica/" 
  name="&lid=//Regionsall_menus//RBLAC">
  Latin America & the Caribbean</a></li>
  <li><a href="/countries/" 
  name="&lid=//Regionsall_menus//AllCountries">
  Full List of Countries</a></li>
 </ul>
</li>

<li id="mdgs"><a id="mdgsButton" href="/">Mdgs</a>
 <ul style="width:17em;">
  <li><a href="/mdg/basics.shtml"
  name="&lid=//MDGsall_menus//About">
  About the MDGs</a></li>
  <li><a href="/mdg/undps_role.shtml" 
  name="&lid=//MDGsall_menus//UNDPsRole">
  UNDP's Role</a></li>
  <li><a href="/mdg/advocacy_home.shtml" 
  name="&lid=//MDGsall_menus//Advocacy">
  Advocacy for MDGs</a></li>
  <li><a href="/mdg/strategy.shtml" 
  name="&lid=//MDGsall_menus//Stragegy">
  Strategies for MDGs</a></li>
  <li><a href="/mdg/tracking_home.shtml" 
  name="&lid=//MDGsall_menus//Tracking">
  Tracking the MDGs</a></li>
  <li><a href="/mdg/undp-mdg-world.shtml" 
  name="&lid=//MDGsall_menus//UNDPmdgWorld">
  MDGs at Country & Regional Level</a></li>
 </ul>
</li>

<li id="whatwedo"><a id="whatwedoButton" href="/">What We Do</a>
 <ul style="width:15em;">
  <li><a href="/governance/" 
  name="&lid=//wwUNDPdoall_menus//Governance">
  Democratic Governance</a></li>
  <li><a href="/poverty/" 
  name="&lid=//wwUNDPdoall_menus//Poverty">
  Poverty Reduction</a></li>
  <li><a href="/bcpr/" 
  name="&lid=//wwUNDPdoall_menus//BCPR">
  Crisis Prevention & Recovery</a></li>
  <li><a href="/energyandenvironment/" 
  name="&lid=//wwUNDPdoall_menus//EnergyEnvironment">
  Energy & Environment</a></li>
  <li><a href="/hiv/" 
  name="&lid=//wwUNDPdoall_menus//HIV">
  HIV/AIDS</a></li>
  <li><a href="/women/" 
  name="&lid=//wwUNDPdoall_menus//Women">
  Women's Empowerment</a></li>
 </ul>
</li>
</ul>

United Nations Development Programme

Templates

Java Script Tab Menus

HTML CODE