Eigene Button für die Menü-Leiste

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

  • Eigene Button für die Menü-Leiste

    Hallo,

    ... finde leider keine Antwort für mein Problem.
    Kann ich eigene Button, von mir in Photoshop erstellt, in die Menü-Leiste setzen?
    Wenn ja, wie geht das?
    --------------------------------------------------------
    :S Wer nicht fragt, bleibt dumm. :/
    X5 Vers. 13 professionell, Windows 8 - 64 bit,

  • Das hängt immer vom wollen des Benutzers ab.
    Ich hatte ein Beispiel geschrieben im anderen Thema.

    Du guckst in die Datei...

    style/menu.css

    dort siehst du jetzt

    CSS-Quellcode

    1. #imMnMn > ul > li#imMnMnNode0{background-image:url('../menu/index.png');height:29px;width:125px;}
    2. #imMnMn > ul > li#imMnMnNode0 span.imMnMnFirstBg{height:29px;width:125px;}
    3. #imMnMn > ul > li#imMnMnNode0:hover{background:none;background-image:none;}
    4. #imMnMn > ul > li#imMnMnNode0:hover span.imMnMnFirstBg{background-image:url('../menu/index_h.png');height:29px;width:125px;}
    5. #imMnMn > ul > li#imMnMnNode0.imMnMnCurrent{background:none;background-image:none;}
    6. #imMnMn > ul > li#imMnMnNode0.imMnMnCurrent span.imMnMnFirstBg{background-image:url('../menu/index_h.png');height:29px;width:125px;}
    7. #imMnMn > ul > li#imMnMnNode3{background-image:url('../menu/seite-1.png');height:29px;width:125px;}
    8. #imMnMn > ul > li#imMnMnNode3 span.imMnMnFirstBg{height:29px;width:125px;}
    9. #imMnMn > ul > li#imMnMnNode3:hover{background:none;background-image:none;}
    10. #imMnMn > ul > li#imMnMnNode3:hover span.imMnMnFirstBg{background-image:url('../menu/seite-1_h.png');height:29px;width:125px;}
    11. #imMnMn > ul > li#imMnMnNode3.imMnMnCurrent{background:none;background-image:none;}
    12. #imMnMn > ul > li#imMnMnNode3.imMnMnCurrent span.imMnMnFirstBg{background-image:url('../menu/seite-1_h.png');height:29px;width:125px;}
    13. #imMnMn > ul > li#imMnMnNode4{background-image:url('../menu/seite-2.png');height:29px;width:125px;}
    14. #imMnMn > ul > li#imMnMnNode4 span.imMnMnFirstBg{height:29px;width:125px;}
    15. #imMnMn > ul > li#imMnMnNode4:hover{background:none;background-image:none;}
    16. #imMnMn > ul > li#imMnMnNode4:hover span.imMnMnFirstBg{background-image:url('../menu/seite-2_h.png');height:29px;width:125px;}
    17. #imMnMn > ul > li#imMnMnNode4.imMnMnCurrent{background:none;background-image:none;}
    18. #imMnMn > ul > li#imMnMnNode4.imMnMnCurrent span.imMnMnFirstBg{background-image:url('../menu/seite-2_h.png');height:29px;width:125px;}
    Alles anzeigen


    Dort steht der Pfad zu den Bildern.

    ../menu/index.png

    das heißt

    .. > geht aus dem style Ordner in den root
    menu > gehe in den menu Ordner
    index.png > nimm die Datei index.png als Standard Button Bild

    und so weiter....

    wenn du jetzt deine eigenen Buttons erstellt hast und diese in den menue Ordner geladen hast musst du das so eingeben in den Head unter Schritt 1...

    CSS-Quellcode

    1. <style type="text/css">
    2. #imMnMn > ul > li#imMnMnNode0{background-image:url('menue/index.png');height:29px;width:125px;}
    3. #imMnMn > ul > li#imMnMnNode0 span.imMnMnFirstBg{height:29px;width:125px;}
    4. #imMnMn > ul > li#imMnMnNode0:hover{background:none;background-image:none;}
    5. #imMnMn > ul > li#imMnMnNode0:hover span.imMnMnFirstBg{background-image:url('menue/index_h.png');height:29px;width:125px;}
    6. #imMnMn > ul > li#imMnMnNode0.imMnMnCurrent{background:none;background-image:none;}
    7. #imMnMn > ul > li#imMnMnNode0.imMnMnCurrent span.imMnMnFirstBg{background-image:url('menue/index_h.png');height:29px;width:125px;}
    8. #imMnMn > ul > li#imMnMnNode3{background-image:url('menue/seite-1.png');height:29px;width:125px;}
    9. #imMnMn > ul > li#imMnMnNode3 span.imMnMnFirstBg{height:29px;width:125px;}
    10. #imMnMn > ul > li#imMnMnNode3:hover{background:none;background-image:none;}
    11. #imMnMn > ul > li#imMnMnNode3:hover span.imMnMnFirstBg{background-image:url('menue/seite-1_h.png');height:29px;width:125px;}
    12. #imMnMn > ul > li#imMnMnNode3.imMnMnCurrent{background:none;background-image:none;}
    13. #imMnMn > ul > li#imMnMnNode3.imMnMnCurrent span.imMnMnFirstBg{background-image:url('menue/seite-1_h.png');height:29px;width:125px;}
    14. #imMnMn > ul > li#imMnMnNode4{background-image:url('menue/seite-2.png');height:29px;width:125px;}
    15. #imMnMn > ul > li#imMnMnNode4 span.imMnMnFirstBg{height:29px;width:125px;}
    16. #imMnMn > ul > li#imMnMnNode4:hover{background:none;background-image:none;}
    17. #imMnMn > ul > li#imMnMnNode4:hover span.imMnMnFirstBg{background-image:url('menue/seite-2_h.png');height:29px;width:125px;}
    18. #imMnMn > ul > li#imMnMnNode4.imMnMnCurrent{background:none;background-image:none;}
    19. #imMnMn > ul > li#imMnMnNode4.imMnMnCurrent span.imMnMnFirstBg{background-image:url('menue/seite-2_h.png');height:29px;width:125px;}
    20. </style>
    Alles anzeigen



    Die Bildnamen kannst du freiwählen es bietet sich aber an diese so zu benennen wie die alten denn dann weißt du gleich wie die Seite heißt.

    Du siehst auch oben die Bildgrößen!

    Höhe 29px Breite 125px.

    Du kannst dort auch unterschiedliche Breiten angeben.
    :hi: :mario: