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.
Check these Tutorials if needed
- HTML Tutorial – Learn HTML in One Day – for Beginners
- CSS Tutorial – a Beginner’s CSS Guide Part 1
- CSS Tutorial – Advance user’s CSS guide Part 2
- JavaScript Tutorial – a Beginner’s JavaScript Guide
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!
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!
Home run! Great slugging with that answer!
I need multiple dropdown menu can you help me on this. please mail me on [email protected]
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.