[HTML] Menu wie im Win-Explorer

Straight-Edge · 3. September 2007

Menu wie im Win-Explorer

Hey

Hat jemand ein schönes tutorial oder ein Quellcode, mit dem man auf einer Webseite ein Menu erstellen kann, welches genauso aussieht wie beim Win-Explorer ohne, dass sich die Seite jedesmal neu laden muss!

Würde mich um einen link oder Quellcode sehr freuen. Bitte nicht in das "Ich such Programmierer"-Thread kopieren, da ich mich damit auskenne und eigentlich nur ein Baugerüst brauche, welches aber schon sicherlich irgendwo vorhanden ist!

Anzeige

Murdoc · 3. September 2007

AW: Menu wie im Win-Explorer

hä? sry mehr fällt mir grad ned ein....
mach mal a foddo welches menu du meinst...

Schmitz · 3. September 2007

AW: Menu wie im Win-Explorer

das menü an sich wirst du dann jawohl selber mit CSS und JS hinbekommen
ist ja nich viel mehr als ein dropdown
und um die website ohne neuladen zu machen > Iframe oder Ajax

Straight-Edge · 3. September 2007

AW: Menu wie im Win-Explorer

ich hab erstens nicht das wissen das selber zu erstellen, sondern nur zu bearbeiten und zweitens auch nicht die lust das rad neu zu erfinden

Murdoc · 3. September 2007

AW: Menu wie im Win-Explorer

klärt mich mal jemand auf welches menu er denn meint!?

b-xXx · 3. September 2007

AW: Menu wie im Win-Explorer

ich denk mal er meint die taskleist.. jo kann man recht simpel per css machen.
sliced dir von einem screenshot oder so die einzelnen buttons zurecht etc. ein klappmenü solltest du wenn dann mit JS machen.

und denkst du wirklich es scriptet dir einer deine nav, wenn du es nicht mal versucht hast??

Straight-Edge · 3. September 2007

AW: Menu wie im Win-Explorer

Code:

<html>
<head>

<script type="text/javascript">
GECKO = document.getElementById? 1:0 ;
NS = document.layers? 1:0 ;
IE = document.all? 1:0 ;

function haupt(untermenue)
{
var hauptmenues = new Array('ferrari','Ferienwohnung','privat','beruflich','lernen','ppt','planung','unterricht','klassenarbeit','links','gast','email');

for (var menue in hauptmenues)
{
var das_menue = hauptmenues[menue];
if (GECKO) {document.getElementById(das_menue).style.display = 'none';}
else if (NS) {document.layers[das_menue].style.display = 'none';}
else if (IE) {document.all[das_menue].style.display = 'none';}
}

aufklappen(untermenue);
}

function aufklappen(untermenue)
{
if (GECKO) {document.getElementById(untermenue).style.display = 'block';}
else if (NS) {document.layers[untermenue].style.display = 'block';}
else if (IE) {document.all[untermenue].style.display = 'block';}
}

function zuklappen(untermenue)
{
if (GECKO) {document.getElementById(untermenue).style.display = 'none';}
else if (NS) {document.layers[untermenue].style.display = 'none';}
else if (IE) {document.all[untermenue].style.display = 'none';}
}
</script>

</head>
<body>

<ul>
<li><a href="untermenue.php" onMouseOver="haupt('ferrari');" onClick="zuklappen('ferrari');return false;"Ferrari</a></li>
<ul id="ferrari" type="circle" style="display:none;">
<li>F355 Spider</li>
<li><a href="untermenue.php" onMouseOver="aufklappen('pferdestaerke');" onClick="zuklappen('pferdestaerke');return false;">F40</a></li>
<ul id="pferdestaerke" style="display:none;">
<li>500 PS</li>
<li>600 PS</li>
<li>700 PS</li>
</ul>
<li>Maranello</li>
<li>Testarossa</li>
</ul>




<li><a href="untermenue2.php" onMouseOver="haupt('Ferienwohnung');" onClick="zuklappen('Ferienwohnung');return false;">Ferienwohnung</a>
</li>
 <ul id="Ferienwohnung" type="circle" style="display:none;">
 <li><a href="http://www.jadeblick.de" target="_blank">Ferienwohnung Jadeblick neu</a></li>
 <li><a href="http://www.jadeblick.de" target="rechts">Ferienwohnung Jadeblick rechts</a></li>
 </ul>


