Ergebnis 1 bis 3 von 3

Thema: AJAX Menü

  1. #1
    Hellfire ist offline Grünschnabel
    registriert
    17-09-2008
    Beiträge
    2

    AJAX Menü

    Hallo.
    Ich hoffe das passt hier rein. Da AJAX ja auch ein JavaScript ist denke ich es passt schon

    Ich habe nun folgendes Problem:
    Ich soll für unsere Firma eine Homepage bauen mit WebShop usw. Den Webshop übernimmt schon ein Kollege... aber die Grundseite muss ich machen.

    Die Grundseite ist soweit auch fertig (2 Frames (Header und Content)). Im Content habe ich dann noch ein Menü eingebaut welches sich öffnet wenn man mit der Maus links an den Bildschirmrand geht. Da drin befinden sich dann die einzelnen Verweise auf die einzelnen Seiten.

    Nun zum Problem:
    Am oberen Rand (unter dem Header) sollen Menüpunkte wie "Hardware", "Software", "Kontakt" usw. sein. Wenn ich diese Menüpunkte auswähle sollen in dem Menü auf der linken Seite Überschriften wie "Arbeitsspeicher", "Festplatten", "DVD-Laufwerke", "Prozessoren", "Motherboards" usw. erscheinen. Wähle ich dann eins dieser Menüpunkte aus wird die Seite rechts neben dem Menü abgeändert, und zwar in den WebShop Bereich in dem die jeweiligen Bauteile für PCs oder die jeweilige Software zu finden sind.

    Hier nun der Quelltext der 'content.htm' in der sich das ganze abspielen soll:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html><head>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <title>XY</title>
    <script type="text/javascript" src="java/dhtml.js"></script>
    <script type="text/javascript">
    function Menue () {
      if (typeof window.pageYOffset == "number") {
        if (NS4) {
          getElement("id", "Nav").top = window.pageYOffset + 50;
        } else {
          getElement("id", "Nav").style.top = window.pageYOffset + 50;
        }
      } else {
        if (typeof document.body.scrollTop == "number")
          getElement("id", "Nav").style.top = document.body.scrollTop + 50;
      }
      if (OP)
        getElement("id", "NavLinks").style.pixelTop = NavLinksPos;
      if (NS4) {
        getElement("id", "Nav").visibility = "show";
      } else {
        getElement("id", "Nav").style.visibility = "visible";
      }
    }
    
    function noMenue () {
      if (NS4) {
        getElement("id", "Nav").visibility = "hide";
      } else {
        getElement("id", "Nav").style.visibility = "hidden";
      }
    }
    
    function handleMove (ev) {
      if (!ev)
        ev = window.event;
      var mausposition = ev.pageX ? ev.pageX : ev.clientX;
      if (mausposition < 20) {
        Menue();
      } else {
        if (mausposition > 250) {
          noMenue();
        }
      }
    }
    
    function Event_init () {
      if (document.addEventListener) {
        document.addEventListener("mousemove", handleMove, true);
      } else {
        if (NS4) {
          document.captureEvents(Event.MOUSEMOVE);
          document.onmousemove = handleMove;
        } else {
          document.body.onmousemove = handleMove;
        }
      }
      if (OP) {
        NavLinksPos = 42; // Position des Bereiches NavLinks
        getElement("id", "NavLinks").style.pixelTop = NavLinksPos;
      }
    }
    </script>
    <style type="text/css">
    body { color:black; background-color:white; background-image:url(images/navigation_back.gif);
      margin:0; padding:20px 50px; font-family:Tahoma,sans-serif; }
    #Nav { position:absolute; top:50px; left:0; visibility:hidden; }
    #NavLinks { position:absolute; top:42px; left:42px; }
    #Nav a:link {color:#000080; font-weight:bold; font-size:13px; text-decoration:none; }
    #Nav a:visited { color:#000080; font-weight:bold; font-size:13px; text-decoration:none; }
    #Nav a:hover { color:#FFFFFF; background-color:#000080; font-weight:bold;
      font-size:13px; text-decoration:none; }
    #Nav a:active { color:#000080; font-weight:bold; font-size:13px; text-decoration:none; }
    </style>
    </head>
    <body onload="Event_init()">
    
    <div id="Nav">
    <img src="http://www.ajax-community.de/images/navigation.gif" width="250" height="450" border="0" alt="">
    <div id="NavLinks">
      <a href="content.htm">Home</a><br>
      <a href="layout/arbeitsspeicher.html">Arbeitsspeicher</a><br>
      <a href="layout/agb.html">AGBs</a><br>
      <a href="layout/impressum.html">Impressum</a><br>
    </div>
    </div>
    
    <font size="6"><b><i>A-Tronic Computertechnik</i></b></font>
    
    <p>Um das Seitenmenü aufzurufen mit der Maus an den linken Bildschirmrand fahren.</p>
    
    </body>
    </html>
    Ich hoffe ihr könnt mir dabei helfen.

    MfG
    Hell

    EDIT: Hier mal eine Grafik wie das Menü aktuell aussieht:

  2. #2
    Avatar von anna55
    anna55 ist offline Moderator
    registriert
    07-02-2006
    Ort
    Taunusstein
    Beiträge
    3.430

    AW: AJAX Menü

    Hm, weit und breit nix von einem Menü zu sehen, bekomme lediglich eine Fehlermeldung - könnte am fehlenden dhtml.js liegen.

    Läuft das auch mit einem richtigen Doctype?


    .:Taunusstein - Nachrichten und Kommentare


    "Ich bin doch lieber jeden Tag glücklich als im Recht."
    (Per Anhalter durch die Galaxis)

  3. #3
    Hellfire ist offline Grünschnabel
    registriert
    17-09-2008
    Beiträge
    2

    AW: AJAX Menü

    Zitat Zitat von anna55 Beitrag anzeigen
    Hm, weit und breit nix von einem Menü zu sehen, bekomme lediglich eine Fehlermeldung - könnte am fehlenden dhtml.js liegen.

    Läuft das auch mit einem richtigen Doctype?
    Ja, da fehlt die *.js.

    Code:
    /* DHTML-Bibliothek */
    
    var DHTML = false, DOM = false, MSIE4 = false, NS4 = false, OP = false;
    
    if (document.getElementById) {
      DHTML = true;
      DOM = true;
    } else {
      if (document.all) {
        DHTML = true;
        MSIE4 = true;
      } else {
        if (document.layers) {
          DHTML = true;
          NS4 = true;
        }
      }
    }
    if (window.opera) {
      OP = true;
    }
    
    function getElement (Mode, Identifier, ElementNumber) {
      var Element, ElementList;
      if (DOM) {
        if (Mode.toLowerCase() == "id") {
          Element = document.getElementById(Identifier);
          if (!Element) {
            Element = false;
          }
          return Element;
        }
        if (Mode.toLowerCase() == "name") {
          ElementList = document.getElementsByName(Identifier);
          Element = ElementList[ElementNumber];
          if (!Element) {
            Element = false;
          }
          return Element;
        }
        if (Mode.toLowerCase() == "tagname") {
          ElementList = document.getElementsByTagName(Identifier);
          Element = ElementList[ElementNumber];
          if (!Element) {
            Element = false;
          }
          return Element;
        }
        return false;
      }
      if (MSIE4) {
        if (Mode.toLowerCase() == "id" || Mode.toLowerCase() == "name") {
          Element = document.all(Identifier);
          if (!Element) {
            Element = false;
          }
          return Element;
        }
        if (Mode.toLowerCase() == "tagname") {
          ElementList = document.all.tags(Identifier);
          Element = ElementList[ElementNumber];
          if (!Element) {
            Element = false;
          }
          return Element;
        }
        return false;
      }
      if (NS4) {
        if (Mode.toLowerCase() == "id" || Mode.toLowerCase() == "name") {
          Element = document[Identifier];
          if (!Element) {
            Element = document.anchors[Identifier];
          }
          if (!Element) {
            Element = false;
          }
          return Element;
        }
        if (Mode.toLowerCase() == "layerindex") {
          Element = document.layers[Identifier];
          if (!Element) {
            Element = false;
          }
          return Element;
        }
        return false;
      }
      return false;
    }
    
    function getAttribute (Mode, Identifier, ElementNumber, AttributeName) {
      var Attribute;
      var Element = getElement(Mode, Identifier, ElementNumber);
      if (!Element) {
        return false;
      }
      if (DOM || MSIE4) {
        Attribute = Element.getAttribute(AttributeName);
        return Attribute;
      }
      if (NS4) {
        Attribute = Element[AttributeName]
        if (!Attribute) {
           Attribute = false;
        }
        return Attribute;
      }
      return false;
    }
    
    function getContent (Mode, Identifier, ElementNumber) {
      var Content;
      var Element = getElement(Mode, Identifier, ElementNumber);
      if (!Element) {
        return false;
      }
      if (DOM && Element.firstChild) {
        if (Element.firstChild.nodeType == 3) {
          Content = Element.firstChild.nodeValue;
        } else {
          Content = "";
        }
        return Content;
      }
      if (MSIE4) {
        Content = Element.innerText;
        return Content;
      }
      return false;
    }
    
    function setContent (Mode, Identifier, ElementNumber, Text) {
      var Element = getElement(Mode, Identifier, ElementNumber);
      if (!Element) {
        return false;
      }
      if (DOM && Element.firstChild) {
        Element.firstChild.nodeValue = Text;
        return true;
      }
      if (MSIE4) {
        Element.innerText = Text;
        return true;
      }
      if (NS4) {
        Element.document.open();
        Element.document.write(Text);
        Element.document.close();
        return true;
      }
    }
    Dies als dhtml.js im Unterordner 'java' speichern.
    Dann wirst aber auch noch nicht allzuviel sehen da die Grafiken noch fehlen
    Die findest du hier:
    http://de.selfhtml.org/dhtml/beispie...navigation.gif
    und hier:
    http://de.selfhtml.org/dhtml/beispie...ation_back.gif

    Diese packst du dann im Unterordner 'images'.

    MfG
    Hell

Ähnliche Themen

  1. Änderung an JS Menü
    Von dabri im Forum Jobs
    Antworten: 0
    Letzter Beitrag: 25-03-2008, 23:27
  2. ajax menü funktioniert das im ie nicht?
    Von saibonaut im Forum Script-Check
    Antworten: 8
    Letzter Beitrag: 27-09-2007, 16:01
  3. AJAX Menü mehrere Seiten
    Von chanicua im Forum JavaScript
    Antworten: 2
    Letzter Beitrag: 16-09-2007, 19:53
  4. PopUp Menü rechtsbündig!?
    Von [x]snaKe im Forum JavaScript
    Antworten: 3
    Letzter Beitrag: 14-03-2006, 14:51
  5. Brauche dringend Hilfe bei meinem Menü Script
    Von AEdevil im Forum JavaScript
    Antworten: 15
    Letzter Beitrag: 12-07-2005, 18:29

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •