Switchmenü/ aufklappbares Untermenü
#1
Hallo und gesundes neues Jahr ihr Lieben!

Habe mir dieses Menü ausgesucht GUCKSU

find das ganz nett und relativ leicht verständlich für mich, nur hätte ich gerne, dass die MenüButtons nach Anklicken sich ändern (CSS) .
Zwar weiss ich wie das "sonst" funktioniert, nur hier bekomme ich das nicht hin.:haue: (weil ich ja kein a zu den "menutitle" habe...)
Vielleicht muss auch nur im JS was geändert werden...aber das kann ich leider gar nicht :oops:

Es muss ja nicht genau dieses Script sein. Also falls es ein anderes gibt, bin ich auch um jeden Tipp dankbar.
Schön ist halt nur, das sich hier die Untermenüs nach unten mit Verschiebung der anderen Navi Buttons öffnet und bei Klick auf anderen Button wieder schliessen.

Liebe Grüsse aus dem eisigen Norden *bibber*
Zitieren
#2
Hi,

teste mal... ;-)

[HTML]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

<title>Menue</title>

<style type="text/css">
.menutitle {
cursor:pointer;
margin-bottom: 5px;
color:#000000;
width:140px;
padding:2px;
text-align:center;
font-weight:bold;
border:1px solid #000000;
}

.submenu{
margin-bottom: 0.5em;
}
</style>

<script type="text/javascript">

/***********************************************
* Switch Menu script- by Martial B of http://getElementById.com/
* Modified by Dynamic Drive for format & NS4/IE4 compatibility
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

var persistmenu="yes" //"yes" or "no". Make sure each SPAN content contains an incrementing ID starting at 1 (id="sub1", id="sub2", etc)
var persisttype="sitewide" //enter "sitewide" for menu to persist across site, "local" for this page only

if (document.getElementById){ //DynamicDrive.com change
document.write('<style type="text/css">\n')
document.write('.submenu{display: none;}\n')
document.write('</style>\n')
}

function SwitchMenu(obj){
if(document.getElementById){
var el = document.getElementById("sub"+obj);

var ar = document.getElementById("masterdiv").getElementsByTagName("span"); //DynamicDrive.com change
var art = document.getElementById("masterdiv").getElementsByTagName("div"); //DynamicDrive.com change
if(el.style.display != "block") { //DynamicDrive.com change

for (var i=0; i<ar.length; i++){
if (ar[i].className=="submenu") //DynamicDrive.com change
ar[i].style.display = "none";
art[i].style.backgroundColor = "#ECECFF";

}
el.style.display = "block";
document.getElementById("topmenue"+obj).style.backgroundColor = "#ffcc00";
} else {
el.style.display = "none";
document.getElementById("topmenue"+obj).style.backgroundColor = "#ECECFF";

}


} // document.getElementById
} // ende funct

function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function onloadfunction(){
if (persistmenu=="yes"){
var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
var cookievalue=get_cookie(cookiename)
if (cookievalue!="") {
document.getElementById("sub"+cookievalue).style.display="block";
document.getElementById("topmenue"+cookievalue).style.backgroundColor = "#ffcc00";
}
}
}

function savemenustate(){
var inc=1, blockid=""
while (document.getElementById("sub"+inc)){
if (document.getElementById("sub"+inc).style.display=="block"){
document.getElementById("topmenue"+inc).style.backgroundColor = "#ffcc00";
blockid = inc;
break;
}
inc++
}
var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
var cookievalue=(persisttype=="sitewide")? blockid+";path=/" : blockid
document.cookie=cookiename+"="+cookievalue

}

if (window.addEventListener)
window.addEventListener("load", onloadfunction, false)
else if (window.attachEvent)
window.attachEvent("onload", onloadfunction)
else if (document.getElementById)
window.onload=onloadfunction

if (persistmenu=="yes" && document.getElementById)
window.onunload=savemenustate

</script>

</head>
<body>

<!-- Keep all menus within masterdiv -->
<div id="masterdiv">

<div class="menutitle" style="background-color: #ECECFF" id="topmenue1" onclick="SwitchMenu(1)">Site Menu</div>
<span class="submenu" id="sub1">
- <a href="cm1.html">Menuelink 1</a><br>
- <a href="cm2.html">Menuelink 2</a><br>
- <a href="revised.htm">Revised Scripts</a><br>
- <a href="morezone/">More Zone</a>
</span>

<div class="menutitle" style="background-color: #ECECFF" id="topmenue2" onclick="SwitchMenu(2)">FAQ/Help</div>
<span class="submenu" id="sub2">
- <a href="notice.htm">Usage Terms</a><br>
- <a href="faqs.htm">DHTML FAQs</a><br>
- <a href="help.htm">Scripts FAQs</a>
</span>

<div class="menutitle" style="background-color: #ECECFF" id="topmenue3" onclick="SwitchMenu(3)">Help Forum</div>
<span class="submenu" id="sub3">
- <a href="http://www.codingforums.com">Coding Forums</a><br>
</span>

<div class="menutitle" style="background-color: #ECECFF" id="topmenue4" onclick="SwitchMenu(4)">Cool Links</div>
<span class="submenu" id="sub4">
- <a href="http://www.javascriptkit.com">JavaScript Kit</a><br>
- <a href="http://www.freewarejava.com">Freewarejava</a><br>
- <a href="http://www.cooltext.com">Cool Text</a><br>
- <a href="http://www.google.com">Google.com</a>
</span>
</div>
<!-- Keep all menus within masterdiv -->
</body>
</html>[/HTML]

Cu Helmut
Zitieren
#3
jou Helmut das ist supi.... :daumen:

aber ich hab noch eine Bitte an dich *fleh*

da ich wie gesagt von JS null plan habe und es dort ja auch geändert sein muss .... könntest du es mir so schreiben, das ich das auch mit JPGs hinbekomme.

also button_hell.jpg und button_dkl.jpg

beide sind im ordner img



Im CSS habe ich zwar unter

.menutitle
background: url(img/button_hell.jpg) no-repeat center top;

den Button sichtbar, aber das ist ja nicht die Lösung.

Das wäre toll wenn du das hinbekämest.
Dann haste nen Wunsch frei *lach*
Zitieren
#4
...
ich nehm dich mal beim Wort... ;-)
Zitat:>> Achtung! Ich bin nicht doof....nur manchmal etwas gehirnlahm O:-) <<

backgroundColor <> backgroundImage
http://www.juergens-workshops.de/service...enschaften

Solltest du hinbekommen, etwas Gehirnjogging kann ja nicht schaden MrGreen

Cu Helmut
Zitieren
#5
lachwech....

du bist mir ja nen scherzkeks, aber wo du recht hast hast du recht :lol:

habs hinbekommen und bin dir zu riesen dank verpflichtet!
Bussi
also, wo ist dein wunsch *lol*
Zitieren