Silent Devil

Saturday, 25 September 2010

Dynamic Drop Down Menu

Here I am giving u the simplest example of a dynamic drop down menu. On mouse over, a sub menu is collapsed.Check out the codes. Try this at home. You will really be enjoyed.

HTML Code

HTML code is very simple and without tables. It used unordered list for menu items and hidden layers near own parent items.

Parent items and hidden layers have unique identifiers. Also these have event handlers onmouseover and onmouseout:

<ul id="sddm">
    <li><a href="#" 
        onmouseover="mopen('m1')" 
        onmouseout="mclosetime()">Home</a>
        <div id="m1" 
            onmouseover="mcancelclosetime()" 
            onmouseout="mclosetime()">
        <a href="#">HTML Drop Down</a>
        <a href="#">DHTML Menu</a>
        <a href="#">JavaScript DropDown</a>
        <a href="#">Cascading Menu</a>
        <a href="#">CSS Horizontal Menu</a>
        </div>
    </li>
    <li><a href="#" 
        onmouseover="mopen('m2')" 
        onmouseout="mclosetime()">Download</a>
        <div id="m2" 
            onmouseover="mcancelclosetime()" 
            onmouseout="mclosetime()">
        <a href="#">ASP Dropdown</a>
        <a href="#">Pulldown menu</a>
        <a href="#">AJAX Drop Submenu</a>
        <a href="#">DIV Cascading Menu</a>
        </div>
    </li>
    <li><a href="#">Order</a></li>
    <li><a href="#">Help</a></li>
    <li><a href="#">Contact</a></li>
</ul>
<div style="clear:both"></div>

CSS Code

<li> tag have loat: left; declaration. sumbmenu layer have visibility: hidden;and position: absolute;. Anchor tag set to display: block;

Everything else is usual decoration:

#sddm
{ margin: 0;
 padding: 0;
 z-index: 30}

#sddm li
{ margin: 0;
 padding: 0;
 list-style: none;
 float: left;
 font: bold 11px arial}

#sddm li a
{ display: block;
 margin: 0 1px 0 0;
 padding: 4px 10px;
 width: 60px;
 background: #5970B2;
 color: #FFF;
 text-align: center;
 text-decoration: none}

#sddm li a:hover
{ background: #49A3FF}

#sddm div
{ position: absolute;
 visibility: hidden;
 margin: 0;
 padding: 0;
 background: #EAEBD8;
 border: 1px solid #5970B2}

 #sddm div a
 { position: relative;
  display: block;
  margin: 0;
  padding: 5px 10px;
  width: auto;
  white-space: nowrap;
  text-align: left;
  text-decoration: none;
  background: #EAEBD8;
  color: #2875DE;
  font: 11px arial}

 #sddm div a:hover
 { background: #49A3FF;
  color: #FFF}

JavaScript Code

Insert this code between your <head></head> tags. Look to the code for the comments:


var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;

// open hidden layer
function mopen(id)
{ 
 // cancel close timer
 mcancelclosetime();

 // close old layer
 if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';

 // get new layer and show it
 ddmenuitem = document.getElementById(id);
 ddmenuitem.style.visibility = 'visible';

}
// close showed layer
function mclose()
{
 if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}

// go close timer
function mclosetime()
{
 closetimer = window.setTimeout(mclose, timeout);
}

// cancel close timer
function mcancelclosetime()
{
 if(closetimer)
 {
  window.clearTimeout(closetimer);
  closetimer = null;
 }
}

// close layer when click-out
document.onclick = mclose;

You can implement this menu on any place on the page. Enjoy

Javascript Photo Album

Here I am giving u a simple javascript code to create a simple photo album. At first, take a look at the html file...

Screen Shot

	<html>
	<head>
	<title>Photo Album Viewer</title>
	<style>
	a:visited{color:black;font-family:verdana}
	a:link{color:black;font-family:verdana}
	a:hover{color:blue;font-family:verdana}

	p, td {color:black;font-family:verdana;font-size:8pt}
	h1 {color:black;font-family:verdana;font-size:12pt}
	</style>
	<script>



	function changeImage()
	{
	var list = document.getElementById('optionlist');
	document.mainimage.src = list.options[list.selectedIndex].value;
	}

	function prevImage()
	{
	var list = document.getElementById('optionlist');
	if(list.selectedIndex == 0)
	{
	list.selectedIndex = list.options.length-1;
	}
	else
	{
	list.selectedIndex--;
	}
	changeImage();
	}

	function nextImage()
	{
	var list = document.getElementById('optionlist');
	if(list.selectedIndex == list.options.length-1)
	{
	list.selectedIndex = 0;
	}
	else
	{
	list.selectedIndex++;
	}
	changeImage();
	}
	</script>
	</head>
	<body onLoad="javascript:changeImage()">

	<center><h1>Photo Album Viewer</h1></center>
	<table align="center" border="0">
	<tr>
	<td colspan="3" align="center"><img name="mainimage" border="1"></td>
	</tr>
	<tr>
	<td align="left"><input type="button" value="<- Back" onClick="javascript:prevImage()"></td>
	<td align="center">

	*<select* id="*optionlist" onChange="javascript:changeImage()*">
	*<option* *value="image1.jpg">First Image</option>***
	*<option* *value="image2.jpg">Second Image</option>***
	*<option* *value="image3.jpg">Third Image</option>***
	*<option* *value="image4.jpg">Fourth Image</option>***
	*<option* *value="image5.jpg">Fifth Image</option>***
	*</select>*

	</td>
	<td align="right"><input type="button" value="Next->" onClick="javascript:nextImage()"></td>
	</tr>
	</table>

	</body>
	</html> That is the html file. You just have to change the option values in the select tag above. You can modify it and give the names of the picture u like. Make sure to keep your desired pictures in the base address of the html file. You have to do nothing. Just paste your pictures in the base address and modify the select tag of the html file with your own image names. Thats all. Enjoy friends