Menüaufbau

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Menüaufbau

    Hey zusammen,

    Ich habe da was gesehen, das hat mir unheimlich gut gefallen, wollte es sodann nachbauen, aber scheitere daran leider. Habe es mit jquery, js, und ajax versucht, aber irgendwie hakt es immer irgendwo.

    Hier mal was ich bisher geschafft habe:

    HTML-Quellcode

    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    2. <html>
    3. <head>
    4. <style type="text/css">
    5. <!--
    6. .lay {
    7. display: none;
    8. position: relative;
    9. }
    10. p
    11. {
    12. background:yellow;
    13. width:980px;
    14. height:300px;
    15. }
    17. -->
    18. </style>
    19. <script>
    20. n = 3; // number of hidden layers
    21. function show(a){
    22. for(i=1;i<=n;i++){
    23. document.getElementById('t'+i).style.display = 'none';
    24. }
    25. document.getElementById('t'+a).style.display = 'inline';
    26. }
    27. </script>
    28. </head>
    29. <body>
    31. <div style="position:relative">
    32. <a href="#" onmouseover="show(1)">link 1</a>
    33. <a href="#" onmouseover="show(2)">link 1</a>
    34. <a href="#" onmouseover="show(3)">link 1</a>
    36. <div id="t1" class="lay"><p><a href="www.google.de">Google</a></p> </div>
    37. <div id="t2" class="lay"><p>222 some comment here<br>some some <br>asdgag</p></div>
    38. <div id="t3" class="lay"><p>333 some comment here some some </p></div>
    39. </div>
    41. </body>
    42. </html>
    Alles anzeigen


    Was ich jetzt noch möchte ist das ich wenn ich aus den Links oder eben dem div mit der Maus rausgehe soll das div wieder verschwinden, aber das will irgendwie ned :(

    Hier übrigens noch der Link zum Original:

    ladenzeile.de <= Das Menü oben - das hätt ich eben gern genau so :)

    Merci für's drüberschaun!

    Gruß,
    Matthias
    Das Leben ist binär - du bist eine 1, oder eine 0

  • Ich bin wahrlich kein JavaScript-Crack. Aber wenn du schon eine Funktion zum Einblenden hast, kannst du doch auch eine zum Ausblenden nutzen:

    Quellcode

    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    2. <html>
    3. <head>
    4. <style type="text/css">
    5. <!--
    6. .lay {
    7. display: none;
    8. position: relative;
    9. }
    10. p
    11. {
    12. background:yellow;
    13. width:980px;
    14. height:300px;
    15. }
    17. -->
    18. </style>
    19. <script>
    20. n = 3; // number of hidden layers
    21. function show(a){
    22. for(i=1;i<=n;i++){
    23. document.getElementById('t'+i).style.display = 'none';
    24. }
    25. document.getElementById('t'+a).style.display = 'inline';
    26. }
    28. function hide(a){
    29. document.getElementById('t'+a).style.display = 'none';
    30. }
    32. </script>
    33. </head>
    34. <body>
    36. <div style="position:relative">
    37. <a href="#" onmouseover="show(1)" onmouseout="hide(1)">link 1</a>
    38. <a href="#" onmouseover="show(2)" onmouseout="hide(2)">link 1</a>
    39. <a href="#" onmouseover="show(3)" onmouseout="hide(3)">link 1</a>
    41. <div id="t1" class="lay"><p><a href="www.google.de">Google</a></p> </div>
    42. <div id="t2" class="lay"><p>222 some comment here<br>some some <br>asdgag</p></div>
    43. <div id="t3" class="lay"><p>333 some comment here some some </p></div>
    44. </div>
    46. </body>
    47. </html>
    Alles anzeigen

  • Quellcode

    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    2. <html>
    3. <head>
    4. <style type="text/css">
    5. <!--
    6. .lay {
    7. display: none;
    8. position: relative;
    9. }
    10. p
    11. {
    12. background:yellow;
    13. width:980px;
    14. height:300px;
    15. }
    17. -->
    18. </style>
    19. <script>
    20. function getElementsByClassName(className) {
    21. var muster = new RegExp("(^| )" + className + "($| )");
    22. var alles = document.getElementsByTagName("*");
    23. var gefunden = new Array();
    24. var i;
    26. for (i=0; i < alles.length; i++) {
    27. if (alles[i] && alles[i].className && alles[i].className != "") {
    28. if (alles[i].className.match(muster))
    29. gefunden[gefunden.length] = alles[i];
    30. }
    31. }
    33. return gefunden;
    34. }
    36. function show(a){
    37. var hiddenElements = getElementByClassName("lay");
    38. for(var i = 0; i<hiddenElements.length; i++) {
    39. hiddenElements[i].style.display = 'none';
    40. }
    41. document.getElementById('t'+a).style.display = 'inline';
    42. }
    44. function hide(){
    45. var hiddenElements = getElementByClassName("lay");
    46. for(var i = 0; i<hiddenElements.length; i++) {
    47. hiddenElements[i].style.display = 'none';
    48. }
    49. }
    51. </script>
    52. </head>
    53. <body>
    55. <div style="position:relative" onmouseout='hide()'>
    56. <a href="#" onmouseover="show(1)">link 1</a>
    57. <a href="#" onmouseover="show(2)">link 1</a>
    58. <a href="#" onmouseover="show(3)">link 1</a>
    60. <div id="t1" class="lay"><p><a href="www.google.de">Google</a></p> </div>
    61. <div id="t2" class="lay"><p>222 some comment here<br>some some <br>asdgag</p></div>
    62. <div id="t3" class="lay"><p>333 some comment here some some </p></div>
    63. </div>
    65. </body>
    66. </html>
    Alles anzeigen


    Mit diesem Code sollte es gehen (könnte Syntaxfehler enthalten, aus Kopf aufgeschrieben...)

    Dank getElementsByClassName musst du keine Variable n mehr "mitschleppen".
    </nobrain>

  • Hi zusammen,

    @n0x-f0x: Bei deinem Code passiert gar nichts? Leider kenn ich mich mit Java nicht wirklich gut aus, somit fällt es mir schwer die Syntaxfehler hier zu finden :(


    @mad: Dein Code macht eigentlich was er soll, leider passiert das hide sobald ich den Link verlasse, da es ja aber ein menü werden soll, ich also quasi auch noch in das DIV rein muss um einen Menüpunkt auszuwählen, und erst wenn ich quasi den LINK UND DAS DIV verlasse soll er den hide machen ... ihr seht ... gar nicht soooo einfach :)

    Ich bastel mal weiter, vielleicht hat aber jemand ja noch ne Idee :)

    Matthias
    Das Leben ist binär - du bist eine 1, oder eine 0