Klaus: Hilfe beim Dropdown Menü

Beitrag lesen

SELF-Forum

Hilfe beim Dropdown Menü

Klaus
– Informationen zu den Bewertungsregeln

Hallo, ich sitz jetzt schon seit tagen an diesem dropdown menü und komm einfach nicht weiter. mir werden die ganze zeit die menüpunkte, die bei mir grafiken sind, im untermenü angezeigt. firefox kopiert die in jedes submenü die hauptmenü grafik rein. ich hab mal einen screenshot gemacht:


<a href="http://s92.photobucket.com/albums/l11/swoop1/?action=view&current=screenshot.png" target="_blank"><img src="http://i92.photobucket.com/albums/l11/swoop1/screenshot.png" border="0" alt="Photobucket"></a>

den code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"         "http://www.w3.org/TR/html4/strict.dtd"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Unbenanntes Dokument</title> </head>

<style type="text/css"> *{ padding:0; margin:0;} body{ font-family:Arial, Helvetica, sans-serif; color:#000000; background-color:#000000; background-image:url(images/background.jpg); background-repeat:repeat; width:1024px; margin-left:auto; margin-right:auto; } img{border:0;} h1{margin:0px; padding:0px; border:0px; height:99px; width:1024px;}

#navi { margin:0; padding:0;} #navi ul{width:1024px;} #navi li{  float:left;  list-style-type:none;  height:29px;  text-decoration:none;  }

#home{ width:54px; height:29px; padding:0;} #news{ width:53px; height:29px; padding:0;} #team{ width:53px; height:29px; padding:0;} #gameday{ width:83px; height:29px; padding:0;} #media #inside{ width:58px; height:29px; padding:0;} #link{ width:92px; height:29px; padding:0;} #myslidemenu{ height:29px; width:1024px; padding:0;}

li{height:29px;}

/------------------------------------------------------------------------------------------------------------------/

#myslidemenu .home a {  background: url(images/navi/aktiv/2.jpg) no-repeat;  display:block; width:54px; height:29px; } #myslidemenu .news a {  background: url(images/navi/aktiv/4.jpg) no-repeat;  display:block; width:53px; height:29px; } #myslidemenu .team a {  background: url(images/navi/aktiv/6.jpg) no-repeat;  display:block; width:53px; height:29px; } #myslidemenu .gameday a {  background: url(images/navi/aktiv/8.jpg) no-repeat;  display:block; width:83px; height:29px; } #myslidemenu .media a {  background: url(images/navi/aktiv/10.jpg) no-repeat;  display:block; width:58px; height:29px; } #myslidemenu .link a {  background: url(images/navi/aktiv/12.jpg) no-repeat;  display:block; width:92px; height:29px; } #myslidemenu .inside a {  background: url(images/navi/aktiv/14.jpg) no-repeat;  display:block; width:58px; height:29px; }

#myslidemenu .home img {  display:block; width:54px; height:29px; border:0; } #myslidemenu .news img, #myslidemenu .team img {  display:block; width:53px; height:29px; border:0; } #myslidemenu .gameday img {  display:block; width:83px; height:29px; border:0; } #myslidemenu .media img, #myslidemenu .inside img {  display:block; width:58px; height:29px; border:0; } #myslidemenu .link img {  display:block; width:92px; height:29px; border:0; }

#myslidemenu .home a:hover img, #myslidemenu .news a:hover img, #myslidemenu .team a:hover img, #myslidemenu .gameday a:hover img, #myslidemenu .media a:hover img,#myslidemenu .link a:hover img, #myslidemenu .inside a:hover img{  visibility: hidden; } #myslidemenu .home a:hover, #myslidemenu .news a:hover, #myslidemenu .team a:hover, #myslidemenu .gameday a:hover, #myslidemenu .media a:hover, #myslidemenu .link a:hover, #myslidemenu .inside a:hover{  border:0; }

  • html #myslidemenu .home a, * html #myslidemenu .news a, * html #myslidemenu .team a, * html #myslidemenu .gameday a, * html #myslidemenu .media a, * html #myslidemenu .link a, * html #myslidemenu .inside a{  margin-right:1px; }

  • html #myslidemenu .home a:hover {  width:54px; margin-right:0; }

  • html #myslidemenu .news a:hover, #myslidemenu .team a:hover {  width:53px; margin-right:0; }

  • html #myslidemenu .gameday a:hover {  width:83px; margin-right:0; }

  • html #myslidemenu .media a:hover, #myslidemenu .inside a:hover {  width:58px; margin-right:0; }

  • html #myslidemenu .link a:hover {  width:92px; margin-right:0; }

</style>

<link rel="stylesheet" type="text/css" href="css/jqueryslidemenu.css" />

<!--[if lte IE 7]> <style type="text/css"> html .jqueryslidemenu{height: 1%;} /Holly Hack for IE7 and below/ </style> <![endif]-->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script> <script type="text/javascript" src="js/jqueryslidemenu.js"></script>

<body> <h1><img src="images/schriftzug.jpg" alt="....." title="...." width="1024" height="99"></h1>

<div id="myslidemenu" class="jqueryslidemenu"> <ul> <li><img src="images/navi/passiv/1.jpg" width="143" height="29"></li> <li class="home"><a href="#" id="home"><img src="images/navi/passiv/2.jpg" width="54" height="29" alt="Home" title="Home"></a></li> <li><img src="images/navi/passiv/3.jpg" width="5" height="29"></li> <li class="news"><a href="#" id="news"><img src="images/navi/passiv/4.jpg" width="53" height="29" alt="News"></a>   <ul>   <li><a href="#">Senior</a></li>   <li><a href="#">Junior</a></li>   <li><a href="#">Cheerleader</a></li>   <li><a href="#">Newsletter</a></li>   </ul> </li> <li><img src="images/navi/passiv/5.jpg" width="5"  height="29"></li> <li class="team"><a href="#" id="team"><img src="images/navi/passiv/6.jpg" width="53" height="29" alt="Team"></a> <ul>   <li><a href="#">Roster-Senior</a></li>   <li><a href="#">Roster-Junior</a></li>   <li><a href="#">Coaches</a></li>   <li><a href="#">Management</a></li>   <li><a href="#">Cheerleader</a></li>   </ul> </li> <li><img src="images/navi/passiv/7.jpg" width="5"  height="29"></li> <li class="gameday"><a href="#" id="gameday"><img src="images/navi/passiv/8.jpg" width="83" height="29" alt="Gameday"></a> <ul>   <li><a href="#">Schedule</a></li>   <li><a href="#">Statistics</a></li>   <li><a href="#">Table</a></li>   <li><a href="#">History</a></li>   </ul> </li> <li><img src="images/navi/passiv/9.jpg" width="5"  height="29"></li> <li class="media"><a href="#" id="media"><img src="images/navi/passiv/10.jpg" width="58" height="29" alt="Media"></a> <ul>   <li><a href="#">Gallery</a></li>   <li><a href="#">Videos</a></li>   </ul> </li> <li><img src="images/navi/passiv/11.jpg" width="5"  height="29"></li> <li class="link"><a id="link" href="http://www.plattling.de/" title="Stadt Plattling" onclick="window.open(this.href); return false;">        <img src="images/navi/passiv/12.jpg" width="92" height="29" alt="Plattling"></a></li> <li><img src="images/navi/passiv/13.jpg" width="5" height="29"></li> <li class="inside"><a href="#" id="inside"><img src="images/navi/passiv/14.jpg" width="58" height="29" alt="Inside"></a></li> <li><img src="images/navi/passiv/15.jpg" width="400" height="29"></li>

</ul> <br style="clear: left" /> </div>

<img src="images/image.jpg" alt="..." title="...." />

</body> </html>

Der Code der externen css datei:

.jqueryslidemenu{ font: bold 12px Verdana; width: 1024px; }

.jqueryslidemenu ul{ list-style-type: none; }

/Top level list items/ .jqueryslidemenu ul li{ position: relative; display: inline; float: left; }

/Top level menu link items style/ .jqueryslidemenu ul li a{ display: block; background:#000; /background of tabs (default state)/ color: white; color: #2d2b2b; text-decoration: none; }

  • html .jqueryslidemenu ul li a{ /IE6 hack to get sub menu links to behave correctly/ display: inline-block; }

.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{ color: white; }

.jqueryslidemenu ul li a:hover{ background: black; /tab link background during hover state/ color: white; }

/1st sub level menu/ .jqueryslidemenu ul li ul{ position: absolute; display: block; visibility: hidden; }

/Sub level menu list items (undo style from Top level List Items)/ .jqueryslidemenu ul li ul li{ display: list-item; float: none; }

/*All subsequent sub menu levels vertical offset after 1st level sub menu */ .jqueryslidemenu ul li ul li ul{ }

/* Sub level menu links style */ .jqueryslidemenu ul li ul li a{ font: normal 13px Verdana; width: 110px; /width of sub menus/ padding-left: 5px; }

.jqueryslidemenuz ul li ul li a:hover{ /sub menus hover style/ background: #eff9ff; color: black; }

/* ######### CSS classes applied to down and right arrow images  ######### */

.downarrowclass{ position: absolute; }

.rightarrowclass{ position: absolute; }

und das java script des menüs:

//Specify full URL to down and right arrow images (23 is padding-right to add to top level LIs with drop downs): var arrowimages={down:['', '', 0], right:['', '']}

var jqueryslidemenu={

animateduration: {over: 200, out: 100}, //duration of slide in/ out animation, in milliseconds

buildmenu:function(menuid, arrowsvar){  jQuery(document).ready(function($){   var $mainmenu=$("#"+menuid+">ul")   var $headers=$mainmenu.find("ul").parent()   $headers.each(function(i){    var $curobj=$(this)    var $subul=$(this).find('ul:eq(0)')    this._dimensions={w:this.offsetWidth, h:this.offsetHeight, subulw:$subul.outerWidth(), subulh:$subul.outerHeight()}    this.istopheader=$curobj.parents("ul").length==1? true : false    $subul.css({top:this.istopheader? this._dimensions.h+"px" : 0})    $curobj.children("a:eq(0)").css(this.istopheader? {paddingRight: arrowsvar.down[2]} : {}).append(     '<img src="'+ (this.istopheader? arrowsvar.down[1] : arrowsvar.right[1])     +'" class="' + (this.istopheader? arrowsvar.down[0] : arrowsvar.right[0])     + '" style="border:0;" />'    )    $curobj.hover(     function(e){      var $targetul=$(this).children("ul:eq(0)")      this._offsets={left:$(this).offset().left, top:$(this).offset().top}      var menuleft=this.istopheader? 0 : this._dimensions.w      menuleft=(this._offsets.left+menuleft+this._dimensions.subulw>$(window).width())? (this.istopheader? -this._dimensions.subulw+this._dimensions.w : -this._dimensions.w) : menuleft      if ($targetul.queue().length<=1) //if 1 or less queued animations       $targetul.css({left:menuleft+"px", width:this._dimensions.subulw+'px'}).slideDown(jqueryslidemenu.animateduration.over)     },     function(e){      var $targetul=$(this).children("ul:eq(0)")      $targetul.slideUp(jqueryslidemenu.animateduration.out)     }    ) //end hover   }) //end $headers.each()   $mainmenu.find("ul").css({display:'none', visibility:'visible'})  }) //end document.ready } }

//build menu with ID="myslidemenu" on page: jqueryslidemenu.buildmenu("myslidemenu", arrowimages)

vielleicht kann mir jemand dabe helfen ich bekomms einfach nicht hin. ich kann auch die homepage als win rar datei verschicken. einfach unter 2481@gmx.de anschreiben.

würd mich freuen gruß klaus

Beitrag melden
–
Informationen zu den Bewertungsregeln