Optimization of Javascript code. (dropdown menu)

Snel pUppie · Sep 8, 2009

Okay so I got this code me and my friend made and I really need to make the javascript code smaller/smarter... If you know javascript you will notice how long the code is and it can for sure get better coded.

Here's the JS:

PHP:

window.onload = main;

/* -----Klick----- */

function main()
{
	var topMenu1 = document.getElementById("topMenu1");
	var topMenu2 = document.getElementById("topMenu2");
	var topMenu3 = document.getElementById("topMenu3");

	var leftMenu1 = document.getElementById("leftMenu1");
	var leftMenu2 = document.getElementById("leftMenu2");
	var leftMenu3 = document.getElementById("leftMenu3");
	
	topMenu1.onclick=topmenu1;
	topMenu2.onclick=topmenu2;
	topMenu3.onclick=topmenu3;

	leftMenu1.onclick=leftmenu1;
	leftMenu2.onclick=leftmenu2;
	leftMenu3.onclick=leftmenu3;
}


/* -----Top Menyn----- */


function topmenu1()
{

	var topDD1 = document.getElementById("topDD1").style;
	var topmenu1 = document.getElementById("topMenu1").style;
		
	if(topDD1.display==("block"))
	{
		topDD1.display=("none");
		topmenu1.backgroundColor=("");

	}
	else
	{
		topDD1.display=("block");
		topmenu1.backgroundColor=("#ffffff");
	}	

}

function topmenu2()
{

	var topDD2 = document.getElementById("topDD2").style;
	var topmenu2 = document.getElementById("topMenu2").style;

	if(topDD2.display==("block"))
	{
		topDD2.display=("none");
		topmenu2.backgroundColor=("");
	}
	else
	{
		topDD2.display=("block");
		topmenu2.backgroundColor=("#ffffff");
	}

}

function topmenu3()
{

	var topDD3 = document.getElementById("topDD3").style;
	var topmenu3 = document.getElementById("topMenu3").style;

	if(topDD3.display==("block"))
	{
		topDD3.display=("none");
		topmenu3.backgroundColor=("");
	}
	else
	{
		topDD3.display=("block");
		topmenu3.backgroundColor=("#ffffff");
	}

}


/* -----Vänstra Menyn----- */


function leftmenu1()
{

	var leftDD1 = document.getElementById("leftDD1").style;
	var leftmenu1 = document.getElementById("leftMenu1").style;
		
	if(leftDD1.display==("block"))
	{
		leftDD1.display=("none");
		leftmenu1.backgroundColor=("");

	}
	else
	{
		leftDD1.display=("block");
		leftmenu1.backgroundColor=("#ffffff");
	}	

}

function leftmenu2()
{

	var leftDD2 = document.getElementById("leftDD2").style;
	var leftmenu2 = document.getElementById("leftMenu2").style;
		
	if(leftDD2.display==("block"))
	{
		leftDD2.display=("none");
		leftmenu2.backgroundColor=("");

	}
	else
	{
		leftDD2.display=("block");
		leftmenu2.backgroundColor=("#ffffff");
	}	

}

function leftmenu3()
{

	var leftDD3 = document.getElementById("leftDD3").style;
	var leftmenu3 = document.getElementById("leftMenu3").style;
		
	if(leftDD3.display==("block"))
	{
		leftDD3.display=("none");
		leftmenu3.backgroundColor=("");

	}
	else
	{
		leftDD3.display=("block");
		leftmenu3.backgroundColor=("#ffffff");
	}	

}

Html:

HTML:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >

<head>
	<title>Dropdown Menu</title>
	<link href="style.css" rel="stylesheet" type="text/css" />
	<script src="script.js" type="text/javascript"></script>
</head>

<body>
<div id="container">
	
	<div id="topmenu">
		<ul id="item">
			<li>
				<a href="#">Getting Started</a>
			</li>

			<li>
				<a href="#" id="topMenu1">Installing</a>
				<ul id="topDD1">
					<li><a href="#">Apache</a></li>
					<li><a href="#">PHP</a></li>
					<li><a href="#">MySQL</a></li>
				</ul>
			</li>

			<li>
				<a href="#" id="topMenu2">Configuring</a>
				<ul id="topDD2">
					<li><a href="">Apache</a></li>

					<li><a href="#">PHP</a></li>
					<li><a href="#">MySQL</a></li>
				</ul>
			</li>

			<li>
				<a href="#" id="topMenu3">Testing</a>
				<ul id="topDD3">
					<li><a href="#">Why?</a></li>
					<li><a href="#">What?</a></li>
				</ul>
			</li>

			<li>
				<a href="#">Summary</a>
			</li>

		</ul>
	</div>
	
	
	<div id="bottomcontainer">
			<ul id="leftmenu">
				<li>
					<a href="#">Getting started</a>
				</li>

				<li>
					<a href="#" id="leftMenu1">Installing</a>
					<ul id="leftDD1">
						<li><a href="#">Apache</a></li>
						<li><a href="#">PHP</a></li>
						<li><a href="#">MySQL</a></li>
					</ul>
				</li>

				<li>
					<a href="#" id="leftMenu2">Configuration</a>
					<ul id="leftDD2">
						<li><a href="#">Apache</a></li>
						<li><a href="#">PHP</a></li>
						<li><a href="#">MySQL</a></li>
					</ul>
				</li>

				<li>
					<a href="#" id="leftMenu3">Testing</a>
					<ul id="leftDD3">
						<li><a href="#">Why?</a></li>
						<li><a href="#">What?</a></li>
					</ul>
				</li>

				<li>
					<a href="#">Summary</a>
				</li>
				
			</ul>
		
		<div id="content">Content</div>
	</div>
