+- Juergens-Workshops.de Forum (https://forum.juergens-workshops.de)
+-- Forum: HTML und Co (https://forum.juergens-workshops.de/forumdisplay.php?fid=62)
+--- Forum: CSS und Javascript (https://forum.juergens-workshops.de/forumdisplay.php?fid=86)
+--- Thema: Switchmenü/ aufklappbares Untermenü (/showthread.php?tid=24619)
Switchmenü/ aufklappbares Untermenü - Seramis - 04.01.2008
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*
Switchmenü/ aufklappbares Untermenü - Helmut - 04.01.2008
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
Switchmenü/ aufklappbares Untermenü - Seramis - 04.01.2008
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*
Switchmenü/ aufklappbares Untermenü - Helmut - 04.01.2008
...
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/selfhtml811/javascript/objekte/style.htm#style_eigenschaften
Solltest du hinbekommen, etwas Gehirnjogging kann ja nicht schaden
Cu Helmut
Switchmenü/ aufklappbares Untermenü - Seramis - 05.01.2008
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!
also, wo ist dein wunsch *lol*