Hilfe beim Dropdown Menü von Klaus, 29.01.2009 15:41

Hilfe beim Dropdown Menü

Klaus 29.01.2009 15:41

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>

#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>

<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>

</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

Hilfe beim Dropdown Menü
Bobby 29.01.2009 16:00

css
– Informationen zu den Bewertungsregeln
Moin

uiuiui... Ein wust an Quellcode. Nun gut. Die Hintergründe werden vererbt:

#myslidemenu .news a {
background: url(images/navi/aktiv/4.jpg) no-repeat;
display:block; width:54px; height:29px;
}

Das heißt, das alle Links im Div mit der Klasse "news" das Bild als Hintergrund haben. Setze einfach für tiefere Ebenen extra Styleangaben. z.B:

#myslidemenu .news ul li a {background:none}

Damit wird die Vererbung aufgehoben.

Ein Tipp am Rande. Versuch mal gleiche Eigenschaften im CSS zusammenzufassen, bzw logisch zu struktirieren.

Gruß Bobby

--
-> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <-
-> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <-
ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)
Beitrag melden

–
Informationen zu den Bewertungsregeln
1. Hilfe beim Dropdown Menü
  
  suit Homepage des Autors 30.01.2009 14:21
  
  css
  +1 Informationen zu den Bewertungsregeln
  Die Hintergründe werden vererbt:
  
  #myslidemenu .news a {
  #myslidemenu .news ul li a {background:none}
  Damit wird die Vererbung aufgehoben.
  
  welche vererbung?
  
  der erste selektor selektiert alle a-elemente innerhalb eines beliebigen elements mit der klasse "news" welches sich in einem beliebigen element mit der id #myslidemenu befindet
  
  zweiter hängt halt ein ul-element und ein li-element in die kette
  
  vererbt wird da garnix
  
  im übrigen würde im zweiteren selektor ein ul oder ein li ausreichen
  Beitrag melden
  
  +1
  Informationen zu den Bewertungsregeln
  Übersicht
  
  alle Foren
  
  SELFHTML-Forum
  
  anmelden
  
  Benutzerkonto erstellen
  
  Beitrag im Thread-Baum
  1. Hilfe beim Dropdown Menü
    
    Bobby 30.01.2009 20:08
    
    css
    
    – Informationen zu den Bewertungsregeln
    Moin
    
    vererbt wird da garnix
    
    Also bitte, na klar wird da vererbt.
    
    #myslidemenu .news a
    
    wirkt sich auf alle Links im UL mit der Klasse news aus. Also auch auf die a-Elemente die noch weiterverschachtelt im UL sind.
    
    also Beispiel:
    
    <div id="myslidemenu"> <ul class="news"> <li> <a href="example.com">Link</a> <ul> <li> <a href="example.net">Link2</a> </li> </ul> </li> </ul> </div>
    
    hier wirkt sich #myslidemenu .news a auf Link UND Link2 aus. Das meinte ich mit Vererbung.
    
    Um nun Link2 extra zu formatieren muss man eben mit #myslidemenu .news ul li a das Unterelement direkt ansprechen.
    
    Gruß Bobby
    
    --
    -> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <-
    -> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <-
    ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)
    Beitrag melden
    
    –
    Informationen zu den Bewertungsregeln
    
    Übersicht
    
    alle Foren
    
    SELFHTML-Forum
    
    anmelden
    
    Benutzerkonto erstellen
    
    Beitrag im Thread-Baum
    1. Hilfe beim Dropdown Menü
      
      ChrisB 31.01.2009 15:23
      
      css
      
      – Informationen zu den Bewertungsregeln
      
      Hi,
      
      vererbt wird da garnix
      
      Also bitte, na klar wird da vererbt.
      
      Nein, wird es nicht.
      
      #myslidemenu .news a
      
      wirkt sich auf alle Links im UL mit der Klasse news aus.
      [...]
      Das meinte ich mit Vererbung.
      
      Das ist keine Vererbung im Sinne von CSS, sondern simple Selektion.
      
      http://www.w3.org/TR/CSS21/cascade.html#inheritance
      
      MfG ChrisB
      
      --
      „This is the author's opinion, not necessarily that of Starbucks.“
      
      Beitrag melden
      
      –
      Informationen zu den Bewertungsregeln
      
      Übersicht
      
      alle Foren
      
      SELFHTML-Forum
      
      anmelden
      
      Benutzerkonto erstellen
      
      Beitrag im Thread-Baum

SELFHTML Forum - Ergänzung zur Dokumentation Übersicht

Klaus: Hilfe beim Dropdown Menü