</div>

</body>

</html>

css:

PHP:

* /* Universal */
{
	padding: 0;
	margin: 0;
}

body /* Standard värden */
{
	background-color: gray;	
	margin: 4px 0;
	font-family: tahoma, verdana;
	font-size: 12px;
}

a /* Standard för länkar */
{
	text-decoration: none;
}

#container /* Håller hela sidan */
{
	width: 900px;
	margin: auto;	
}

#bottomcontainer /* Containern för bottenområdet */
{
	margin-top: 10px;
}

#content /* Mittenrutans storlek och placeringar */
{
	width: 736px;
	height: 500px;
	border: 1px solid black;
	float: left;
	margin-left: 10px;	
}



/* -----Menyn på toppen----- */


#topmenu /* Placerar ut topmenyn */
{
	height: 25px;
	border: 1px solid #000000;
	margin-top: 10px;
	margin-left: 162px;
	padding-left: 120px;
}

#topmenu li a /* Fixar ett block */
{
	display: block;
}


		#item li /* Placerar ut och konfigurerar listor som ligger i <li> under classen "item" */
		{
			float: left;
			list-style: none;
		}

			#item li:hover /* Hover effekt */
			{
				background-color: #ffffff;
			}

		#item li a /* padding på länkar som ligger i <li> under classen "item" osv.*/
		{
			width: 100px;
			padding: 6px;
			color: #222222;
		}

		.topSub /* Döljer undermenyer och placerar ut dem bl.a */
		{
			background-color: #666666;	
			display: none;
			position: absolute;
			z-index: 2;
			width: 112px;
		}


/* -----------------------------*/




/* -----Menyn till vänster----- */


#leftmenu /* Placerar ut vänstermenyn */
{
	width: 150px;
	height: 250px;
	border: 1px solid #000000;
	float: left;
	list-style: none;
}

		#leftmenu li a /* Inställningar för länkar i listor */
		{
			display: block;
			width: 130px;
			color: #333333;
			text-decoration: none;
			padding: 3px;
		}
			#leftmenu li a:hover /* Vad som händer när man hovrar över länkar i listor */
			{
				background-color: #ffffff;
				color: #000000;		
			}

		#leftmenu li ul /* Positionerar och döljer undermenyn */
		{
			display: none;
			position: absolute;
			margin: -20px 0px 0px 130px;
			z-index: 1;
		}


			#leftmenu li ul li /* Tar bort list style från undermeny */
			{
				list-style: none;
			}

			#leftmenu li ul li a /* Utseende på undermeny blocket */
			{
				width: 100px;
				background-color: #666666;
				padding: 3px;
				text-transform: uppercase;
				font-size: 10px;
			}

		
/* -----------------------------*/

Colandus · Sep 8, 2009

Try this:

PHP:

window.onload = function()
{
	for(i = 1; i <= 3; i++)
	{
		document.getElementById("topMenu" + i).onclick = "menu('top', " + i + ")";
		document.getElementById("leftMenu" + i).onclick = "menu('left', " + i + ")";
	}
}

function menu(name, id)
{
    var DD = document.getElementById(name + "DD" + id).style;
    var menu = document.getElementById(name + "Menu" + id).style;

    if(DD.display==("block"))
    {
        DD.display=("none");
        menu.backgroundColor=("");
    }
    else
    {
        DD.display=("block");
        menu.backgroundColor=("#ffffff");
    }
}

Not sure if it works tho

Snel pUppie · Sep 8, 2009

Didn't work.

Snel pUppie · Sep 10, 2009

Fixed it.

Optimization of Javascript code. (dropdown menu)

Snel pUppie

Member

Colandus

Advanced OT User

Snel pUppie

Member

Snel pUppie

Member

Similar threads