Javascript : Dynamic Pop-Up Menu (feels like AJAX)

Here is a piece of code that makes you feel that you are using AJAX on your website but actually you are nor, you are only using Javascript. Javascript enables us to make a POP-UP MENU and thus by this making our website more dynamic.

Here is the code :



    <title>Code 2 Learn Works</title>

    <link rel="stylesheet" href="script.css" />

    <script type="text/javascript" src="script.js">
<h1>Code 2 Learn Works</h1>


        <a href="menu1.html" class="menuLink">Matlab</a>

        <ul class="menu" id="menu1">
            <li><a href="http://www.code2learn.com/2011/02/edge-detection-of-image-using
                 -matlab.html">Edge Detection</a></li>
                        <br />    
            <li><a href="http://www.code2learn.com/2011/04/image-compression-using-dct-
                and-fft.html">Image Compression</a></li><br />

        </ul>    </div>

        <a href="menu2.html" class="menuLink">JavaScript</a>

        <ul class="menu" id="menu2">

            <li><a href="http://www.code2learn.com/2011/02/working-with-domnodes-and-objects.html"> 
Working with DOM,nodes and objects (part 3) inserting nodes</a></li>
                        <br />
            <li><a href="http://www.code2learn.com/2011/01/working-with-dom-nodes-and-
                objects-part_24.html">Working with DOM,nodes and objects (part 2) deleting nodes</a></li>
                        <br />
            <li><a href="http://www.code2learn.com/2011/01/working-with-dom-nodes-and-
                objects-part.html">Working with DOM,nodes and objects (part 1) adding nodes</a></li>
                <br />
                    <li><a href="http://www.code2learn.com/2010/12/detecting-cookie.html"> 
Detecting Cookie</a></li>
            <br />
                        <li><a href="http://www.code2learn.com/2010/11/handling-keyboard-
                            events-in-jsp.html">Handling Keyboard events</a></li>
CSS Code : 

body {
    background-color: white;
    color: black;

div {
    margin-bottom: 10px;
    width: 180px;
    background-color: #CF9;
    float: left;
ul.menu {
    display: none;
    list-style-type: none;
    margin: 0;
    padding: 0;

ul.menu li {
    font: 12px arial, helvetica, sans-serif;
    padding-left: 10px;

a.menuLink, li a {
    text-decoration: none;
    color: #060;

a.menuLink {
    font-size: 16px;
    font-weight: bold;

li a:hover {
    background-color: #060;
    color: white;
Javascript code :
window.onload = initAll;

function initAll() {
    var allLinks = document.getElementsByTagName("a");
    for (var i=0; i<allLinks.length; i++) {
        if (allLinks[i].className.indexOf("menuLink") > -1) {
            allLinks[i].onclick = retFalse;
            allLinks[i].onmouseover = toggleMenu;

function toggleMenu() {
    var startMenu = this.href.lastIndexOf("/")+1;
    var stopMenu = this.href.lastIndexOf(".");
    var thisMenuName = this.href.substring(startMenu,stopMenu);

    document.getElementById(thisMenuName).style.display = "block";

    this.parentNode.className = thisMenuName;
    this.parentNode.onmouseout = toggleDivOff;
    this.parentNode.onmouseover = toggleDivOn;    

function toggleDivOn() {
    document.getElementById(this.className).style.display = "block";

function toggleDivOff() {
    document.getElementById(this.className).style.display = "none";

function retFalse() {
    return false;
Will Look like this : 



  1. Good Example, Pretty useful , do you also use any Javascript library for such thing like JQuery or any other JavaScript library ?

    Top 10 Spring interview questions in Java

  2. Hey @Javin @ Struts interview questions good point to ask. I don't use any special Javascript Library. This can be done with Simple Javascript, HTML and CSS.