CSS-Menu

[Toxictype]

Ich habe ein CSS-Menu, welches mit einfachen style-Attributen arbeitet!
Per Klick auf einen Hauptlink öffnet sich dieses und bei erneutem Klick schließt es sich wieder!

<ul id="navigation">
<li id="foldheader">
<a href="construction.php" target="content">Varianten</a>
</li>
<ul id="foldinglist" style="display: none">
<li><a href="construction.php" target="_self">- var_1</a></li>
<li><a href="construction.php" target="_self">- var_2</a></li>
</ul>

<li id="foldheader">
<a href="construction.php" target="content">Templates</a>
</li>
<ul id="foldinglist" style="display: none">
<li><a href="template1.php" target="content">- Template_1</a></li>
<li><a href="template2.php" target="content">- Template_2</a></li>
<li><a href="template3.php" target="content">- Template_3</a></li>
<li><a href="template4.php" target="content">- Template_4</a></li>
</ul>
</ul>

Die entsprechenden CSS-Zeilen sehen so aus:

ul#navigation { 
margin: 0; padding: 0;
list-style-type: none;
font: 8 pt Verdana, Arial, Helvetica, sans serif;
}
#navigation li{
margin: 0px 0px 0px 0px;
}
#navigation a{
padding: 2px 2px 2px 2px;
border: 1px solid #FFFFFF;
width: 167 px;
background: #F3F2F2; color: #2A793A;
text-decoration: none; 
}
#navigation a:visited {
color: #2A793A;
text-decoration: none;
}
#navigation a:hover {
font: bold 8 pt Verdana, Arial, Helvetica, sans serif;
}
#navigation a:active {
color: #2A793A;
text-decoration: none;
font-weight: bold;
}
#foldinglist{margin: 0; padding: 0; font-size:8 pt; list-style-type: none; text-decoration: none; border: 0px;}

Ich würde gerne wissen, wie ich ein geöffnetes Menu schließen kann, wenn ich auf einen anderen Hauptlink klicke, also eine anderes öffne. Kann ich style="display: none" irgendwie verändern oder bedarf es da etwas mehr???

 

[ZeitGeist]

Wie werden denn da die Untermenüs angezeigt wenn man draufklickt? Kann da nix erkennen.
Das Ausblenden kannst mit JS machen, aber das ist nicht das was du willst oder?

Abgesehen davon hast du 2mal die gleiche id,

 

[Toxictype]

Sorry, die JS-Datei habe ich natürlich nicht eingesetzt.
Meiner Meinung nach kommt es auf '... style="display: none">' an.
Mit dem Script an sich kann ich nichts so viel anfangen. Ich habe überlegt, ob man '... style="display: none">' per PHP einfügen lassen soll, d.h. den Links bei Klick Werte übergebe lasse, die den Wert '... style="display: none">' deaktivieren.

Vielleicht ist es auch viel einfacher das Skript anzupassen.

<script>
<!--
var head="display:''"
img1=new Image()
img1.src=""
img2=new Image()
img2.src=""

var ns6=document.getElementById&&!document.all
var ie4=document.all&&navigator.userAgent.indexOf("Opera")==-1

function checkcontained(e){
var iscontained=0
cur=ns6? e.target : event.srcElement
i=0
if (cur.id=="foldheader")
iscontained=1
else
while (ns6&&cur.parentNode||(ie4&&cur.parentElement)){
if (cur.id=="foldheader"||cur.id=="foldinglist"){
iscontained=(cur.id=="foldheader")? 1 : 0 // original 1 :0 
break
}
cur=ns6? cur.parentNode : cur.parentElement
}

if (iscontained){
var foldercontent=ns6? cur.nextSibling.nextSibling : cur.all.tags("UL")[0]
if (foldercontent.style.display=="none"){
foldercontent.style.display=""
cur.style.listStyleImage=""
}
else{
foldercontent.style.display="none"
cur.style.listStyleImage=""
}
}
}

if (ie4||ns6)
document.onclick=checkcontained
//-->
</script>

 

[Toxictype]

Hallo Zeitgeist,

bist Du noch da?

 

[ZeitGeist]

sorry, aber da muss wer ran der mehr Ahnung als ich von JS habe.