4/14/11

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 :


HTML CODE :



<html>

<head>
    <title>Code 2 Learn Works</title>

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

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

    <div>

        <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>
    
    <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>
        </ul>
    </div>
    </body>
</html> 
 
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 : 



SHARE THIS POST:

2 comments:

  1. Javin @ Struts interview questionsJanuary 3, 2012 at 5:50 AM

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

    Javin
    Top 10 Spring interview questions in Java

    ReplyDelete
  2. FarhanJanuary 4, 2012 at 8:09 AM

    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.

    ReplyDelete