Menüleiste mit Starticon

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

  • Menüleiste mit Starticon

    Hi,
    ich hätte gerne in meiner Menüleiste ein Starticon.

    So sieht meine Navi zur Zeit aus:


    Damit ihr wisst was ich meine hier ein Bild:


    Hier der Code meiner Navi:

    Quellcode

    1. <div id="horizmenu" class="droplinebar">
    2. <ul>
    3. <li><a href="#">Home</a></li>
    4. <li><a href="#">Vote</a>
    5. <ul>
    6. <li><a href="#">Girls</a></li>
    7. <li><a href="#">Boys</a></li>
    8. </ul>
    9. </li>
    10. <li><a href="#">Ranglisten</a>
    11. <ul>
    12. <li><a href="#">Top 10</a></li>
    13. <li><a href="#">Top 10 of Girls</a></li>
    14. <li><a href="#">Top 10 of Boys</a></li>
    15. </ul>
    16. </li>
    17. </ul>
    18. </div>
    Alles anzeigen


    Quellcode

    1. var droplinemenu={
    3. arrowimage: {classname: 'downarrowclass', src: '/../gfx/navi/down.gif', leftpadding: 5}, //customize down arrow image
    4. animateduration: {over: 200, out: 100}, //duration of slide in/ out animation, in milliseconds
    6. buildmenu:function(menuid){
    7. jQuery(document).ready(function($){
    8. var $mainmenu=$("#"+menuid+">ul")
    9. var $headers=$mainmenu.find("ul").parent()
    10. $headers.each(function(i){
    11. var $curobj=$(this)
    12. var $subul=$(this).find('ul:eq(0)')
    13. this._dimensions={h:$curobj.find('a:eq(0)').outerHeight()}
    14. this.istopheader=$curobj.parents("ul").length==1? true : false
    15. if (!this.istopheader)
    16. $subul.css({left:0, top:this._dimensions.h})
    17. var $innerheader=$curobj.children('a').eq(0)
    18. $innerheader=($innerheader.children().eq(0).is('span'))? $innerheader.children().eq(0) : $innerheader //if header contains inner SPAN, use that
    19. $innerheader.append(
    20. '<img src="'+ droplinemenu.arrowimage.src
    21. +'" class="' + droplinemenu.arrowimage.classname
    22. + '" style="border:0; padding-left: '+droplinemenu.arrowimage.leftpadding+'px" />'
    23. )
    24. $curobj.hover(
    25. function(e){
    26. var $targetul=$(this).children("ul:eq(0)")
    27. if ($targetul.queue().length<=1) //if 1 or less queued animations
    28. if (this.istopheader)
    29. $targetul.css({left: $mainmenu.offset().left, top: $mainmenu.offset().top+this._dimensions.h})
    30. if (document.all && !window.XMLHttpRequest) //detect IE6 or less, fix issue with overflow
    31. $mainmenu.find('ul').css({overflow: (this.istopheader)? 'hidden' : 'visible'})
    32. $targetul.slideDown(droplinemenu.animateduration.over)
    33. },
    34. function(e){
    35. var $targetul=$(this).children("ul:eq(0)")
    36. $targetul.slideUp(droplinemenu.animateduration.out)
    37. }
    38. ) //end hover
    39. }) //end $headers.each()
    40. $mainmenu.find("ul").css({display:'none', visibility:'visible', width:$mainmenu.width()})
    41. }) //end document.ready
    42. }
    43. }
    Alles anzeigen


    Quellcode

    1. .droplinebar{
    2. overflow: hidden;
    3. }
    5. .droplinebar ul{
    6. margin: 0;
    7. padding: 0;
    8. float: left;
    9. width: 100%;
    10. font: bold 13px Arial;
    11. background: #242c54 url(../gfx/navi/default.gif) center center repeat-x; /*default background of menu bar*/
    12. }
    14. .droplinebar ul li{
    15. display: inline;
    16. }
    18. .droplinebar ul li a{
    19. float: left;
    20. color: white;
    21. padding: 9px 11px;
    22. text-decoration: none;
    23. }
    25. .droplinebar ul li a:visited{
    26. color: white;
    27. }
    29. .droplinebar ul li a:hover, .droplinebar ul li .current{ /*background of main menu bar links onMouseover*/
    30. color: white;
    31. background: transparent url(../gfx/navi/active.gif) center center repeat-x;
    32. }
    34. /* Sub level menus*/
    35. .droplinebar ul li ul{
    36. position: absolute;
    37. z-index: 100;
    38. left: 0;
    39. top: 0;
    40. background: #0000CC; /*sub menu background color */
    41. width: 100%;
    42. visibility: hidden;
    43. }
    45. /* Sub level menu links style */
    46. .droplinebar ul li ul li a{
    47. font: normal 13px Verdana;
    48. padding: 6px;
    49. padding-right: 8px;
    50. margin: 0;
    51. }
    53. .droplinebar ul li ul li a:hover{ /*sub menu links' background color onMouseover */
    54. background: #9900FF;
    55. }
    Alles anzeigen


    Hab schon versucht einfach einen Listeneintrag mit einem Bild zu machen geht aber auch nicht. ;)
    Ich hoffe ihr könnt mir mal wieder helfen.

    Gruß,
    Kevin

  • Wird gemacht.

    Quellcode

    1. <div id="horizmenu" class="droplinebar">
    2. <ul>
    3. <li><img src="link zum icon" alt="starticon" /></li>
    4. <li><a href="#">Home</a></li>
    5. <li><a href="#">Vote</a>
    6. <ul>
    7. <li><a href="#">Girls</a></li>
    8. <li><a href="#">Boys</a></li>
    9. </ul>
    10. </li>
    11. <li><a href="#">Ranglisten</a>
    12. <ul>
    13. <li><a href="#">Top 10</a></li>
    14. <li><a href="#">Top 10 of Girls</a></li>
    15. <li><a href="#">Top 10 of Boys</a></li>
    16. </ul>
    17. </li>
    18. </ul>
    19. </div>
    Alles anzeigen

  • Auch nicht die "alt=starticon"?

    #nachtrag:

    Kann es sein, dass du lokal arbeitest? Ich habe es auf meinem Server geladen und es müsste alles klappen. Bis auf dass du die <a href vergessen hast.
    Ich versuchs mal local zu machen.

    Wobei ich anmerken muss, dass ich mir nur die html und css angeguckt habe. von js hab ich noch keine ahnung :)

    Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von newman ()