Navigationsleiste mit Mouse-Over-Effekt unter CSS


  • Rambo
  • 1105 Aufrufe 5 Antworten

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

  • Navigationsleiste mit Mouse-Over-Effekt unter CSS

    Hallo!

    Ich hab mal ne kleine Frage an die HTML-Profis hier. Ich hab auf meiner Seite eine Navigationsleiste folgendermaßen realisiert:

    HTML-Quellcode

    1. <div style="width:760px;margin:0px auto;text-align:left;border:dashed 1px #000000;">
    2. <div id="menu">
    3. <a href="index1.htm">Homepage</a> | <a href="index2.htm">Link2</a> | <a href="index3.htm">Downloads</a> | <a href="index4.htm">Gästebuch</a></div>
    4. </div>
    Der dazugehörige CSS-Code:

    PHP-Quellcode

    1. #menu {
    2. color:#FFFFFF;
    3. background-color:#EAEBED;
    4. text-align:center;
    5. padding:10px 0px;
    6. background-image: url(../pictures/bg_nav.jpg);
    7. background-attachment: fixed;
    8. }
    10. #menu a:link {
    11. color: #333333;
    12. font-weight: bold;
    13. }
    15. #menu a:visited {
    16. color: #333333;
    17. font-weight: bold;
    18. }
    20. #menu a:hover {
    21. color: #999999;
    22. }
    24. #menu a:active {
    25. color: #000000;
    26. font-weight: bold;
    27. }
    Alles anzeigen
    Jetzt sieht das ganz nett aus - wie ein ganz normales Text-Navigationsmenü. Ich will aber, dass sobald ich mit der Maus darüber fahre sich der komplette Hintergrund verändert - wie bei Buttons oder so ähnlich. Das soll dann so "eingedrückt" aussehen. Nachdem der Besucher dann auf den Link gedrückt hat, soll er dauerhaft in einem bestimmten Zustand bleiben, also z. B. eine neue Text-Farbe erhalten. Nachdem der Besucher auf eine neue Seite wechselt, soll der Link wieder in den Ausgangszustand gehen.

    Am liebsten würde ich das sauber mit XHTML 1.0 Strict und CSS realisieren. Kann mir da jemand von euch helfen? Bis jetzt hab ich das mit Dreamweaver noch nicht hinbekommen, wie ich möchte... Ich wäre echt dankbar wenn da jemand helfen kann!! :)
    Das ist keine Signatur!

  • CSS Menü Effekte mit Farben

    Hallo Rambo,
    ich kann dir dieses CSS Menü anbieten.
    Benutze es selber und es hat einen Effekt mit Farben.

    Natürlich kannst Du das Menü zu 100 % an das Design Deiner Seite anpassen.

    Quellcode

    1. /* CSS h_emf_pixel_001*/
    2. body {
    3. font-family: Verdana, Arial, Helvetica, sans-serif;
    4. font-size: 100.01%;
    5. text-align: center;
    6. margin-right: 0px;
    7. margin-left: 0px;
    8. background-color: #999999;
    9. }
    10. #headermenue {
    11. font-size: 80%;
    12. background-color: #00c;
    13. width: 758px;
    14. padding: 5px 0;
    15. border: 1px solid #fff;
    16. margin: 0 auto;
    18. }
    19. #headermenue ul {
    20. list-style-type: none;
    21. margin: 0px;
    22. padding: 0px;
    23. }
    24. #headermenue li {
    25. display: inline;
    26. margin: 0px;
    27. padding: 0px;
    28. }
    30. #headermenue li a, #headermenue li a:link {
    31. text-decoration: none;
    32. padding: 0 5px;
    33. color: #fff;
    34. }
    35. #headermenue li a:visited {
    36. color: #0c0;
    37. }
    38. #headermenue li a:hover, #headermenue li a:focus, #headermenue li a:active {
    39. color: #ff3;
    41. }
    Alles anzeigen


    HTML-Quellcode

    1. <div id="headermenue">
    2. <ul>
    3. <li><a
    4. href="#">Hyperlink 1</a></li><li><a
    5. href="#">Hyperlink 2</a></li><li><a
    6. href="#">Hyperlink 3</a></li><li><a
    7. href="#">Hyperlink 4</a></li><li><a
    8. href="#">Hyperlink 5</a></li><li><a
    9. href="#">Hyperlink 6</a></li><li><a
    10. href="#">Hyperlink 7</a></li><li><a
    11. href="#">Hyperlink 8</a></li>
    12. </ul>
    13. </div>
    Alles anzeigen


  • Danke erstmal für deine Hilfe!!!

    Das geht schon ziemlich nah an das ran, was ich wollte :). Wie kriege ich es jetzt noch hin, dass sich der Background unter dem jeweiligen Feld in eine andere Farbe ändert, sobald die Maus drüber fährt?

    Mit:

    PHP-Quellcode

    1. #headermenue li a:hover, #headermenue li a:focus, #headermenue li a:active {
    2. color: #ff3;
    3. background-color: #00CCCC;
    4. }

    Hab ich es bereits probiert, jedoch ist der Hintergrund dann nicht oben und unten bis zum Rand.

    Wäre echt klasse, wenn du auf diese Frage auch eine Antwort parat hast! Thx
    Das ist keine Signatur!

  • Habe mal ein wenig am CSS gebastelt. :)
    Versuche mal diesen CSS Text.

    Quellcode

    1. /* CSS h_emf_pixel_001*/
    2. body {
    3. font-family: Verdana, Arial, Helvetica, sans-serif;
    4. font-size: 100.01%;
    5. text-align: center;
    6. margin-right: 0px;
    7. margin-left: 0px;
    8. background-color: #FFFFFF;
    9. }
    10. #headermenue {
    11. font-size: 100%;
    12. background-color: #C0C0C0;
    13. width: 658px;
    14. padding: 1px 0;
    15. border: 1px solid #fff;
    16. margin: 0 auto;
    18. }
    19. #headermenue ul {
    20. list-style-type: none;
    21. margin: 0px;
    22. padding: 0px;
    23. }
    24. #headermenue li {
    25. display: inline;
    26. margin: 0px;
    27. padding: 0px;
    28. }
    30. #headermenue li a, #headermenue li a:link {
    31. text-decoration: none;
    32. padding: 0 5px;
    33. color: #fff;
    34. }
    35. #headermenue li a:visited {
    36. color: #FF0033;
    37. }
    38. #headermenue li a:hover, #headermenue li a:focus, #headermenue li a:active {
    39. color: #ffcc00;
    40. background-color: #818181;
    42. }
    Alles anzeigen