DHTML-Menü

R

recotha

Aktives Mitglied
hi leute!
ich wollte mir gerne mal ein dhtml-menü anschauen, um das ganze ein wenig zu verstehen lernen und mir dann ein eigenes zu schreiben.
worauf ichs abgesehen habe ist etwas in dieser art:
http://dhtml-menu.com/dhtml/menu_script.html
die transparenz gefällt mir total!
habe es mir mal runtergeladen und wollte den code des *.js-file anschauen, na denkste... bahnhof!
kennt jemand ein ähnlich funktionierendes transparentes menu, das simpel aufgebaut ist? egal ob css, javascript, or whatever!
danke schonmal!
 
ich habe etwas mit dynamischen menüs rumexperimentiert, und ich kann dir nur davon abraten. sollte deine seite nicht windows-only-usern vorbehalten sein, die auch noch eine relativ neue version des IE verwenden, kannst du so ziemlich alle transparenz etc effekte von dhtml vergessen, nicht mal mozilla unterstützt das.

stattdessen würde ich mit <div> 's und den css attributen "display:none;" und "position:relative;" experimentieren. per javascript kannst du diese div's einfach sichtbar und unsichtbar machen:

a href="javascript:hideMenu();"

und eine funktion in der art

CODE function hideMenu()
{
if(document.getElementById("div").style.display == "none")
document.getElementById("div").style.display = "";
else
document.getElementById("div").style.display = "none";
}

irgendwas in der art. wenn du willst kann ich dir n beispiel hervorkramen, ich hatte da mal irgendwas dazu verbrochen... müsst ich aber suchen...

gruss
j0sh
 
hi josh!
habe beim tüfteln gleich bemerkt, dass die transparenz im firefox beispielsweise flöten geht.
wäre flott wenn du dein verbrechen bei gelegenheit mal hervorgrübelst.
thanx
recotha

EDIT:

habe mal ein wenig gebastelt und folgendes hinbekommen:
CODE
<script language="JavaScript">
function showMenu()
{
document.getElementById("1").style.display = "";
}

function hideMenu()
{
document.getElementById("1").style.display = "none";
}

</script>


<a onmouseover="javascript:showMenu();" onmouseout="javascript:hideMenu();">mouseover</a>


funktioniert eigentlich einwandfrei, bei mousover des textes, erscheint ein weiterer text (in meinem fall als beabsichtigtes submenü), bei mouseout verschwindet der text wieder. ist dies korrekt gelöst,oder funktioniert es einfach und könnte besser gelöst sein?!
 
hrm schaut eigentlich sauber aus. mein verbrechen muss ich suchen, weiss nicht, ob ichs überhaupt noch habe... :-/
 
habe ein wenig weitergebastelt und es so hinbekommen, wie ich es eigentlich verwenden möchte:
CODE
<html>
<head>
<script language="JavaScript">
function showMenu()
{
document.getElementById("1").style.display = "";
document.getElementById("2").style.display = "none";
}
function showMenu2()
{
document.getElementById("2").style.display = "";
document.getElementById("1").style.display = "none";
}


</script>

</head>

<body>
<table align="center" width="400">
<tr><td align="center" bgcolor="#efefef"><a onmouseover="javascript:showMenu();">menüpunkt 1</a>       <a onmouseover="javascript:showMenu2();">menüpunkt 2</a></td></tr>
<tr><td align="center">
<div id="1" style="display:none"><b>menüpunkt1:</b> -submenü1.1 -submenü1.2</div> <div id="2" style="display:none"><b>menüpunkt2:</b> -submenü2.1 -submenü2.2</div><br><br>
</td></tr>

</table>

</body>
</html>


schaut's immernoch ok aus?
wink.gif

schick wäre es nun, wenn das submenu nach ein paar sekunden automatisch ausblendet, wenn man nicht mehr darauf navigiert... ?!
 
langsam komm ich der gewünschten lösung näher:

hier anschauen!

bei mouseover über "menüpunkt1" erscheint die subnavi unterhalb, und verschwindet wieder bei mouseout.
nun zeigt sich mein problem beim "menüpunkt2", da habe ich innerhalb des submenü-divs noch weitere tags drin (bold), und da liegt irgendwie der wurm drin. denn wenn man jetzt auf der subnavi2 herumfährt, dann setzt das mouseout ein, sobald man über den fett-formatierten text fährt.
woran kann das liegen? ich sollte doch innerhalb des ein- und auszublendenden layers weitere tags einsetzen können, oder nicht?
 
hier ist, was ich in meiner neuen phpmywebmin-version verwenden werde:

http://www.josh.ch/tests/dynamic_menu/menu_j0sh.php

das teil wird automatisch generiert aus arrays, die in etwa so aussehen:

CODE
$menuArray =
array(
array( // "sort files by" pop-down
0 => "Sort files by:::menu_sort.gif"
,array(
0 => "Name"
,"Ascendant:::arrow_up_small.gif" => "sort asc"
,"Descendant:::arrow_down_small.gif" => "sort desc"
)
,array(
0 => "Type (extension)"
,"Ascendant:::arrow_up_small.gif" => "sort asc"
,"Descendant:::arrow_down_small.gif" => "sort desc"
)
,array(
0 => "Date"
,"Ascendant:::arrow_up_small.gif" => "sort asc"
,"Descendant:::arrow_down_small.gif" => "sort desc"
)
,array(
0 => "Size"
,"Ascendant:::arrow_up_small.gif" => "sort asc"
,"Descendant:::arrow_down_small.gif" => "sort desc"
)
)
,array( // "filter files" pop-down
0 => "Filter files"
,array(
0 => "Extension filters"
,"Pictures only:::filter_pics.gif" => "x"
,"Documents only:::filter_documents.gif" => "x"
,"Music files only:::filter_music.gif" => "x"
,"Movie files only:::filter_movies.gif" => "x"
)
,array(
0 => "Filesize filters"
,"Smaller than 1 kb:::filter_size_empty.gif" => "x"
,"Smaller than 10 kb:::filter_size_1.gif" => "x"
,"Smaller than 100 kb:::filter_size_2.gif" => "x"
,"Smaller than 1 mb:::filter_size_3.gif" => "x"
,"Bigger than 1 mb:::filter_size_4.gif" => "x"
)
,array(0 => "User defined filters"
,"Pictures only" => "x"
,"Documents only" => "x"
,"Music files only" => "x"
,"Movie files only" => "x"
)
)
);


es ist kompatibel zu den aktuellen versionen von IE, Mozilla und Opera. Netscape macht Probleme mit etwas weniger aktuellen Versionen.

@ recotha:
das alles ist zwar nicht besonders schöner formatierter html code, da er automatisch generiert wird, aber vielleicht kannst du dir zumindest im javascript-file etwas abgucken.
smile.gif


gr33tz
j0sh
 
Sie müssen sich einloggen oder registrieren, um hier antworten zu können.
Zurück
Oben