javascript menu with css

E

eripey

Sorry about the double post, I adjusted the subject to the correct one.

Everything is working right on this except when I press one link, and I

go press another link, I need the previous link to depress. If anyone
can help me with this that would be great.

Here is the code below


<style type="text/css">


..bevelmenu{
font: bold small arial;
padding: 6px 0;
margin: 0;
width: 100%;
background-color: #FFF2BF;
text-align: left; /*set value to "right" for example to align menu to
the right of page*/



}


..bevelmenu a{
font-weight:bold;
background-color:transparent;
padding: 4px;
/*padding: 1px 0.5em;*/
text-decoration: none;
color: white;
/*border: 2px solid #FFF2BF;*/


}


..bevelmenu a:hover{
font-weight:bold;
color: #245EDC;
background-color: white;
border-style: outset;


}


..EPDPSz
{
COLOR: royalblue;
FONT-SIZE: small;
FONT-WEIGHT: bold;
BACKGROUND-COLOR: "aliceblue";
BORDER-BOTTOM: white solid thin;
BORDER-LEFT: gray solid thin;
BORDER-RIGHT: white solid thin;
BORDER-TOP: gray solid thin;


}


html>body .bevelmenu a:active{ /* Apply mousedown effect only to NON IE

browsers */
border-style: inset;

}


</style>

<html>
<head>
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="menubutton.css" />
<base target="main">
<script language="javascript">
function depress(s,f) {
s.className="EPDPSz";
}
</script>
</head>


<body topmargin="0" leftmargin="0">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr><td height="42">
<div class="bevelmenu">
<a id="1" onMouseDown="depress(this)";
href="http://www.dynamicdrive.com">Test</a>
<a id="2" onMouseDown="depress(this)";
href="http://www.javascriptkit.com">Test2</a>
<a id="3" onMouseDown="depress(this)";
href="http://www.codingforums.com">Test3</a>
<a id="4" onMouseDown="depress(this)";
href="http://www.cssdrive.com">Test4</a>
<a id="5" onMouseDown="depress(this)";
href="http://www.google.com">Test5</a>
<a id="6" onMouseDown="depress(this)";
href="http://www.dynamicdrive.com">Test6</a>
<a id="7" onMouseDown="depress(this)";
href="http://www.javascriptkit.com">Test7</a>
<a id="8" onMouseDown="depress(this)";
href="http://www.codingforums.com">Test8</a>
<a id="9" onMouseDown="depress(this)";
href="http://www.cssdrive.com">Test9</a>
<a id="10" onMouseDown="depress(this)";
href="http://www.google.com">Test10</a>
</div>
</tr></table>
</body>
</html>
 
M

marss

eripey said:
Everything is working right on this except when I press one link, and I

go press another link, I need the previous link to depress. If anyone
can help me with this that would be great.

Solution for this example may look like this:

function depress(s,f)
{
var links = document.getElementsByTagName("a");
for(var i=0; i<links.length; i++)
{
if (links != s)
links.className=null;
else
links.className="EPDPSz";
}
}

But in a real application you need separate menu items from another
links on a page.
There are many various means to achieve this goal. For example, specify
common name for this items:
<a id="1" name="menuitem" onMouseDown="depress(this)";
href="http://www.dynamicdrive.com">Test</a>
<a id="2" name="menuitem" onMouseDown="depress(this)";
href="http://www.javascriptkit.com">Test2</a>
<a id="3" name="menuitem" onMouseDown="depress(this)";
href="http://www.codingforums.com">Test3</a>
.....

and change script accordingly:
var links = document.getElementsByName("menuitem");
....
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,780
Messages
2,569,611
Members
45,277
Latest member
VytoKetoReview

Latest Threads

Top