• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Welche Varianter zum Ausblenden von Tags ist am geeignetsten?

K

K.Beutler

Guest
Hallo,

ich versuche mich gerade an einem Menü, welches beim "mouseover-event" automatisch aufklappt.
Nun habe ich viele Möglichkeiten zur Wahl und wüsste gerne, ob es da eine "klassische" Variante gibt oder ob alle Möglichkeiten gleichwertig gut/schlecht sind:

1. Div-Container wird gleich in kompletter Menügröße definiert und per Style clip:rect nur soweit angezeigt, wie es in kollabierter Größe erscheinen würde

2. Div-Container wird in kollabierter Menügröße definiert und per overflow:hidden wird verhindert, dass die ausgeklappten Menüpunkte angezeigt werden --> beim mouseover-Event wird dann die DIV-Größe erweitert

3. Dem Div-Container werden erst nachträglich die ausgeklappten Unterpunkte zugefügt

4. (Ähnlich 1.) nur mit Verwendung von:
a) display:hidden/block
b) visibility:visible/invisible


Welche Variante würdet ihr bevorzugen? Ich arbeite ausschließlich mit absoluter Positionierung und das Menü hat den höchsten z-Index, sodass es beim Aufklappen auch nicht zu Komplikationen kommen kann...

Liebe Grüße
 
Werbung:
4a), und ich würde nicht div sondern <li> und <ul> verschachteln für ein Menü.

Wenn Du allerdings eine Animation erreichen willst, wäre visibility vermutlich am geeignetsten.
 
Werbung:
4a), und ich würde nicht div sondern <li> und <ul> verschachteln für ein Menü.

Wenn Du allerdings eine Animation erreichen willst, wäre visibility vermutlich am geeignetsten.
Vielen Dank für den Tipp! Ja in der Tat soll es (irgendwann) mal einen Effekt geben, dass die Navigation quasi fließend aufklappt... Dann wäre dafür visibility praktischer? Woran liegt das?

Dass das Blödsinn ist, weißt du aber?
Ich hätte vielleicht dazu sagen sollen, dass ich keine Website erstelle sondern ein Programm, wobei ich mit ActiveX die GUI-Styles einbinde, die ich per HTML/CSS/JS bearbeite (gibt einfach 1000x mehr Designmöglichkeiten/Barrierefreiheit als Verwendung der Standard-Elemente von Microsoft).
Deshalb wird die Größe des GUI nicht variieren und muss auch nicht an die Client-Voraussetzungen angepasst werden.
Weiterhin meinte ich mit "nur position:absolute" lediglich die DIV-Container. Deren Inhalte wiederum werden relativ positioniert...
Wenn du allerdings einen Verbesserungsvorschlag oder Kritikpunkt hast, ich lasse mich gerne eines Besseren belehren :)

lg
 
Vielen Dank für den Tipp! Ja in der Tat soll es (irgendwann) mal einen Effekt geben, dass die Navigation quasi fließend aufklappt... Dann wäre dafür visibility praktischer? Woran liegt das?


Ich hätte vielleicht dazu sagen sollen, dass ich keine Website erstelle sondern ein Programm, wobei ich mit ActiveX die GUI-Styles einbinde, die ich per HTML/CSS/JS bearbeite (gibt einfach 1000x mehr Designmöglichkeiten/Barrierefreiheit als Verwendung der Standard-Elemente von Microsoft).
Deshalb wird die Größe des GUI nicht variieren und muss auch nicht an die Client-Voraussetzungen angepasst werden.
Weiterhin meinte ich mit "nur position:absolute" lediglich die DIV-Container. Deren Inhalte wiederum werden relativ positioniert...
Wenn du allerdings einen Verbesserungsvorschlag oder Kritikpunkt hast, ich lasse mich gerne eines Besseren belehren :)

lg

Ja da war das "ausschließlich absolute Positionierung" ein wenig irreführend :)
In den meisten Fällen könnte aber auch da auf die absolute Positionierung verzichtet werden.

visibility ist für CSS3-transitions "besser".
display kann nämlich nicht animiert werden.
Code:
ul {
  opacity:0;
  visibilty:hidden;
  transition: all 1s;
}
ul.show {
  opacity:1;
  visibility:visible;
}

Mit display:none/block würde das nicht funktionieren.
 
Zuletzt bearbeitet:
Ich glaube wenn du mit opacity arbeitest, kannst du das visiblity ganz weg lassen @scbawik.

Der Hauptunterschied zwischen visibility und display ist, dass bei visibility tatsächlich nur die Sichtbarkeit verändert wird. Bei display auch der eingenommene Platz. Bei absoluter Positionierung sollte das aber keinen Unterschied machen.

