Jens: Aufklappbare Navigationen

Hallo habe ein problem, muss eine aufklappbare navigation erstellen und weiss nicht genau wie das funktioniert. geht das ohne zusätzlich gedownloadetet java applets einfach nur mit go live oder benötige ich da eben java applets oder eben javascript kenntnisse? oder kann man komplette navigationen schon fertig downloaden und diese dann anpassen?

  1. Hi Jens,

    auf Java wuerde ich grundsaetzlich verzichten. Nun kommt es drauf an, was fuer ein Aufklappmenue du willst. Du kannst ein reines HTML-Aufklappmenue erstellen, aber hier muss jedesmal die Seite (oder der Frame, in dem sich das menue befindet), neu geladen werden, dafuer ist es sehr einfach... Es besteht aus ganz normalen Links, sonst nichts.
    Komfortabler, aber auch schwieriger wird das ganze mit Javascript. Hier werden keine Relaods benoetigt, aber du brauchst halt javascript-Kenntnisse (die man sich aber mithilfe von Selfhtml && diesem Forum problemlos aneignen kann).
    Fertige Lösungen gibt es sicherlich zuhauf, aber keine Ahnung, wo, ich schreibe aus prinzip alles selbst ;)

    MFG

    Philipp

    1. hallo Phillip!
      ja bin erst eben auf dieses forum gestossen. kannst du mir erläutern in wenigen Punkten wie ich das Aufklappmenue angehe das rein auf html basiert? es soll ungefähr so aussehen wie bei www.sonnenkopf.com wenn man auf tolle vielfalt klickt. ich weiss das dies ein java applet ist aber nur so in dieser art soll dieses aufklapp menue eben sein. meinst du das bekommt man mit html hin? ansonsten wäre es cool wenn du mir sagen könntest wie so ein aufklappmenue aussieht das mit html erstellt ist falls du es schon einmal gemacht hast.
      Thanks jens

      1. hallo Jens,

        es soll ungefähr so aussehen wie bei www.sonnenkopf.com wenn man auf tolle vielfalt klickt. ich weiss das dies ein java applet ist aber nur so in dieser art soll dieses aufklapp menue eben sein.

        Das ist tatsächlich ein Java-Applet, aber auf solche Navigationsapplets solltest du verzichten. Ein ähnlicher Effekt läßt sich allerdings mit Javascript erzielen, oder mit anderen Technologien (PHP, SSI)

        meinst du das bekommt man mit html hin?

        "Nur" mit HTML nicht, wenn du möchtest, daß die Unterpunkte ausgefahren werden

        ansonsten wäre es cool wenn du mir sagen könntest wie so ein aufklappmenue aussieht

        Ein Beispiel, wie das mit Javascript funktionieren kann, kannst du dir unter http://www.christoph-schnauss.de/prog/jscript/menu3.htm anschauen.

        Christoph S.

  2. Eine Möglichkeit wäre mit divs und javascript, für die anpassung wären javascript-kenntnisse aber schon fast erforderlich.

    Ohne Grafiken:

    <html>
    <head>
    <title>Menü mit DIVs</title>
    <style>
    .norm {background-color: #ffff00; font-family: Verdana, Arial, Helvetica; font-size: 12px; color: darkblue; width:100; height:16; cursor:hand; text-align:center}
    </style>
    <script language="JavaScript">
    <!--
    menu_act=new Array(0,0,0);
    function menu_down(reihe,nummer) {
    if (menu_act[reihe-1]==0) {
    menu_act[reihe-1]=1;
    for (var i=1;i<nummer+1;i++) {
    document.getElementById('m'+reihe+'-'+i).style.visibility='visible';
    }}
    }
    function menu_up(reihe,nummer) {
    if (menu_act[reihe-1]==1) {
    menu_act[reihe-1]=0;
    for (var i=1;i<nummer+1;i++) {
    document.getElementById('m'+reihe+'-'+i).style.visibility='hidden';
    }}
    }
    function goto(url,reihe,nummer) {
    menu_up(reihe,nummer);
    location.href=url;
    // oder im Frameset: parent.[FRAMENAME].location.href=url;
    }
    function c_color(c_div) {
    c_div.style.backgroundColor="#aaff00";
    }
    function o_color(c_div) {
    c_div.style.backgroundColor="#ffff00";
    }
    -->
    </script>
    </head>
    <body>
    <div class=norm style="position:absolute; left:6; top:6; visibility:visible" id="m1" onmouseover="menu_down(1,2); c_color(this);" onmouseout="menu_up(1,2); o_color(this);">&Uuml;berpunkt#1</div>
    <div class=norm style="position:absolute; left:6; top:22; visibility:hidden" id="m1-1" onmouseover="menu_down(1,2); c_color(this);" onmouseout="menu_up(1,2); o_color(this);" onclick="goto('http://www.url.de',1,2);">Punkt 1-1</div>
    <div class=norm style="position:absolute; left:6; top:38; visibility:hidden" id="m1-2" onmouseover="menu_down(1,2); c_color(this);" onmouseout="menu_up(1,2); o_color(this);" onclick="goto('http://www.url.de',1,2);">Punkt 1-2</div>
    <div class=norm style="position:absolute; left:112; top:6; visibility:visible" id="m2" onmouseover="menu_down(2,3); c_color(this);" onmouseout="menu_up(2,3); o_color(this);">&Uuml;berpunkt#2</div>
    <div class=norm style="position:absolute; left:112; top:22; visibility:hidden" id="m2-1" onmouseover="menu_down(2,3); c_color(this);" onmouseout="menu_up(2,3); o_color(this);" onclick="goto('http://www.url.de',2,3);">Punkt 2-1</div>
    <div class=norm style="position:absolute; left:112; top:38; visibility:hidden" id="m2-2" onmouseover="menu_down(2,3); c_color(this);" onmouseout="menu_up(2,3); o_color(this);" onclick="goto('http://www.url.de',2,3);">Punkt 2-2</div>
    <div class=norm style="position:absolute; left:112; top:54; visibility:hidden" id="m2-3" onmouseover="menu_down(2,3); c_color(this);" onmouseout="menu_up(2,3); o_color(this);" onclick="goto('http://www.url.de',2,3);">Punkt 2-3</div>
    <div class=norm style="position:absolute; left:218; top:6; visibility:visible" id="m3" onmouseover="menu_down(3,4); c_color(this);" onmouseout="menu_up(3,4); o_color(this);">&Uuml;berpunkt#3</div>
    <div class=norm style="position:absolute; left:218; top:22; visibility:hidden" id="m3-1" onmouseover="menu_down(3,4); c_color(this);" onmouseout="menu_up(3,4); o_color(this);" onclick="goto('http://www.url.de',3,4);">Punkt 3-1</div>
    <div class=norm style="position:absolute; left:218; top:38; visibility:hidden" id="m3-2" onmouseover="menu_down(3,4); c_color(this);" onmouseout="menu_up(3,4); o_color(this);" onclick="goto('http://www.url.de',3,4);">Punkt 3-2</div>
    <div class=norm style="position:absolute; left:218; top:54; visibility:hidden" id="m3-3" onmouseover="menu_down(3,4); c_color(this);" onmouseout="menu_up(3,4); o_color(this);" onclick="goto('http://www.url.de',3,4);">Punkt 3-3</div>
    <div class=norm style="position:absolute; left:218; top:70; visibility:hidden" id="m3-4" onmouseover="menu_down(3,4); c_color(this);" onmouseout="menu_up(3,4); o_color(this);" onclick="goto('http://www.url.de',3,4);">Punkt 3-4</div>
    </body>
    </html>

    Mit Grafiken:
    http://www.markusmayer.grmhome.de/menue_mit_divs.htm

    Das Menü wäre beliebig erweiterbar, wobei bei den Funktionen menu_down und menu_up der erste parameter die reihe, und die zweite die anzahl der unterpunkte dieser reihe angibt.

    Gruß,
    Markus

  3. Sorry, der Link aus meiner Antwort stimmte nicht, der richtige lautet:
    http://www.markusmayer.gmxhome.de/menue_mit_divs.htm

    Gruß,
    Markus