Javascript als Menü

  • Javascript als Menü

    Also:

    Ich möchte ein Javascriptmenü in meine Webseite einbinden. Das ging aber nicht so einfach, wei ich es mir Vorgestellt hatte - Das Ergebnis: Ein rotes x.

    Mein HTML-Code sieht also so aus:

    Quellcode

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. <head>
    4. <link href="style.css" type="text/css" rel="stylesheet">
    5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    6. <title>Unbenanntes Dokument</title>
    7. </head>
    9. <body>
    10. <div id="icon"></div>
    11. <div id="banner"><br><br><br><p style="font-size:xx-large">Banner</p></div>
    12. <div id="navigation">
    13. <object codebase="Menu.js" width="150px;" height="650px;"></object>
    14. </div>
    15. <div id="content"><h1>Lorem ipsum</h1><br><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p></div>
    16. <div id="blog">
    17. <p>Blog:</p>
    18. <p>&nbsp;</p>
    19. <p>&nbsp;</p>
    20. <p>&nbsp;</p>
    21. <p>&nbsp;</p>
    22. <p>&nbsp;</p>
    23. <p>&nbsp;</p>
    24. <p>&nbsp;</p>
    25. <p>&nbsp;</p>
    26. <p>&nbsp;</p>
    27. </div>
    28. </body>
    29. </html>
    Alles anzeigen



    Und hier der CSS-Code:

    Quellcode

    1. #wrap{
    2. text-align: auto;
    3. width: 1000;
    4. height: 8000px;
    5. }
    6. #icon{
    7. float: left;
    8. width: 150px;
    9. height:150px;
    10. background-image:url(icon.JPG);
    11. }
    12. #banner{
    13. float: right;
    14. height: 150px;
    15. width: 800px;
    16. }
    17. #navigation{
    18. float: left;
    19. width: 150px;
    20. height: 650px;
    21. border-right: solid 1px #666666;
    22. background-color:#99CC00;
    23. }
    24. #content{
    25. float:left;
    26. width: 650px;
    27. height: 650px;
    28. border: 1px solid #333333;
    29. }
    30. #blog{
    31. z-index: -1;
    32. width: 150px;
    33. height: 650px;
    34. background-color:#CCCCCC;
    35. }
    36. codebar{
    37. z-index:auto;
    38. position: fixed;
    39. width: 200px;
    40. height:20px;
    41. }
    42. h1, h2, h3, h4, h5, h6 {
    43. margin: 20px;
    44. font-family:Arial;
    45. }
    46. p {
    47. margin: 20px;
    48. font-family:Arial;
    49. }
    Alles anzeigen


    Ich würde mich freuen, wenn mir jemand helfen könnte!

    lg Raphael


    ...ich kann Javascript eigentlich nicht und habe deshalb ein Programm benutzt, dass mir das javascript für mein Klappmenü erstellt.
    Dateien

    • Menu.js

      (26,37 kB, 274 mal heruntergeladen, zuletzt: )

  • Statt <object>Tag den Script-Tag verwenden.

    So sieht man zumindest im IE6 was:

    Quellcode

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. <head>
    4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    5. <link href="style.css" type="text/css" rel="stylesheet"/>
    6. <title>Unbenanntes Dokument</title>
    7. [b]<script src="Menu.js" type="text/javascript" language="javascript1.2"></script>[/b]
    8. </head>
    10. <body>
    11. <div id="icon"></div>
    12. <div id="banner"><br><br><br><p style="font-size:xx-large">Banner</p></div>
    13. <div id="navigation">
    14. [b]<script type="text/javascript">
    15. Go ();
    16. </script>[/b]
    17. </div>
    18. <div id="content"><h1>Lorem ipsum</h1><br><p>Lorem...</p></div>
    19. <div id="blog">
    20. <p>Blog:</p>
    21. <p>&nbsp;</p>
    22. </div>
    23. </body>
    24. </html>
    Alles anzeigen


    Das Ganze läuft im Firefox aber nicht :(