Page Layout Templates
 
Corporate Stylesheet
Styled Lists and Tables
JS Menus and Button Styles
E-mail Templates
Graphics


Tab Menus and Buttons

  • Tab Menus
  • Buttons

Last Modified

12 October 2005

Javascript drop down menus

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

How to implement Javascript Tab Menus

 
   

The menus are created with a javascript plugin called Milonic DHTML Menu.

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

UNDP Tab Menu (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.

Please note that you will require to use the corporate licence key inside the file mmenudom.js (contained in the zip file) in order to ensure full functionality of the menus.

HTML Code

<table border=0 cellpadding=0 cellspacing=0 id="nav">
<tr>
<td class="first">&nbsp;</td>
<td><a href="/">UNDP Home</a></td>
<td><div onmouseover="popup('aboutmenu','amenu');" onmouseout="popdown();"><a href="/about/" name="amenu" id="amenu">About UNDP</a></div></td>
<td><div onmouseover="popup('regionsmenu','rmenu');" onmouseout="popdown();"><a href="/regions/" name="rmenu" id="rmenu">Regions</a></div></td>
<td><div onmouseover="popup('mdgsmenu','mmenu');" onmouseout="popdown();"><a href="/mdg/" name="mmenu" id="mmenu">MDGs</a></div></td>
<td><div onmouseover="popup('prioritiesmenu','pmenu');" onmouseout="popdown();"><a href="/focusareas/" name="pmenu" id="pmenu">Focus Areas</a></div></td>
<td><a href="/dpa/journalists/">Newsroom</a></td>
<td class="last"><a href="/spanish/">Espa&ntilde;ol</a>
&nbsp;&nbsp;
<a href="/french/">Fran&ccedil;ais</a>
</td>
</tr>
</table>

The drop down menus and submenus are called from a Javascript file which is defined in this code:

<script type="text/javascript" src="menu/milonic_src.js"></script> 
<script type="text/javascript">
if(parent.frames.length)top.location=document.location;
<!--
if(ns4)_d.write("<scr"+"ipt language=JavaScript src=menu/mmenuns4.js><\/scr"+"ipt>"); 
else _d.write("<scr"+"ipt language=JavaScript src=menu/mmenudom.js><\/scr"+"ipt>");
-->
</script>
<script type="text/javascript" src="menu/undp_menus.js"></script> 

You can download the three files undp_menus.js and mmenuns4.js and mmenudom.js from the UNDP website and place them in the corresponding folders on your webserver or use the zip-file available for download above.

To adjust the undp-menus.js file for your needs, please check out the documentation on the Milonic website:


http://www.milonic.com/

Buttons

Description: The class adminbutton creates buttons that match the new UNDP templates. With this tag you will be able to subsitute a button that looks like this:

with something like this:



Submit

Code:
<a href="#" class="adminbutton">Edit</a>



Sample 1: Floating Button
Edit

Headline
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin non arcu. Nunc ultrices lorem id nisi. Curabitur a dolor. Praesent in dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Vivamus metus. Duis fermentum. Vestibulum. More ...

Sample 2: Placing buttons next to each other

Headline
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin non arcu. Nunc ultrices lorem id nisi. Curabitur a dolor. Praesent in dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Vivamus metus. Duis fermentum. Vestibulum. More ...
Edit Properties / Update File Move Copy Delete

Sample 3: Button colors

Headline
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin non arcu. Nunc ultrices lorem id nisi. Curabitur a dolor. Praesent in dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Vivamus metus. Duis fermentum. Vestibulum. More ...
Edit Add New Add Comment Save Cancel Delete

Buttons come in four colors:

yellow (default) class="adminbutton"
blue class="adminbutton-blue"
green class="adminbutton-green"
red class="adminbutton-red"


^ Back to top