Tweet
Ich denke ich habe ein kleines Verständnissproblem,
bzw. habe noch zu wenig erfahrung mit CSS und Javascript
ich habe hier mal ein Menü zusammengestrickt und möchte nun bei klick auf einen Menüpunkt das er die die eigenschaft red im css beibehällt solange bis ich auf einen anderen Link im Menü klicke.
Was muss ich also hierfür verändern ?
Ach und nochwas für das ausklappen des Menüs benutze ich ja als href ein javascriptbefehl und zum schließen den Pfeil
wie erreiche ich es das es auch ohne Pfeil sich schließt wenn ich ein 2tes mal auf die Kategorie klicke das Menü sich schließt (sich der javascriptbefehl beim öffnen ändert auf schließen) ?
Schon mal dank im vorraus.
MFG Postaria
Hier der Code fürs Menü
bzw. habe noch zu wenig erfahrung mit CSS und Javascript
ich habe hier mal ein Menü zusammengestrickt und möchte nun bei klick auf einen Menüpunkt das er die die eigenschaft red im css beibehällt solange bis ich auf einen anderen Link im Menü klicke.
Was muss ich also hierfür verändern ?
Ach und nochwas für das ausklappen des Menüs benutze ich ja als href ein javascriptbefehl und zum schließen den Pfeil
wie erreiche ich es das es auch ohne Pfeil sich schließt wenn ich ein 2tes mal auf die Kategorie klicke das Menü sich schließt (sich der javascriptbefehl beim öffnen ändert auf schließen) ?
Schon mal dank im vorraus.
MFG Postaria
Hier der Code fürs Menü
Code:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<style type="text/css">
body, p {
font-family : verdana, sans-serif ;
font-size : 14px;
text-align : left;
color : #888888;
margin : 0px;
padding : 0px;
margin-top : 35px;
margin-left : 30px;
}
a {
color : #888888;
text-decoration : none;
}
#element {
color : #FFF;
height : 0px;
background-color : #bfbebe;
overflow : hidden;
}
#element p {
text-align : static;
border : 1;
border-width : 1px;
border-style : solid;
}
#element1 {
color : #FFF;
height : 0px;
background-color : #bfbebe;
overflow : hidden;
}
#element1 p {
text-align : static;
border : 1;
border-width : 1px;
border-style : solid;
}
#element2 {
color : #FFF;
height : 0px;
background-color : #bfbebe;
overflow : hidden;
}
#element2 p {
text-align : static;
border : 1;
border-width : 1px;
border-style : solid;
}
#element3 {
color : #FFF;
height : 0px;
background-color : #bfbebe;
overflow : hidden;
}
#element3 p {
text-align : static;
border : 1;
border-width : 1px;
border-style : solid;
}
#element4 {
color : #FFF;
height : 0px;
background-color : #bfbebe;
overflow : hidden;
}
#element4 p {
text-align : static;
border : 1;
border-width : 1px;
border-style : solid;
}
#element5 {
color : #FFF;
height : 0px;
background-color : #bfbebe;
overflow : hidden;
}
#element5 p {
text-align : static;
border : 1;
border-width : 1px;
border-style : solid;
}
#element6 {
color : #FFF;
height : 0px;
background-color : #bfbebe;
overflow : hidden;
}
#element6 p {
text-align : static;
border : 1;
border-width : 1px;
border-style : solid;
}
#element7 {
color : #FFF;
height : 0px;
background-color : #bfbebe;
overflow : hidden;
}
#element7 p {
text-align : static;
border : 1;
border-width : 1px;
border-style : solid;
}
#content {
text-align : static;
background-image:url(./images/menue/button_header_lost.jpg);
border : 1;
text-align : center;
border-width : 1px;
border-style : solid;
height :30px;
line-height :30px;
}
#arrows {
text-align : right;
}
#head{
width:90px;
margin: 5px;
}
#head a {
color :#616161;
}
#head a:active, #head a:hover{
color :red;
}
#head ul ,#head li {
list-style: none;
margin: 0px;
padding: 0px;
}
/*=========== menü ===========*/
#menu10 {
width:100px;
margin: 10px;
}
#menu10 ul ,#menu10 li{
list-style: none;
margin: 0px;
padding: 0px;
}
#menu10 li a:link , #menu10 li a:visited , #menu10 li a:active {
display:block;
height:30px;
line-height:30px;
background-image:url(./images/menue/button_lost1.jpg);
border : 1;
border-width : 1px;
border-style : solid;
text-decoration:none;
text-align:center;
font-size: 13px;
font-family: verdana, sans-serif;
padding-bottom:0px;
margin:0px;
border-color : #837d7d
}
#menu10 li a:hover {
background-image:url(./images/menue/button_lost.jpg);
border : 1;
color : red;
border-width : 1px;
border-style : solid;
border-color : #837d7d
}
</style>
</script>
<script type="text/javascript">
var gxElementSizer =
{
addElement : function (element, sizeType)
{
if (this.e == null)
{
this.e = {};
}
this.e[element] =
{
element : (typeof element == 'object') ? element : document.getElementById(element),
sizeType : (sizeType.toLowerCase() == 'width') ? 'width' : 'height',
count : null,
newElementSize : null,
currentElementSize : null,
sizeDifferenz : null,
interval : null
};
},
calculateSize : function (t, b, c, d)
{
if ((t/=d/2) < 1)
{
return c/2*t*t*t*t + b;
}
return -c/2 * ((t-=2)*t*t*t - 2) + b;
},
setElementSize : function (element, newSize, duration)
{
if(arguments[3] == null)
{
window.clearTimeout(this.e[element]['interval']);
this.e[element]['count'] = 0;
this.e[element]['newElementSize'] = newSize;
this.e[element]['currentElementSize'] =
parseInt(this.e[element]['element'][(this.e[element]['sizeType'] == 'width') ? 'offsetWidth' : 'offsetHeight']);
this.e[element]['sizeDifferenz'] =
this.e[element]['newElementSize'] - this.e[element]['currentElementSize'];
this.e[element]['interval'] = 0;
}
if(this.e[element]['count'] < duration)
{
this.e[element]['element'].style[this.e[element]['sizeType']] =
this.calculateSize(this.e[element]['count'],
this.e[element]['currentElementSize'],
this.e[element]['sizeDifferenz'], duration) + 'px';
this.e[element]['count']++;
this.e[element]['interval'] =
window.setTimeout('gxElementSizer.setElementSize("' + element + '", ' + newSize + ', ' + duration + ', true)', duration);
}
else
{
this.e[element]['count'] = null;
this.e[element]['newElementSize'] = null;
this.e[element]['currentElementSize'] = null;
this.e[element]['sizeDifferenz'] = null;
this.e[element]['interval'] = null;
window.clearTimeout(this.e[element]['interval']);
}
}
};
window.onload = function ()
{
gxElementSizer.addElement('element', 'height');
gxElementSizer.addElement('element1', 'height');
gxElementSizer.addElement('element2', 'height');
};
</script>
</head>
<body>
<table>
<tr><td>
<div id="content" onfocus="this.blur()" bgcolor="#bfbebe" id="arrows">
<div id="head">
<a href="javascript:gxElementSizer.setElementSize('element',115,30);void(0);alert(this.a.href);">Login</a>
<a href="javascript:gxElementSizer.setElementSize('element',0,20);void(0);">↑</a>
</div>
</div>
<div id="element">
<div id="menu10">
<ul>
<li><a href="./link1.html" target="main_frame" onfocus="this.blur()">Startseite</a></li>
<li><a href="./link2.html" target="main_frame" onfocus="this.blur()">Anmelden</a></li>
<li><a href="./link3.html" target="main_frame" onfocus="this.blur()">Abmelden</a></li>
</ul>
</div>
</div>
</td>
</tr>
<tr><td>
<div id="content" onfocus="this.blur()" bgcolor="#bfbebe" >
<div id="head">
<a href="javascript:gxElementSizer.setElementSize('element1',115,30);void(0);">Kat 1</a>
<a href="javascript:gxElementSizer.setElementSize('element1',0,20);void(0);">↑</a>
</div>
</div>
<div id="element1">
<div id="menu10">
<ul>
<li><a href="./link4.html" target="main_frame" onfocus="this.blur()">Unterpunkt 1</a></li>
<li><a href="./link5.html" target="main_frame" onfocus="this.blur()">Unterpunkt 2</a></li>
<li><a href="./link6.html" target="main_frame" onfocus="this.blur()">Unterpunkt 3</a></li>
</ul>
</div>
</div>
</td>
</tr>
<tr><td>
<div id="content" onfocus="this.blur()" bgcolor="#bfbebe" id="arrows">
<div id="head">
<a href="javascript:gxElementSizer.setElementSize('element2',85,30);void(0);">Kat 2</a>
<a href="javascript:gxElementSizer.setElementSize('element2',0,20);void(0);">↑</a>
</div>
</div>
<div id="element2">
<div id="menu10">
<ul>
<li><a href="./link7.html" target="main_frame" onfocus="this.blur()">Unterpunkt 4</a></li>
<li><a href="./link8.html" target="main_frame" onfocus="this.blur()">Unterpunkt 5</a></li>
</ul>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>
Bitte deinen Code umbrechen
Kommentar