<li><a href="untermenue2.php" onMouseOver="haupt('privat');" onClick="zuklappen('privat');return false;">privat</a>
</li>
 <ul id="privat" type="circle" style="display:none;">
 <li><a href="Lebenslauf.htm" target="rechts">Lebenslauf</a>
 </li>
 </ul>

<li><a href="untermenue2.php" onMouseOver="haupt('beruflich');" onClick="zuklappen('beruflich');return false;">beruflich</a>
</li>
 <ul id="privat" type="circle" style="display:none;">
 <li><a href="Beruflich.htm" target="rechts">Sek I und Sek II</a>
 </li>
 </ul>
 

<li><a href="untermenue2.php" onMouseOver="haupt('lernen');" onClick="zuklappen('lernen');return false;">Lernen Lernen</a>
</li>
 <ul id="lernen" type="circle" style="display:none;">
 <li><a href="Lernenlernen.htm" target="rechts">Einf&uml;hrung in das Konzept</a></li>
 <li><a href="KonzeptEr.htm" target="rechts">Klassen 5 und 6 - Konzept in der Erprobungsstufe</a></li>
 <li><a href="Oberstufenkonzept.htm" target="rechts">Klasse 11 - Oberstufenkonzept</a></li>
 <li><a href="Curriculum1.htm" target="rechts">Curriculum Methodenkompetenz</a></li>
 <li><a href="quiz.htm" target="rechts">Quiz|</a></li>
 </ul>

<li><a href="untermenue2.php" onMouseOver="haupt('ppt');" onClick="zuklappen('ppt');return false;">Fortbildung</a>
</li>
 <ul id="privat" type="circle" style="display:none;">
 <li><a href="Homepagepraesentation.ppt" target="rechts">Gesprächsabend zum Lernen lernen</a></li>
 <li><a href="Handlungsorientiert.ppt" target="rechts">handlungsorientiertes Lernen im Sprachenunterricht</a></li>
 </ul> 
 

<li><a href="untermenue2.php" onMouseOver="haupt('planung');" onClick="zuklappen('planung');return false;">Planung im Schuljahr</a>
</li>
 <ul id="planung" type="circle" style="display:none;">
 <li><a href="Planung.htm" target="rechts">Terminplanung</a></li>
 </ul> 
 
<li><a href="untermenue2.php" onMouseOver="haupt('unterricht');" onClick="zuklappen('unterricht');return false;">Unterricht</a>
</li>
 <ul id="unterricht" type="circle" style="display:none;">
 <li><a href="interactivegame.htm" target="rechts">Klasse 6: Fun Day at Kepler School - an interactive game</a></li>
 <li><a href="Bankrobbery1.htm" target="rechts">Klasse 6: Bank robbery</a></li>
 <li><a href="worksheet.htm" target="rechts">Klasse 6: Bank robbery worksheet</a></li>
 <li><a href="Titanic2.htm" target="rechts">Klasse 7: The Titanic Desaster</a></li>
 <li><a href="Chicago.htm" target="rechts">Klasse 10: Chicago - The Great Lakes</a></li>
 <li><a href="Planspiel.htm" target="rechts">Klasse 12: Planspiel - To Kill A Mockingbird</a></li>
 <li><a href="Halbjahresplanung.htm" target="rechts">Klasse 12.1: Lk Deutsch Konfliktmuster von der Antike bis zur Gegenwart</a></li>
 </ul> 
 

<li><a href="untermenue2.php" onMouseOver="haupt('klassenarbeit');" onClick="zuklappen('klassenarbeit');return false;">Klassenarbeit</a>
</li>
 <ul id="klassenarbeit" type="circle" style="display:none;">
 <li><a href="Klassenarbeit.htm" target="rechts">Klasse 5</a></li>
 </ul> 
 

<li><a href="untermenue2.php" onMouseOver="haupt('links');" onClick="zuklappen('links');return false;">Links</a>
</li>
 <ul id="links" type="circle" style="display:none;">
 <li><a href="links.htm" target="rechts">zu anderen interessanten Seiten</a></li>
 </ul> 
 
