dynamisches CSS Menü mit Grafiken

[Torsten]

Hallo,

ich versuche mir ein dynamisches Menü zusammen zu Basteln, die Anregung dafür habe ich von SELFHTML ( http://de.selfhtml.org/css/layouts/navigationsleisten.htm#modern ) und von Ingo ( http://www.1ngo.de/web/tmenu.html ) möchte aber auf die Flexibelität die ein Textmenü bietet verzichten und statt dessen Grafiken einsetzen.

jetzt das Problem: die erste Menüebene konnte ich mit meinen rudimentär vorhandenen Kenntnissen eben noch Anpassen, bei der zweiten Ebene ( ul li ul li ) will mir das einfach nicht gelingen, hab schon versucht den links class(es) und #Bereiche zuzuordnen bin aber nicht auf die Lösung meines Problems gekommen.

den Quelltext und das Menü kann man sich hier anschauen:
http://www.jungmann.net/allesneumachtdermai/menu.txt
http://www.jungmann.net/allesneumachtdermai/cssmenu.html

für Hilfe wäre ich sehr Dankbar.
M.f.G.
Torsten

[Ingo Turski]

Hi,

möchte aber auf die Flexibelität die ein Textmenü bietet verzichten und statt dessen Grafiken einsetzen.

und warum machst Du das dann nicht einfach? Sprich statt Text Grafiken in die Links setzen?
Es handelt sich hier nicht um bloße Design-Elemente, sondern um die elementar wichtige Navigation, die ja wohl auch ohne Grafikanzeige nutzbar sein soll.

freundliche Grüße
Ingo

[Torsten]

Hallo Ingo

das ist jetzt wohl doppelt gemoppelt, wenn ich geahnt hätte auf diese Weise mit dir Kommunizieren zu können hätte ich die Mail weggelassen...

und warum machst Du das dann nicht einfach? Sprich statt Text Grafiken in die Links setzen?

nun, mein Problem ist, daß die Grafiken beim mouseover ausgetauscht werden sollen, hab mich im ersten Posting wohl nicht vollständig erklärt...

Es handelt sich hier nicht um bloße Design-Elemente, sondern um die elementar wichtige Navigation, die ja wohl auch ohne Grafikanzeige nutzbar sein soll.

das ist eigentlich das, was es auf meiner Seite so gut wie nichtgeben soll (Text) der Gestaltung wegen...

hab auch schon versucht ein Javascript mit mouseover einzufügen... klappt aber nicht... am liebsten hätte ich eine im css-sheet eingebundene Definition nach dieser Art:

a#Name
         {
 display:block;
         background-image:url(_picz/log.gif);
         width:44px; height:105px;
         }
a#Name:hover
         {
         background-image:url(_picz/log_ho.gif);
         }

leider weiß ich nicht wo und wie ich das einbinden kann so, daß ich für jeden <li><a href= usw. ein anderes Bild (Hintergrund) verwenden kann das dann mit einem zugehörigen Pendant ausgetauscht wird.

Gruß Torsten

[Auge]

Hallo

am liebsten hätte ich eine im css-sheet eingebundene Definition nach dieser Art:

a#Name
         {
display:block;
         background-image:url(_picz/log.gif);
         width:44px; height:105px;
         }
a#Name:hover
         {
         background-image:url(_picz/log_ho.gif);
         }

leider weiß ich nicht wo und wie ich das einbinden kann so, daß ich für jeden <li><a href= usw. ein anderes Bild (Hintergrund) verwenden kann das dann mit einem zugehörigen Pendant ausgetauscht wird.

Willst du nun ein Hintergrundbild für die Links oder Bilder _anstatt_ der Linktexte?

Im ersten Fall bist du mit obigem Code auf der richtigen Spur. Man nehme für a:link (evtl. auch für a:visited) ein Bild und für andere Zustände a:hover, a:focus, a:active ein oder mehrere andere Bilder. Effektiver wird das ganze noch, wenn man _ein_ Bild mit allen möglichen Zuständen nimmt, und dieses über background-position jeweils anders ausrichtet.

Im zweiten Fall brauchst du für jeden Link eine ID und ein zusätzliches Element innerhalb des Links. Das sähe dann so aus: <a href="..." id="bla">Bla<span></span></a>. Der Linktext garantiert, dass sowohl Suchmaschinen als auch Nutzer, die keine Bilder anzeigen lassen (können), mit dem Link etwas anfangen können. Das Bild wird im <span> als Hintergrund definiert und selbiges so positioniert, dass es über dem Text liegt. Kann das Bild angezeigt werden, verdeckt es den Text. Ansonsten ist dort einfach nur ein leeres <span> ohne Auswirkung auf die Anzeige.

Replacing Text By An Image (Beispiel 2 (hier für eine Überschrift))
Fast Rollovers Without Preload

Tschö, Auge

[Torsten]

hallo auge,

danke für deinen Tipp, hab ich aber schon ausprobiert, am besten ich kopiere den ganzen Quelltext mal hier her weil die verweise auf meine Seite wohl keiner ankiekt...

Willst du nun ein Hintergrundbild für die Links oder Bilder _anstatt_ der Linktexte?

Bilder ist korrekt, die sollen beim hover getauscht werden, wenn ich den Bildern ein attribut alt="bild" zuweise, dann brauch ich keinen Text, wenn das Bild nicht angezeigt wird steht halt das "alt" an der Stelle, die Links haben eine feste Höhe und Breite weil da ein display:block und andere zugewiesene Werten für zuständig sind...

Im ersten Fall bist du mit obigem Code auf der richtigen Spur. Man nehme für a:link ...

Im zweiten Fall brauchst du für jeden Link eine ID und ein zusätzliches Element innerhalb des Links. Das...

wie gesagt schon versucht aber irgendwas mach ich mit den id´s für die Pseudoelemente falsch, könnte das eventuell an dem eingebundenen Javascript liegen? fehlt da irgendwas um Bilder ein und auszublenden... keine Ahnung... außerdem ist das Script nur für den IE zuständig...

wenn ich dem link <a id="name" href="#Beispiel"> so gestalte und in das css folgendes aufnehme:

  
a#Name  
 {  
 display:block;  
 background-image:url(_picz/log.gif);  
 width:44px; height:105px;  
 }  
a#Name:hover  
 {  
 background-image:url(_picz/log_ho.gif);  
 }  

dann geschieht absolut nix.... zumindest im Bereich der eingeblendeten Blöcke, für die statischen verweise funzt das einwandfrei wie man hier prima beobachten kann...

in dem Code sind aber nur die sachen, die fuktionieren... für den Bildwechsel im dynamischen bereich brauch ich einen Schubser in die richtige Richtung... ich checks einfach nicht...

gruß torsten

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">  
<head>  
<title>&bull;</title>  
<style type="text/css">  
  div#rightmenu  
     {  
     position:absolute; left:50%; top:10%;  
       width: 44px;  
       background-color: #fff;  
     }  
  ul#dynnav  
     {  
       margin: 0; padding: 0;  
     }  
  ul#dynnav a  
     {  
       display: block;  
       width: 44px;  
       border: 1px solid #900;  
     }  
  ul#dynnav span  
     {  
       display: block;  
       width: 44px;  
       border: 1px solid #900;  
                         }  
  
  ul#dynnav li  
     {  
       list-style: none;  
       }  
  ul#dynnav li ul  
     {  
       position: absolute; top: 0; right: 44px;  
     }  
  
  li a#top  
     {  
     height: 91px;  
                         background: #fff url(_picz/top.gif);  
     }  
  li a#top:hover  
     {  
      height: 91px;  
           background: #fff url(_picz/top_ho.gif);  
     }  
  li a#log  
   {  
                         height: 105px;  
       background: #fff url(_picz/log.gif);  
     }  
  li a#log:hover  
     {  
           height: 105px;  
       background: #fff url(_picz/log_ho.gif);  
     }  
  li a#cont  
   {  
                         height: 114px;  
       background: #fff url(_picz/cont.gif);  
     }  
  li a#cont:hover  
     {  
                         height: 114px;  
       background: #fff url(_picz/cont_ho.gif);  
     }  
  ul#dynnav li ul span  
   {  
     width: 81px;  
     height: 44px;  
                         background-color: #fff;  
     }  
  ul#dynnav li ul a  
   {  
     width: 81px;  
       height: 44px;  
       background-color: #fff;  
     }  
  
/* dynamisches Ein-/Ausblenden */  
  ul#dynnav li ul  
   {  
       display: none;  
     }  
  ul#dynnav li:hover>ul  
          {  
       display: block;  
                         }  
  ul#dynnav>li:hover>a  
     {  
       width: 44px;  
     }  
  
/* dynamisches Ein-/Ausblenden der JavaScript-generierten Klasse im IE */  
  ul#dynnav li.hoverIE  
   {  
       margin-right:0;  /* reservierten Platz freigeben */  
       margin-bottom:-19px;  /* Fehlerkorrektur, ggfls. anpassen */  
     }  
  ul#dynnav li.hoverIE ul  
   {  
       display: block;  
     }  
  ul#dynnav li .hoverIE  
   {  
       width: 44px;  
       w\idth: 44px;  /* (IE 6 in standards-compliant mode) */  
              }  
</style>  
  
<!--[if IE]>  
<script type="text/javascript">  
if(window.navigator.systemLanguage && !window.navigator.language) {  
  function hoverIE() {  
    var LI = document.getElementById("dynnav").firstChild;  
    do {  
      if (sucheUL(LI.firstChild)) {  
        LI.onmouseover=einblenden; LI.onmouseout=ausblenden;  
      }  
      LI = LI.nextSibling;  
    }  
    while(LI);  
  }  
  
  function sucheUL(UL) {  
    do {  
      if(UL) UL = UL.nextSibling;  
      if(UL && UL.nodeName == "UL") return UL;  
    }  
    while(UL);  
    return false;  
  }  
  
  function einblenden() {  
    var UL = sucheUL(this.firstChild);  
    UL.style.display = "block"; UL.style.backgroundColor = "#fff";  
  }  
  function ausblenden() {  
    sucheUL(this.firstChild).style.display = "none";  
  }  
  function einblenden() {  
    this.className="hoverIE"; this.firstChild.className="hoverIE";  
  }  
  function ausblenden() {  
    this.className=""; this.firstChild.className="";  
  }  
  
  window.onload=hoverIE;  
}  
</script>  
<![endif]-->  
  
</head>  
  
<body>  
  
<div id="rightmenu">  
     <ul id="dynnav">  
     <li><a id="top" href="#Beispiel"></a>  
        <ul>  
           <li><span></span></li>  
           <li><a href="#Beispiel"></a></li>  
           <li><a href="#Beispiel"></a></li>  
           <li><a href="#Beispiel"></a></li>  
        </ul>  
     </li>  
     <li><a id="log" href="#Beispiel"></a>  
         </li>  
     <li><a id="cont" href="#Beispiel"></a>  
         </li>  
      </ul>  
  <div></div>  
  
</div>  
  
</body>  
</html>  

[Ingo Turski]

Hi,

und warum machst Du das dann nicht einfach? Sprich statt Text Grafiken in die Links setzen?

nun, mein Problem ist, daß die Grafiken beim mouseover ausgetauscht werden sollen, hab mich im ersten Posting wohl nicht vollständig erklärt...

Aber Du warst doch bereits auf einer Seite von mir. Direkt darüber hättest Du Bildwechsel mit CSS mal ganz anders finden können. Das ist relativ einfach, ermöglicht ein alt-Attribut und ersetzt den Text durch ein Bild, wodurch die Anpassungen des Menüs nicht allzu aufwendig sein sollten.

freundliche Grüße
Ingo

[torsten]

hallo ingo,

Bildwechsel mit CSS mal ganz anders funktioniert bestens! warum auch immer, die methode scheint mir eleganter als die bisher von mir verwendete :) jetzt muß ich nur noch herausfinden wie ich´s verhindern kann, daß der IE so einen riesen margin um das img erzeugt... der FF macht auch einen kleinen hopser beim hover aber das ist nur eine frage der zeit bis ich´s gefunden habe.

danke und gruß

torsten