How to Create Dynamic Navigation Menu with JavaScript & CSS – Tutorial

arp14 CSS, JavaScript, Tutorial Tags: , , , , , 4

Navigation menu is one of the important element of a good user friendly website. In this post I’m going to show you how to Create dynamic navigation menu with JavaScript and CSS. But remember, web crawlers won’t crawl texts dynamically generated by JavaScript. So, if you are serious about SEO, you should not create dynamic navigation menu with JavaScript in this way. But to get a basic idea about how dynamic menus are and how they works, it is good to learn this. You’ll need basic knowledge on HTML, CSS and JavaScript. Lets start learn this.

Create Dynamic Navigation Menu with JavaScript & CSS

Check these Tutorials if needed

Correspondence files to Creatie dynamic navigation menu:

  • navigation menu.html
  • navigation menu.css
  • navigation menu.js

navigation menu.html

<html>
    <head>
        <title>Creating dynamic navigation menu with JavaScript and CSS</title>
        <script type ="text/javascript" src="menu.js" ></script>
        <link href="menu.css" type="text/css" rel="stylesheet">
    </head>

    <body>
    <div>
        <a href="menu1.html" class="menulink">Menu #1</a>
        <ul class="menu" id="menu1">
            <li><a href="#">something1</a></li>
            <li><a href="#">nothing1</a></li>
            <li><a href="#">anything1</a></li>
            <li><a href="#">everything1</a></li>
        </ul>
    </div>
    <div>
        <a href="menu2.html" class="menulink">Menu #2</a>
        <ul class="menu" id="menu2">
            <li><a href="#">something2</a></li>
            <li><a href="#">nothing2</a></li>
            <li><a href="#">anything2</a></li>
            <li><a href="#">everything2</a></li>
        </ul>
    </div>
    <div>
        <a href="menu3.html" class="menulink">Menu #3</a>
        <ul class="menu" id="menu3">
            <li><a href="#">something3</a></li>
            <li><a href="#">nothing3</a></li>
            <li><a href="#">anything3</a></li>
            <li><a href="#">everything3</a></li>
        </ul>
    </div>
    <div>
        <a href="menu4.html" class="menulink">Menu #4</a>
        <ul class="menu" id="menu4">
            <li><a href="#">something4</a></li>
            <li><a href="#">nothing4</a></li>
            <li><a href="#">anything4</a></li>
            <li><a href="#">everything4</a></li>
        </ul>
    </div>
    </body>
</html>

navigation menu.css

body { font-family: tahoma; font-size: 14px; color: blue; background-color: #FFb; }
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; 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; }

navigation menu.js

window.onload = function () {
    var links = document.getElementsByTagName("a");    
    for (var i=0;i<links.length;i++) {
        if (links[i].className.indexOf("menulink") > -1) {
            links[i].onclick = function () {return false;}
            links[i].onmouseover = 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 = function () { //toggleDivOff;
                    document.getElementById(this.className).style.display = "none"; 
                } 
                this.parentNode.onmouseover = function () {  //toggleDivOn;
                    document.getElementById(this.className).style.display = "block"; 
                }
            }
        }
    }
}

You can download all required files at once from here as zipped.

Having problem with navigation menu? Just comment below, I’ll be back to you.

Thanks you!

4 thoughts on “How to Create Dynamic Navigation Menu with JavaScript & CSS – Tutorial

  1. Youre so cool! I dont suppose Ive read something like this before. So good to seek out somebody with some original ideas on this subject. realy thanks for starting this up. this web site is one thing that’s needed on the net, someone with a bit originality. helpful job for bringing something new to the web!

  2. Hi I want to create a menu where submenu will open at same height where the main menu or dropdown will open. how can I achieve that? please help me. Please let me know if you have any question regarding my question.

Leave a Reply

Note: Your email address will not be published. Required fields are marked *