Effekte beim Aufklappen gibt es viele. Das ist reine Geschmacks- oder Designfrage. Wenn du sowieso schon alles absolut positionierst, mach das mit den Listenelementen doch auch, gib ihnen absteigende z-indexe und animiere beim Aufklappen den top-Wert. Gibt nen schönen Fächer-Effekt ;)
 
Werbung:
Ja da war das "ausschließlich absolute Positionierung" ein wenig irreführend :)
In den meisten Fällen könnte aber auch da auf die absolute Positionierung verzichtet werden.

visibility ist für CSS3-transitions "besser".
display kann nämlich nicht animiert werden.
Code:
ul {
  opacity:0;
  visibilty:hidden;
  transition: all 1s;
}
ul.show {
  opacity:1;
  visibility:visible;
}

Mit display:none/block würde das nicht funktionieren.
Dieser Beitrag ist genau das, was mir gefehlt hat! Du sprichst damit genau das an, nach was ich schon ne ganze Weile suche. Ich habe mich gerade mal in das Thema Animationen in CSS3 reingelesen und habe nach deinen Stichworten "transition" / "visibility" und "opacity" gesucht und bin verblüfft, da das genau in die Richtung geht, wie ich mir eine schöne Menüanimation vorstelle! Vielen Dank dafür! Jetzt ist mir auch ganz klar, weshalb "display" für mich nicht mehr in Frage kommt...

Ich habe mich jetzt mal in eine kleine Navigation mit JS-Unterstützung gewagt (noch lange nicht fertig) und stoße da auf ein kleines JS-Problem (ich weiß, das hier ist das falsche Forum dafür, aber vielleicht kann mir da kurz jemand weiterhelfen, denn danach gehts mit CSS weiter):
Code:
  <script type="text/javascript">
    function navigation_left_display(mode)
    {
      var navigation = document.getElementById("navigation_left");
      var contents = getElementsByClass("p", "subject_title_expand");

      if(mode == "expand")
      {
        for(var i = 0; i <= contents.length; i++)
        {
         contents[i].style.visibility = "visible";
        }
      }
      else
      {
        for(var i = 0; i <= contents.length; i++)
        {
          contents[i].style.visibility = "hidden";
        }
      }

     return;
    }


    function getElementsByClass(p_tag, p_class)
    {
      if(p_tag && p_class)
      {
        var elements = new Array();
        var tag_matches = document.getElementsByTagName(p_tag);
        for(var i = 0; i < tag_matches.length; i++)
        {
          if(tag_matches[i].className == p_class)
           elements.push(tag_matches[i]);
        }
      }

     return (elements.length > 0) ? elements : false;
    }

  </script>

  <body>
      <div id="navigation_left" onmouseover="navigation_left_display('expand');" onmouseout="navigation_left_display('collapse');">
        <p class="subject_title_collapse">
          <span>&gt;&gt; Option w&auml;hlen...</span>
        </p>
        <p class="subject_title_expand">
          <span>&gt;&gt; Option 1</span>
        </p>
        <p class="subject_title_expand">
          <span>&gt;&gt; Option 2</span>
        </p>
        <p class="subject_title_expand">
          <span>&gt;&gt; Option 3</span>
        </p>
      </div>
  </body>
Leider motzt er beim Ansprechen der "style"-Eigenschaft von contents rum... allerdings wüsste ich nicht, wie ich sonst den style dieser Elemente ansprechen sollte?!?
Zitat von SELFHTML.org:
document.getElementsByTagName("p").style.border = "solid red 10px";
Dort sprechen sie den style auch direkt über das Element an, welches vorher über "getElementsByTagName" ermittelt wurde (wie bei mir, lediglich in einer anderen Funktion die ich selbst geschrieben habe um Elemente per ClassName zu detektieren)...
Wo liegt der Fehler??


EDIT:
Ich habe schon herausgefunden, dass es am Array elements liegt:
wenn ich auf tag_matches[ i].style zugreifen möchte, funktioniert alles, aber sobald ich per push() das Objekt in elements stecke, kann ich nicht mehr darauf zugreifen (elements[ i].style)... warum denn? Kennt sich da jemand aus?


EDIT 2:
Habe meinen Fehler gefunden... Das Problem liegt in der Schleife der aufrufenden Funktion:
Code:
        for(var i = 0; i <= contents.length; i++)
        {
          contents[i].style.visibility = "hidden";
        }
Die Schleife läuft bei (kleiner-GLEICH) natürlich einmal zu oft durch und will dann auf ein Array-Element zugreifen, das ja gar nicht existiert --> Nullverweis-Fehlermeldung :rolleyes:
 
Zuletzt bearbeitet von einem Moderator:
Werbung:
Zurück
Oben