Autor |
Nachricht |
Account gelöscht
Threadersteller
Ort: -
Alter: -
|
Verfasst Do 18.03.2004 20:45
Titel javascript menu II |
|
|
hallo!
vielen dank für all die antworten bei meinem letzten post!
ich habe jetzt ein neues menü (javascript).
mein problem ist wieder einmal, dass ich möchte, dass die hauptpunkte solange sie ausgeklappt sind den rollovereffekt beibehalten!
ich möchte also, dass:
- die hauptpunkte solange den rollovereffekt beibehalten, bis die unterpunkte wieder (durch klicken) "eingeklappt werden!
ich habe versucht, das ganze selbst hinzubekommen; bin aber kläglich gescheitert!
vielleicht hat jemand von euch nen tipp!
hier mein script:
Code: |
function SwitchMenu(obj){
if(document.getElementById){
var el = document.getElementById(obj);
var ar = document.getElementById(cont).getElementsByTagName(DIV);
if(el.style.display == none){
for (var i=0; i<ar.length; i++){
ar[i].style.display = none;
}
el.style.display = block;
}else{
el.style.display = none;
}
}
}
function ChangeClass(menu, newClass) {
if (document.getElementById) {
document.getElementById(menu).className = newClass;
}
}
document.onselectstart = new Function(return true);
|
und mein css:
Code: |
.menuOut {
cursor:pointer;
margin:2px;
background-color:#ecebeb;
color:#000000;
width:auto;
border:0px none #000000;
padding:2px;
text-align:left;
font-family:Arial, Helvetica, sans-serif;
font-weight:normal;
font-size: 10px;
font-style: normal;
line-height: normal;
font-variant: normal;
text-decoration: none;
text-indent: 30px;
}
.menuOver {
cursor:pointer;
margin:2px;
background-color:#183151;
color:#ffffff;
width:auto;
border:0px none #000000;
padding:2px;
text-align:left;
font-family:Arial, Helvetica, sans-serif;
font-weight:normal;
font-size: 10px;
font-style: normal;
line-height: normal;
font-variant: normal;
text-decoration: none;
text-indent: 30px;
}
und mein body:
<!-- Menu start -->
<div id=cont>
<p id=menu1 class=menuOut onclick=SwitchMenu('sub1') onmouseover=ChangeClass('menu1','menuOver') onmouseout=ChangeClass('menu1','menuOut')>PUNKT1</p>
<div class=submenu id=sub1 style=display:none;>
<img src=elem/spacer.gif width=35 height=1><a href=kommtnoch class=fliess>unterpunkt</a><br/>
<img src=elem/spacer.gif width=35 height=1><a href=kommtnoch>unterpunkt</a><br/>
<img src=elem/spacer.gif width=35 height=1><a href=kommtnoch>unterpunkt</a><br/>
<img src=elem/spacer.gif width=35 height=1><a href=kommtnoch>unterpunkt</a><br/>
<img src=elem/spacer.gif width=35 height=1><a href=kommtnoch>unterpunkt</a><br/>
<img src=elem/spacer.gif width=35 height=1><a href=kommtnoch>unterpunkt</a><br><br></div>
<p id=menu2 class=menuOut onclick=SwitchMenu('sub2') onmouseover=ChangeClass('menu2','menuOver') onmouseout=ChangeClass('menu2','menuOut')>PUNKT2</p>
<div class=submenu id=sub2 style=display:none;>
<img src=elem/spacer.gif width=35 height=1><a href=kommtnoch>unterpunkt</a><br/>
<img src=elem/spacer.gif width=35 height=1><a href=kommtnoch>unterpunkt</a><br><br></div>
<p id=menu3 class=menuOut onclick=SwitchMenu('sub3') onmouseover=ChangeClass('menu3','menuOver') onmouseout=ChangeClass('menu3','menuOut')>PUNKT3</p>
<div class=submenu id=sub3 style=display:none;>
<img src=elem/spacer.gif width=35 height=1><a href=kommtnoch>unterpunkt</a><br/>
<img src=elem/spacer.gif width=35 height=1><a href=kommtnoch>unterpunkt</a><br/>
<img src=elem/spacer.gif width=35 height=1><a href=kommtnoch>unterpunkt</a><br/>
<img src=elem/spacer.gif width=35 height=1><a href=kommtnoch>unterpunkt</a><br><br></div>
<p id=menu4 class=menuOut onclick=SwitchMenu('sub4') onmouseover=ChangeClass('menu4','menuOver') onmouseout=ChangeClass('menu4','menuOut')>PUNKT4</p>
<div class=submenu id=sub4 style=display:none;>
<img src=elem/spacer.gif width=35 height=1><a href=kommtnoch>unterpunkt</a><br/>
<img src=elem/spacer.gif width=35 height=1><a href=kommtnoch>unterpunkt</a><br/>
<img src=elem/spacer.gif width=35 height=1><a href=kommtnoch>unterpunkt</a><br/>
<img src=elem/spacer.gif width=35 height=1><a href=kommtnoch>unterpunkt</a><br><br></div>
<p id=menu5 class=menuOut onclick=SwitchMenu('sub5') onmouseover=ChangeClass('menu5','menuOver') onmouseout=ChangeClass('menu5','menuOut')>PUNKT5</p>
<div class=submenu id=sub5 style=display:none;>
<img src=elem/spacer.gif width=35 height=1><a href=kommtnoch>unterpunkt</a><br><br></div>
<p id=menu6 class=menuOut onclick=SwitchMenu('sub6') onmouseover=ChangeClass('menu6','menuOver') onmouseout=ChangeClass('menu6','menuOut')>PUNKT6</p>
<div class=submenu id=sub6 style=display:none;>
<img src=elem/spacer.gif width=35 height=1><a href=kommtnoch>unterpunkt</a><br/>
<img src=elem/spacer.gif width=35 height=1><a href=kommtnoch>unterpunkt</a><br/>
<img src=elem/spacer.gif width=35 height=1><a href=kommtnoch>unterpunkt</a><br>
<br>
</p>
<span class=fliess></span></div>
</div>
<!-- Menu end -->
|
//EDIT by Sarky
Bitte Code-Tags verwenden!
Zuletzt bearbeitet von Sarky am Do 18.03.2004 20:52, insgesamt 1-mal bearbeitet
|
|
|
|
|
Sarky
Dabei seit: 29.06.2002
Ort: Düsseldorf
Alter: 42
Geschlecht:
|
Verfasst Do 18.03.2004 20:53
Titel
|
|
|
Ehe Du soviel Quellcode postest wäre es weitaus einfacher Du lädst Dein Menü mal auf irgendeinen Webspace und verlinkst den hier, dann können wir Dir viel einfacher und besser helfen.
|
|
|
|
|
Anzeige
|
|
|
Account gelöscht
Threadersteller
Ort: -
Alter: -
|
Verfasst Do 18.03.2004 21:09
Titel
|
|
|
prinzipiell handelt es sich um dieses menü!
http://simplythebest.net/scripts/dhtml_script_116.html
ich möchte dass die hauptpunkte eben erst beim einklappen wieder verändern!
danke
Zuletzt bearbeitet von am Do 18.03.2004 21:10, insgesamt 1-mal bearbeitet
|
|
|
|
|
rpgo
Dabei seit: 02.12.2003
Ort: Berlin
Alter: -
Geschlecht:
|
Verfasst Do 18.03.2004 21:28
Titel
|
|
|
Kann man bei solchen Javascriptmenüs eigentlich auch mit Grafiken arbeiten? Zwecks ausklappbarer Zettel o.ä.?
|
|
|
|
|
Account gelöscht
Threadersteller
Ort: -
Alter: -
|
Verfasst Sa 20.03.2004 20:25
Titel
|
|
|
vielleicht kann mir wenigstens jemand nen tipp geben, wo ich nach dem fehler suchen muss! ich habe nämlich keinen plan!
das wäre klasse von euch!
|
|
|
|
|
beeviZ
Dabei seit: 30.09.2002
Ort: -
Alter: -
Geschlecht:
|
Verfasst So 21.03.2004 02:21
Titel
|
|
|
lad doch einfach mal das menü welches du bisher hast auf nen webspace und gib nen link hier. dann kann ich mir evtl auch mal besser vorstellen was du fürn problem hast.
vielleicht lässt sich im css noch was machen?!
Zuletzt bearbeitet von beeviZ am So 21.03.2004 04:02, insgesamt 1-mal bearbeitet
|
|
|
|
|
Account gelöscht
Threadersteller
Ort: -
Alter: -
|
|
|
|
|
Account gelöscht
Threadersteller
Ort: -
Alter: -
|
Verfasst Mo 22.03.2004 21:26
Titel
|
|
|
mach
Zitat: | onmouseover="ChangeClass('menu1','menuOver')" onmouseout="ChangeClass('menu1','menuOut')">PUNKT1</p> |
und stattdessen einen onClick-Handler rein (wie auch immer der in JS heißt)...
nun musst du nur noch die Funktion ChangeClass(menu, newClass) entsprechend ändern... etwa so (hab ich aber net ausprobiert):
Code: |
function ChangeClass(menu, oldClass, newClass) {
if (document.getElementById) {
if (document.getElementById(menu).className == oldClass) {
document.getElementById(menu).className = newClass;
}
if (document.getElementById(menu).className == newClass) {
document.getElementById(menu).className = oldClass;
}
}
} |
Wenn nicht klappt: Sorry, warn Schnellschuss, aber dann hast du ja schonmal nen Ansatz...
|
|
|
|
|
|
|
|
Ähnliche Themen |
Javascript-Menu
[JavaScript] Drop Down Menu
CSS-drop-down-menu OHNE javascript
[CSS/PHP/Javascript] CSS-Menu a:active soll sichtbar sein
simple javascript accordian menu - menü soll offen bleiben
[javascript] mit <select> feld wert an javascript funk
|
|