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 :
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>
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 : 
Good Example, Pretty useful , do you also use any Javascript library for such thing like JQuery or any other JavaScript library ?
ReplyDeleteJavin
Top 10 Spring interview questions in Java
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