✔ Tree - Menü

[Comenius]

Hi,

ich bin auf der Suche nach so einem schönen Menü, das nach einem Klick "ausfährt".

Habe auch schon hunderte fertiger Code-Schnipsel gefunden, die mal mehr, mal weniger meinen Vorstellungen entsprachen...

Wie gesagt, soll nach einem Klick auf den Button / Link, ein Untermenü ausgeklappt werden.

Im Moment bastel ich hier an einem herum, das diese simple Aufgabe auch ausführt. ABER: Wenn man mit der Maus über den Link fährt, kommt nicht die Hand, sondern dieses "Textzeichen".

Ja, es sind immer nur Kleinigkeiten die stören...

Ich würde aber trotzdem gerne ein schönes Tutorial suchen, welches mir diese ganze Geschichte etwas genauer erklären könnte. (Natürlich mit meinen kleinen Voraussetzungen [das Tutorial aus dem Forum ist mir leider zu hoch *ehrlich*])

Hier mal der Code vom derzeitigen Menü:

Java:

var persistmenu="yes" 
var persisttype="sitewide"
if (document.getElementById){ 
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(obj);
var ar = document.getElementById("masterdiv").getElementsByTagName("span");
if(el.style.display != "block"){ 
for (var i=0; i<ar.length; i++){
if (ar[i].className=="submenu")
ar[i].style.display = "none";
}
el.style.display = "block";
}else{
el.style.display = "none";
}
}
}
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(cookievalue).style.display="block"
}
}
function savemenustate(){
var inc=1, blockid=""
while (document.getElementById("sub"+inc)){
if (document.getElementById("sub"+inc).style.display=="block"){
blockid="sub"+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

CSS:

.menutitle{
font-family:                  verdana,arial,helvetica,sans-serif; 
font-weight:                                                bold; 
font-size:                                                  10pt; 
text-decoration:                                            none;
color:                                                      #fff; 
background-color:                                        #8394b2; 
width:                                                     150px;
padding-left:                                                5px;
}

.submenu{
font-family:                  verdana,arial,helvetica,sans-serif; 
font-weight:                                                bold; 
font-size:                                                  10pt; 
text-decoration:                                            none;
color:                                                      #fff; 
background-color:                                        #eef2f7; 
width:                                                     150px;
padding-left:                                                5px;
}

Und Html:

<div id="masterdiv">
<div class="menutitle" onclick="SwitchMenu('sub1')">Menu</div>
<div class="submenu" id="sub1">
- <a href="#">untermenu1</a><br>
- <a href="#">untermenu2</a><br>
- <a href="#">untermenu3</a><br>
- <a href="#">untermenu4</a>
</span>
</div>

Würde mich freuen, wenn ich was für mich hättet.

Gruss
Commi

PS: Dieses Menü hier im Forum sieht ja heiß aus, is aber mit Flash

 

[Maik]

Wenn man mit der Maus über den Link fährt, kommt nicht die Hand, sondern dieses "Textzeichen".

Ja, es sind immer nur Kleinigkeiten die stören...

Der vermeintliche Link ist ein DIV-Element.

Probiere es mal mit der CSS-Eigenschaft cursor: pointer.

.menutitle{
font-family:                  verdana,arial,helvetica,sans-serif;
font-weight:                                                bold;
font-size:                                                  10pt;
text-decoration:                                            none;
color:                                                      #fff;
background-color:                                        #8394b2;
width:                                                     150px;
padding-left:                                                5px;
cursor:                                                  pointer;
}

 

[Comenius]

Cool, funktioniert THX

Da ich ja wirklich nur so wenig -->| |<-- von Javascript verstehe, wäre ein tutorial evtl. noch super. Will ja nicht dumm sterben

Trotzdem erstmal Danke.

Gruss
Commi

 

[Maik]

Die Lösung beruht auf CSS und nicht Javascript.

 

[Comenius]

Aber da gibt es doch wieder mal schwierigkeiten mit dem IE, oder?
Habe ich schon in mehreren Foren gelesen.

Aber zurück zu dem tollen fertig-Code: Wo wir doch gerade bei den Schönheitsoperationen sind. Wenn ich 2 mal auf den Link (der ja eigentlich keiner ist) klicke, wird der Text markiert.... Sieht ja nicht so toll aus. Ich meine mich aber erinnern zu können, dass ich mal durch einen dummen zufall einen Text hatte, der nicht zu makieren war.

Ich glaube das ging irgendwie, indem man den Text hinter eine Div-Box schob ?
Ach, Keine Ahnung

Wäre das denn zu machen, oder bilde ich mir hier gerade etwas ein?

Gruss
Commi

P.S. Ich schau mir das Tut trotzdem an, danke dir!