Daniel: Suche Menü bzw. namen davon!

Hi leute,

guckt euch mal das navi script von alternate.de an! weiß einer von euch wo ich ein vergleichbares finde, mit diesen rollover effekten? mir gelang es leider nicht den quelltext auseinander zunehmen! das coole ist an dem menü das es für alle gängigen browser past! IE, N, M, MF, O...

mfg derDani

  1. Hallo Daniel,

    guckt euch mal das navi script von alternate.de an! weiß einer von euch

    ist ja auf'n ersten Blick ganz nett das Menü unter www.alternate.de, aber versuche mal von Konfiguratoren auf PC-Builder zu kommen!

    Mit freundlichen Grüßen

    André

    1. ähmm das sagt mir jetzt nicht wirklich viel, sry! :-/

      mfg Dani

  2. Hi,

    mir gelang es leider nicht den quelltext auseinander zunehmen!

    Oh. =:-o

    das coole ist an dem menü das es für alle gängigen browser past! IE, N, M, MF, O...

    Das ist nicht "cool", das ist selbstverständlich!

    Jedenfalls sollte dies so ein.

    Gar nicht "cool" ist hingegen der Umstand, daß auf älteren Browsern vermutlich Fehlermeldungen produziert werden (DOM-Level-2-Zugriffe ohne Gültigkeits-Check) und der Back-Button blockiert wird ("META-0-Refresh").

    Zur eigentlichen Frage: Beschäftige Dich mit getElementById & Co., sowie, vermutlich, innerHTML (HTML-Code einfügen/entfernen) und/oder style.dispay (Elemente anzeigen/verstecken). Damit lassen sich leicht browserübergreifend DTHML-Menüs verwirklichen, in dem Du darstellst/nicht darstellst, was Du gerade brauchst/nicht brauchst.

    Meine, von mir immer gerne genannte (>;->), diesbezügl. Schlag-mich-tot-Universalroutine: Coding: Darstellungswechsel - Un-/Sichtbare Elemente: Ein-/Ausklappen, Verstecken, Transparenz, Farbe

    Mit der habe ich auch schon ein solches Menü ähnlich alternate.de umgesetzt - selbstredend ohne deren Fehler. >;-> Die Grenze bei der Umsetzung ist nur die Grenze deiner Phantasie ... ;-)

    Gruß, Cy-"JavaScript 1.5 is the limit"-baer

    --
    Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"!
    1. was sagst du denn hierzu:

      <html>

      <head>

      <style>
      .menu  {font-family:verdana;font-weight:bold;font-size:11px;color:black;text-decoration:none;}
      a.menu:link {font-family:verdana;font-weight:bold;font-size:11px;color:black;text-decoration:none;}
      a.menu:visited {font-family:verdana;font-weight:bold;font-size:11px;color:black;text-decoration:none;}
      a.menu:hover {font-family:verdana;font-weight:bold;font-size:11px;color:red;text-decoration:underline;}
      a.menu:active {font-family:verdana;font-weight:bold;font-size:11px;color:black;text-decoration:none;}

      .sub  {font-family:verdana;font-size:11px;color:black;text-decoration:none;}
      a.sub:link {font-family:verdana;font-size:11px;color:black;text-decoration:none;}
      a.sub:visited {font-family:verdana;font-size:11px;color:black;text-decoration:none;}
      a.sub:hover  {font-family:verdana;font-size:11px;color:red;text-decoration:underline;}
      a.sub:active {font-family:verdana;font-size:11px;color:black;text-decoration:none;}

      </style>

      <script language=javascript>
      <!--
      var nam = new Array('startseite','news','mytalklevel','events','members','unterhaltung','about');

      function manage(nav)
      { swap('startseite',0);
       swap('news',0);
       swap('mytalklevel',0);
       swap('events',0);
       swap('members',0);
       swap('unterhaltung',0);
       swap('about',0);

      if(nav!='')
       {
        swap(nav,1);
       }

      }

      function swap(id, mode)
      {
       if(document.getElementById(id+"_sub"))
       {
        if (mode==1)
        {
            document.getElementById(id+"_sub").style.display = "block";

      }
           else
        {
         document.getElementById(id+"_sub").style.display = "none";
           }
       }
      }

      //-->
      </SCRIPT>

      </head>

      <body bgcolor="#EFEFEF">

      <table>
       <tr>
        <td>
         <a class="menu" href="#" onMouseOver="manage('startseite');">Startseite</a>&nbsp;&nbsp;
         <a class="menu" href="#" onMouseOver="manage('news');">News</a>&nbsp;&nbsp;
         <a class="menu" href="#" onMouseOver="manage('mytalklevel');">MyTalklevel</a>&nbsp;&nbsp;
         <a class="menu" href="#" onMouseOver="manage('events');">Events</a>&nbsp;&nbsp;
         <a class="menu" href="#" onMouseOver="manage('members');">Members</a>&nbsp;&nbsp;
         <a class="menu" href="#" onMouseOver="manage('unterhaltung');">Unterhaltung</a>&nbsp;&nbsp;
         <a class="menu" href="#" onMouseOver="manage('about');">About</a>
        </td>
       </tr>
      </table>

      <div id="startseite_sub"><table bgcolor="#FFFFFF"><tr><td class="sub">SingleDatenbank <b>&#183;</b> Kinotipp vom 27.01.2005 <b>&#183;</b> Neuanmeldungen Heute: 0</td></tr></table></div>

      <div id="news_sub"><table bgcolor="#FFFFFF"><tr><td class="sub">Top 10 News <b>&#183;</b> News Archiv <b>&#183;</b> Talklevel News</td></tr></table></div>

      <div id="mytalklevel_sub"><table bgcolor="#FFFFFF"><tr><td class="sub">Setup <b>&#183;</b> Logout <b>&#183;</b> Ansprechpartner</td></tr></table></div>

      <div id="events_sub"><table bgcolor="#FFFFFF"><tr><td class="sub">Partybilder <b>&#183;</b> Termine <b>&#183;</b> HALL OF FAME <b>&#183;</b> Die 30 besten Bilder</td></tr></table></div>

      <div id="members_sub"><table bgcolor="#FFFFFF"><tr><td class="sub">Mitgliederliste <b>&#183;</b> User Suche</td></tr></table></div>

      <div id="unterhaltung_sub"><table bgcolor="#FFFFFF"><tr><td class="sub">Forum <b>&#183;</b> Chat <b>&#183;</b> SHOW MY DAY</td></tr></table></div>

      <div id="about_sub"><table bgcolor="#FFFFFF"><tr><td class="sub">Kontakt <b>&#183;</b> Impressum <b>&#183;</b> Nutzungsbedingungen <b>&#183;</b> Haftungsausschluss</td></tr></table></div>

      <script language=javascript>
      <!--

      manage('startseite');

      //-->
      </SCRIPT>

      </body>

      </html>

      funzt wirklich sehr gut auf allen browsern etc. läuft auch wie das gewünschte nur das, dass menü beim verlassen eines punktes nicht zum alten wieder back springt... d.h. wenn der punkt news aktiviert ist und man geht mit dem curser über den punkt members, dann bleibt das menü bei members und geht net back auf news... hmm :-/

      mfg Dani

      1. Hi,

        was sagst du denn hierzu:

        Also "auseinandernehmen" oder testen werde ich es nicht. =;-)

        Aber die Richtung ist die von Dir gewünschte! :-)

        Beim Überfliegen festgestellt:

        <script language=javascript>

        Nun ja ...

        if(document.getElementById(id+"_sub"))

        Wie alternate.de: ältere Browser brauchen hier noch ein "document.getElementById &&" am Anfang der Bedingungsklammer.

        <a class="menu" href="#"

        Hier sollte was sinnvolles rein, damit auch ältere Browser bzw. Suchmaschinen oder Browser mit abgeschaltetem Scripting nicht stranden.

        funzt wirklich sehr gut auf allen browsern etc. läuft auch wie das gewünschte nur das, dass menü beim verlassen eines punktes nicht zum alten wieder back springt... d.h. wenn der punkt news aktiviert ist und man geht mit dem curser über den punkt members, dann bleibt das menü bei members und geht net back auf news... hmm :-/

        Einfach das originale Menü, ggf. nach einer Zeitverzögerung, einblenden (onMouseOut beimMenü oder onMouseOver imNicht-Menü-Bereich. Welches das "originale Menü" ist, kannst Du ja in einer Variablen definieren, oder aus der Seite auslesen, oder aus dem Dateinamen auslesen, oder ... ;-)

        Gruß, Cybaer

        --
        Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"!
        1. @Cybaer hast ne E-Mail...

          mfg Dani

          1. Hallo!

            @Cybaer hast ne E-Mail...

            https://forum.selfhtml.org/?t=100119&m=612899: Augen auf ;-)

            mfg Alfie

            1. ja also zu C++ kannste mich alles fragen bei javascript hab ich echt kein plan!

              <script language=javascript>

              fehlen da nur die " oder wie?

              if(document.getElementById(id+"_sub"))

              da bin ich total überfragt!

              mfg dani

              1. Hi,

                <script language=javascript>

                Petitesse: <script type="text/javascript" language="JavaScript">

                Ersteres ist HTML-Standard, letzteres "JavaScript-Standard". " verstehen sich eh von selbst.

                if(document.getElementById(id+"_sub"))

                if(document.getElementById && document.getElementById(id+"_sub"))

                Gruß, Cybaer

                --
                Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"!
                1. @Cybaer heyheyhey, danke!!! so muss das dann aussehen, oder unten nochmal das ganze?

                  function swap(id, mode)
                  {
                   if(document.getElementById && document.getElementById(id+"_sub"))
                   {
                    if (mode==1)
                    {
                        document.getElementById(id+"_sub").style.display = "block";

                  }
                       else
                    {
                     document.getElementById(id+"_sub").style.display = "none";
                       }
                   }
                  }

                  mfg derDani

                  1. Hi,

                    @Cybaer heyheyhey, danke!!! so muss das dann aussehen,

                    Jojojo! ;-)

                    Gruß, Cybaer

                    --
                    Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"!