Anzeige - [Interessiert an einer Anzeige?]
(?) Tags raten (?) (edit)
 
Reply to this topicStart new topicStart Poll
> DHTML-Menü, Die unendliche Suche
recotha
Geschrieben am: Di 13.07.2004, 22:07
Report PostQuote Post

AyomRank 4
********

Gruppe: Member (aktiv)
Beiträge: 87
Mitglied seit: 6.04.2004


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!
Top
PMEmail Poster
Top
 
 
Josh
#2 Geschrieben am: Di 13.07.2004, 23:26 (+01:18)
Report PostQuote Post

AyomRank 9
Group Icon

Gruppe: Moderatoren
Beiträge: 2139
Mitglied seit: 19.10.2003


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


--------------------
Mein letztes Projekt: Atelier-Schmuck.ch

"Das habe ich nie getan und werden es auch nie wieder tun!" :lol:
Top
PMEmail PosterUsers WebsiteICQ
Top
 
recotha
#3 Geschrieben am: Mi 14.07.2004, 06:42 (+07:16)
Report PostQuote Post

AyomRank 4
********

Gruppe: Member (aktiv)
Beiträge: 87
Mitglied seit: 6.04.2004


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?!
Top
PMEmail Poster
Top
 
Josh
#4 Geschrieben am: Mi 14.07.2004, 09:58 (+03:16)
Report PostQuote Post

AyomRank 9
Group Icon

Gruppe: Moderatoren
Beiträge: 2139
Mitglied seit: 19.10.2003


hrm schaut eigentlich sauber aus. mein verbrechen muss ich suchen, weiss nicht, ob ichs überhaupt noch habe... :-/


--------------------
Mein letztes Projekt: Atelier-Schmuck.ch

"Das habe ich nie getan und werden es auch nie wieder tun!" :lol:
Top
PMEmail PosterUsers WebsiteICQ
Top
 
recotha
#5 Geschrieben am: Mi 14.07.2004, 10:13 (+00:15)
Report PostQuote Post

AyomRank 4
********

Gruppe: Member (aktiv)
Beiträge: 87
Mitglied seit: 6.04.2004


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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<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... ?!
Top
PMEmail Poster
Top
 
Sandro Feuillet
#6 Geschrieben am: Mi 14.07.2004, 11:26 (+01:13)
Report PostQuote Post

AyomRank 7
Group Icon

Gruppe: Moderatoren
Beiträge: 1441
Mitglied seit: 4.05.2004


Auf squidfingers.com hat es dhtml menus die imo browserunabhängig gut aussehen...

gruss feuillet


--------------------
Gruss Sandro

--------------------------------------------------------------------------

Politik Forum Schweiz Das führende Schweizer Politik Forum
Mein Blog
Top
PMEmail PosterUsers WebsiteYahooMSN
Top
 
recotha
#7 Geschrieben am: Do 15.07.2004, 08:40 (+21:13)
Report PostQuote Post

AyomRank 4
********

Gruppe: Member (aktiv)
Beiträge: 87
Mitglied seit: 6.04.2004


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?
Top
PMEmail Poster
Top
 
Josh
#8 Geschrieben am: Do 15.07.2004, 09:11 (+00:31)
Report PostQuote Post

AyomRank 9
Group Icon

Gruppe: Moderatoren
Beiträge: 2139
Mitglied seit: 19.10.2003


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


--------------------
Mein letztes Projekt: Atelier-Schmuck.ch

"Das habe ich nie getan und werden es auch nie wieder tun!" :lol:
Top
PMEmail PosterUsers WebsiteICQ
Top
 
Thema wird von 0 Benutzer(n) gelesen (0 Gäste und 0 anonyme Benutzer)
0 Mitglieder:
Trackback-Url: http://www.ayom.com/track/t/2139

Topic Options Reply to this topicStart new topicStart Poll

 


> Ähnliche Themen
Drop Down Menü mit Javascript wie Google Spider 255 2 Mi 23.04.2008, 22:39
PopUp-Menü ein & ausblenden ? japsa 123 1 Do 14.02.2008, 18:32
Menü mit Array wer kann helfen? Duergy 277 2 Do 8.02.2007, 10:10
css balken/menü pangu 422 8 Di 6.02.2007, 11:50
Menü rutscht unter Flash René Weber 680 10 Mi 8.11.2006, 14:59
Menü pinmoney 562 5 Mo 6.11.2006, 22:40
DHTML Javascript weissNix 392 5 Mi 20.09.2006, 12:50
css menü pangu 680 10 Do 20.07.2006, 11:04
Wie JS Drop-Down Menü platzieren? Ben Frauen 531 0 Fr 16.06.2006, 21:34
Menü wie auf yahoo.de pinmoney 876 9 Sa 10.06.2006, 19:26




Anzeige - [Interessiert an einer Anzeige?]



Anzeigen


[Interessiert an einer Anzeige?]