- Joined
- Jun 15, 2007
- Messages
- 1,634
- Reaction score
- 5
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:
Html:
css:
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;
}
/* -----------------------------*/