<li><a href="untermenue2.php" onMouseOver="haupt('gast');" onClick="zuklappen('gast');return false;">G&auml;stebuch</a>
</li>
 <ul id="gast" type="circle" style="display:none;">
 <li><a href="http://cgi00.puretec.de/cgi-bin/gb?clsid=0515629f630382e31f284435448b6540" target="rechts">G&auml;stebuch</a></li>
 </ul> 
 

<li><a href="untermenue2.php" onMouseOver="haupt('email');" onClick="zuklappen('email');return false;">e-mail und Kontaktaufnahme f&uuml;r Kontaktaufnahme</a>
</li>
 <ul id="email" type="circle" style="display:none;">
 <li><a href="halle@hallo.de" target="rechts">G&auml;stebuch</a></li>
 </ul> 

</ul>

</body>
</html>

komisch irgendwie ist da bei mir der wurm drin, denn die menues werden nicht aufgeklappt

bei dem beispiel was mir einer im anderen board gepostet hat funktioniert dieses aber

Code:

<html>
<head>

<script type="text/javascript">
GECKO = document.getElementById? 1:0 ;
NS = document.layers? 1:0 ;
IE = document.all? 1:0 ;

function haupt(untermenue)
{
var hauptmenues = new Array('ferrari','lamborghini','porsche');

for (var menue in hauptmenues)
{
var das_menue = hauptmenues[menue];
if (GECKO) {document.getElementById(das_menue).style.display = 'none';}
else if (NS) {document.layers[das_menue].style.display = 'none';}
else if (IE) {document.all[das_menue].style.display = 'none';}
}

aufklappen(untermenue);
}

function aufklappen(untermenue)
{
if (GECKO) {document.getElementById(untermenue).style.display = 'block';}
else if (NS) {document.layers[untermenue].style.display = 'block';}
else if (IE) {document.all[untermenue].style.display = 'block';}
}

function zuklappen(untermenue)
{
if (GECKO) {document.getElementById(untermenue).style.display = 'none';}
else if (NS) {document.layers[untermenue].style.display = 'none';}
else if (IE) {document.all[untermenue].style.display = 'none';}
}
</script>

</head>
<body>

<ul>
<li><a href="untermenue.php" onMouseOver="haupt('ferrari');" onClick="zuklappen('ferrari');return false;"Ferrari</a></li>
<ul id="ferrari" type="circle" style="display:none;">
<li>F355 Spider</li>
<li><a href="untermenue.php" onMouseOver="aufklappen('pferdestaerke');" onClick="zuklappen('pferdestaerke');return false;">F40</a></li>
<ul id="pferdestaerke" style="display:none;">
<li>500 PS</li>
<li>600 PS</li>
<li>700 PS</li>
</ul>
<li>Maranello</li>
<li>Testarossa</li>
</ul>
<li><a href="untermenue2.php" onMouseOver="haupt('lamborghini');" onClick="zuklappen('lamborghini');return false;">lamborghini</a></li>
<ul id="lamborghini" type="circle" style="display:none;">
<li>Diablo</li>
</ul>
<li><a href="untermenue2.php" onMouseOver="haupt('porsche');" onClick="zuklappen('porsche');return false;">Porsche</a></li>
<ul id="porsche" type="circle" style="display:none;">
<li>Roadster</li>
<li>911</li>
</ul>
</ul>

</body>
</html>

hat jemand ne ahnung wo der fehler steckt?!?

Ich möchter gerne so ein menu haben

{bild-down: http://www.akademie.de/img/assets/1010/7644_14638_explorerarbeiten.gif}

mfg sxe

Murdoc · 3. September 2007

AW: Menu wie im Win-Explorer

das menu ist nicht leicht gemacht. auch wenn javascript dafür reichen würde, bin ich der meinung das sowas entlohnt werden sollte.

deswegen die anfrage bitte in den 'ich suche designer, coder....'-thread posten.

Straight-Edge · 3. September 2007

AW: Menu wie im Win-Explorer

suche nur noch den kleinen fehler...das steht sonst soweit!

Nützliche Suchen

[HTML] Menu wie im Win-Explorer

Videos zum Themenbereich