How to Create Simple Menu in JavaScript

By Mahak Gupta Sep 02, 2012
In this blog I am going to how we create a simple menu in javascript.
Download Files: Menu.rar

In this article, we will discuss about that how we create a simple menu in javascript, for this follow these steps:

Step1: First we create two tables like this:

<html xmlns="http://www.w3.org/1999/xhtml">
<
head>
    <title>Untitled Page</title
>

</
head>
<
body>
    <table border="1" width
="100%">
        <tr align="center" style="background-color
: Gray;">
            <td id="tdmain1" onmouseover="Show1()" onmouseout
="Hide1()">
                Home
            </td
>
            <td id="tdmain2" onmouseover="Show2()" onmouseout
="Hide2()">
                City
            </td
>
            <td id="tdmain3" onmouseover="Show3()" onmouseout
="Hide3()">
                Sports
            </td
>
            <td id="tdmain4" onmouseover="Show4()" onmouseout
="Hide4()">
                World
            </td
>
            <td id="tdmain5" onmouseover="Show5()" onmouseout
="Hide5()">
                Buisness
            </td
>
            <td id="tdmain6" onmouseover="Show6()" onmouseout
="Hide6()">
                Tech
            </td
>
        </tr
>
    </table
>
    <table border="1" width
="100%">
        <tr id="tr1" align="center" style="display
: none;">
            <td
>
                Opinion
            </td
>
            <td
>
                Blogs
            </td
>
            <td
>
                Auto
            </td
>
            <td
>
                Polls
            </td
>
            <td
>
                Speak Out
            </td
>
        </tr
>
        <tr id="tr2" align="center" style="display
: none;">
            <td
>
                Mumbai
            </td
>
            <td
>
                Delhi
            </td
>
            <td
>
                Banglore
            </td
>
            <td
>
                Hyderabad
            </td
>
            <td
>
                Chennai
            </td
>
        </tr
>
        <tr id="tr3" align="center" style="display
: none;">
            <td
>
                Cricket
            </td
>
            <td
>
                Tennis
            </td
>
            <td
>
                Badminton
            </td
>
            <td
>
                Hockey
            </td
>
            <td
>
                Base Ball
            </td
>
        </tr
>

        <tr id="tr4" align="center" style="display: none;">
            <td
>
                India            </td
>

            <td
>
                Australia
            </td
>
            <td
>
                America
            </td
>
            <td
>
                China
            </td
>
            <td
>
                Bangladesh
            </td
>
        </tr
>
        <tr id="tr5" align="center" style="display
: none;">
            <td
>
                Indian Buisness
            </td
>
            <td
>
                International Buisness
            </td
>
            <td
>
                Polls
            </td
>
            <td
>
                Ups and Downs
            </td
>
            <td
>
                Speak Out
            </td
>
        </tr
>
        <tr id="tr6" align="center" style="display
: none;">
            <td
>
                News
            </td
>
            <td
>
                Personal Tech
            </td
>
            <td
>
                Careers
            </td
>
            <td
>
                Social Media
            </td
>
        </tr
>
    </table
>

</
body>
</
html>

Step 2:
Now we write the javascript function for the onmouseover event:


    <script language
="javascript">
 
        function Show1()
        {
            document.getElementById("tdmain1").style.backgroundColor = "#780000";
            document.getElementById("tdmain1").style.color = "White";
            document.getElementById("tr1").style.display = 'block';
            document.getElementById("tr2").style.display = 'none';
            document.getElementById("tr3").style.display = 'none';
            document.getElementById("tr4").style.display = 'none';
            document.getElementById("tr5").style.display = 'none';
            document.getElementById("tr6").style.display = 'none';
        }
 
        function Show2()
         {
            document.getElementById("tdmain2").style.backgroundColor = "#780000";
            document.getElementById("tdmain2").style.color = "White";
            document.getElementById("tr2").style.display = 'block';
            document.getElementById("tr1").style.display = 'none';
            document.getElementById("tr3").style.display = 'none';
            document.getElementById("tr4").style.display = 'none';
            document.getElementById("tr5").style.display = 'none';
            document.getElementById("tr6").style.display = 'none';
 
        }
 
        function Show3()
        {
            document.getElementById("tdmain3").style.backgroundColor = "#780000";
            document.getElementById("tdmain3").style.color = "White";
            document.getElementById("tr3").style.display = 'block';
            document.getElementById("tr2").style.display = 'none';
            document.getElementById("tr1").style.display = 'none';
            document.getElementById("tr4").style.display = 'none';
            document.getElementById("tr5").style.display = 'none';
            document.getElementById("tr6").style.display = 'none';
 
        }
 
        function Show4()
        {
            document.getElementById("tdmain4").style.backgroundColor = "#780000";
            document.getElementById("tdmain4").style.color = "White";
            document.getElementById("tr4").style.display = 'block';
            document.getElementById("tr2").style.display = 'none';
            document.getElementById("tr3").style.display = 'none';
            document.getElementById("tr1").style.display = 'none';
            document.getElementById("tr5").style.display = 'none';
            document.getElementById("tr6").style.display = 'none';
 
        }
 
        function Show5()
         {
            document.getElementById("tdmain5").style.backgroundColor = "#780000";
            document.getElementById("tdmain5").style.color = "White";
            document.getElementById("tr5").style.display = 'block';
            document.getElementById("tr2").style.display = 'none';
            document.getElementById("tr3").style.display = 'none';
            document.getElementById("tr4").style.display = 'none';
            document.getElementById("tr1").style.display = 'none';
            document.getElementById("tr6").style.display = 'none';
 
        } 

        function Show6()
         {
            document.getElementById("tdmain6").style.backgroundColor = "#780000";
            document.getElementById("tdmain6").style.color = "White";
            document.getElementById("tr6").style.display = 'block';
            document.getElementById("tr2").style.display = 'none';
            document.getElementById("tr3").style.display = 'none';
            document.getElementById("tr4").style.display = 'none';
            document.getElementById("tr5").style.display = 'none';
            document.getElementById("tr1").style.display = 'none';
 
        }
    </script
>

Here we set the property according to our requirement.

The Output Will be:

CreateMenuUsingCSS.png

CreateMenuUsingHTML.png

Step3: Now we write the function for the onmouseout event in the javascript:

function Hide1()
{
    document.getElementById("tdmain1").style.backgroundColor = "Gray";
    document.getElementById("tdmain1").style.color = "Black";
 
}
 

function
Hide2()
    {
    document.getElementById("tdmain2").style.backgroundColor = "Gray";
    document.getElementById("tdmain2").style.color = "Black";
 
}
 

function
Hide3()
{
    document.getElementById("tdmain3").style.backgroundColor = "Gray";
    document.getElementById("tdmain3").style.color = "Black";
 
}
 

function
Hide4()
{
    document.getElementById("tdmain4").style.backgroundColor = "Gray";
    document.getElementById("tdmain4").style.color = "Black";
 

 

function
Hide5()
{
    document.getElementById("tdmain5").style.backgroundColor = "Gray";
    document.getElementById("tdmain5").style.color = "Black";
 

 

function
Hide6()
{
    document.getElementById("tdmain6").style.backgroundColor = "Gray";
    document.getElementById("tdmain6").style.color = "Black";
}

Mahak Gupta

My name is Mahak Gupta. I am a C# Corner MVP.

COMMENT USING

PREMIUM SPONSORS

Hire Mobile & Web Developer on demand. 100% satisfaction. Try for 1 week or Money Back. Local and remote developers available all over USA.

Latest Blogs