FORUM » TypoScript » Menüs

css only dropline menü

[1] [2] [Letzte »]
Autor Nachricht
Verfasst am: 06.05.2008 [16:01]
triskal

[Themenersteller]
dabei seit: 26.04.2006
Beiträge: 70
 hallo,

ich habe ein horizontales css-only-menü umgesetzt. es funktioniert derzeit wie in diesem beispiel: www.cssplay.co.uk/menus/dd_valid_2.html

schöner wäre es aber nun, wenn die jeweiligen menüpunkte nach der anwahl aufgeklappt bleiben könnten. exakt so wie in folgendem beispiel: www.cssplay.co.uk/menus/simple_dropline.html

ist ersichtlich was ich meine? stu verwendet ein php-skript um den current-<ul>s entsprechende css-klassen zuzweisen. das muss ich aber doch über TS lösen können, oder? meins sieht derzeit wie folgt aus:

Typoscript:Zeilennummerierung:  An / Aus

  1. MAINMENU = HMENU
  2. MAINMENU {
  3.   entryLevel = 1
  4.   1 = TMENU
  5.   1 {
  6.     wrap = <ul> | </ul>
  7.     expAll = 1
  8.     NO.ATagTitle.field = subtitle//title
  9.     NO.wrapItemAndSub = <li>|</li>
  10.     NO.stdWrap.prepend = COA
  11.     NO.stdWrap.prepend.10.wrap = ~  |
  12.     IFSUB = 1
  13.     IFSUB {
  14.       wrapItemAndSub = <li>|</li>
  15.       allWrap = | <!--<![endif]-->
  16.       linkWrap = |<!--[if IE 7]><!-->
  17.       ATagBeforeWrap = 1
  18.     }
  19.     ACT < .NO
  20.     ACT = 1
  21.     ACT.ATagParams = class=dropact
  22.     ACTIFSUB < .IFSUB
  23.     ACTIFSUB.ATagParams = class=dropact
  24.   }
  25.   2 = TMENU
  26.   2 {
  27.     wrap = <!--[if lte IE 6]><table><tr><td><![endif]--><ul> | </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
  28.     expAll = 0
  29.     NO.ATagTitle.field = subtitle//title
  30.     NO.wrapItemAndSub = <li> | </li>
  31.     NO.ATagParams = class=sub
  32.     IFSUB = 1
  33.     IFSUB {
  34.       wrapItemAndSub = <li> | </li>
  35.       allWrap = | <!--<![endif]-->
  36.       linkWrap = |<!--[if IE 7]><!-->
  37.       ATagBeforeWrap = 1
  38.       ATagParams = class=sub
  39.     }
  40.   }
  41. }


start in kleinen schritten: ich möchte erstmal nur erreichen, dass die beim rollover angezeigten submenüs auch im angeklickten (rootline?-) zustand zu sehen sind. um die reaktion der submenü-links kümmer ich mich dann im zweiten schritt.

kann mir hier jemand einen theoretischen ersten ansatz liefern? mein hirn ist noch so breit von der realisierung des jetzigen menü-zustands, dass ich gerade nicht mehr in der lage bin logisch und strukturiert zu denken...

freu mich über jeden hinweis.
danke und gruss, manuel[/TS]

EDIT: gerne schiebe ich nach, dass das TS aus folgender quelle stammt: typo3.intervation.de/snippets/menues/drop-down-menu.html

[Dieser Beitrag wurde 2 mal bearbeitet. Zuletzt am 06.05.2008 um 16:06]
Verfasst am: 06.05.2008 [17:13]
triskal

[Themenersteller]
dabei seit: 26.04.2006
Beiträge: 70
 ich wieder,

im prinzip muss ich das TS doch nur dazu bewegen mir folgenden HTML-code zu erzeugen:

Php:Zeilennummerierung:  An / Aus

  1. <ul class="current">
  2.   <li><a href="#">Aktueller Link Hauptmenü</a></li>
  3. </ul>
  4. <ul class="sub_active">
  5.   <li class="current_sub"><a href="#">Aktueller Link Submenü</a></li>
  6.   <li><a href="#">nicht-aktueller Submenü Link 1</a></li>
  7.   <li><a href="#">nicht-aktueller Submenü Link 2</a></li>
  8.   <li><a href="#">nicht-aktueller Submenü Link 3</a></li>
  9.   <li><a href="#">nicht-aktueller Submenü Link 4</a></li>
  10. </ul>
  11.  
  12. <ul class="select">
  13.   <li><a href="#">Nicht-aktueller Hauptmenü Link<!--[if IE 7]><!--></a>
  14.     <!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
  15.     <ul class="sub">
  16.       <li><a href="#">nicht-sichtbarer Submenü Link 1</a></li>
  17.       <li><a href="#">nicht-sichtbarer Submenü Link 2</a></li>
  18.       <li><a href="#">nicht-sichtbarer Submenü Link 3</a></li>
  19.       <li><a href="#">nicht-sichtbarer Submenü Link 4</a></li>
  20.     </ul>
  21.         <!--[if lte IE 6]></td></tr></table></a><![endif]-->
  22.   </li>
  23. </ul>


wobei der obere block 'current' für aktuelle hauptmenü-einträge und der untere für die nicht-aktuellen hauptmenüeinträge erzeugt werden muss.

aber wie das ganze gewrapt werden muss um genau das zu erreichen, dass schnall ich gerade einfach nicht...

gruss, manuel
Verfasst am: 07.05.2008 [03:18]
Dirk1

dabei seit: 15.03.2007
Beiträge: 51
 Hallo,

ich mache das in der Art:

Typoscript:Zeilennummerierung:  An / Aus

  1. page.1.marks.MENU = HMENU
  2. page.1.marks.MENU {
  3.         entryLevel = 0
  4.         1 = TMENU
  5.        
  6.         1.wrap = <ul> | </ul>
  7.         1.NO = 1
  8.         1.min = 100, 21
  9.         1.noBlur = 1
  10.         1.expAll = 1
  11.         1.NO    {
  12.                 wrapItemAndSub = <li class="nocurrent">|</li>
  13.                 ATagParams = class="outer nocurrent"
  14.                 }
  15.         1.CUR < .1.NO
  16.         1.CUR.wrapItemAndSub = <li class="current">|</li>
  17.         1.CUR.ATagParams = class="outer current"
  18.  
  19.         1.ACT < .1.CUR
  20.         1.ACT.ATagParams = class="outer act"
  21.  
  22.         1.IFSUB.wrapItemAndSub = <li class="sub nocurrent">|</li>
  23.         1.IFSUB.ATagParams = class="outer more nocurrent"
  24.  
  25.         1.CURIFSUB.wrapItemAndSub = <li class="sub current">|</li>
  26.         1.CURIFSUB.stdWrap.wrap = |
  27.         1.CURIFSUB.ATagParams = class="outer more current"
  28.        
  29.         1.ACTIFSUB.wrapItemAndSub = <li class="sub act">|</li>
  30.         1.ACTIFSUB.ATagParams = class="outer more act"
  31.  
  32.         2 < .1
  33.         2.wrap = <div id="inlay"><dl> | </dl></div>
  34.         2.NO.wrapItemAndSub = <dd class="nocurrent left">|</dd> |*| <dd class="nocurrent middle">|</dd> |*| <dd class="nocurrent right">|</dd>
  35.         2.NO.ATagParams = class="inner nocurrent"
  36.         2.CUR < .2.NO
  37.         2.CUR.wrapItemAndSub = <dd class="current left">|</dd> |*| <dd class="current middle">|</dd> |*| <dd class="current right">|</dd>
  38.         2.CUR.ATagParams = class="inner current"
  39.  
  40.         2.NO.ATagParams = class="nocurrent"
  41.         2.CUR.ATagParams = class="current"
  42.         2.ACT.ATagParams = class="nocurrent act"
  43.         2.IFSUB.ATagParams = class="more nocurrent"
  44.         2.IFSUB.ATagParams = class="more nocurrent"
  45.  
  46.         2.ACTIFSUB.ATagParams = class="more act"
  47.  
  48.         2.CURIFSUB.ATagParams>
  49.         2.CURIFSUB.ATagParams = class="more current"
  50.  
  51. }


Es ensteht etwas in der Art:

Html4strict:Zeilennummerierung:  An / Aus

  1. <ul>
  2.    <li class="nocurrent">
  3.       <dl>
  4.         <dd class="nocurrent">..</dd>
  5.             ...
  6.         <dd>..</dd>
  7.       </dl>
  8.    </li>
  9.    <li class="current">
  10.       <dl>
  11.         <dd class="current">..</dd>
  12.             ...
  13.         <dd class="nocurrent">..</dd>
  14.       </dl>
  15.    </li>
  16.    <li class="nocurrent">
  17.       <dl>
  18.         <dd class="nocurrent">..</dd>
  19.             ...
  20.         <dd class="nocurrent">..</dd>
  21.       </dl>
  22.    </li>
  23.    ...
  24. </ul>

Die Listen sind also ineinander verschachtelt und auch die unsichtbaren immer da und können jederzeit über :hover sichtbar gemacht werden - oder eben über class "current". Für die innere Liste nehme ich nur aus praktischen Gründen <dl> (wegen der Unterscheidbarkeit). <ul> würde genau so gehen.

Wie das menu nun genau aussieht ist Sache von CSS.

Gruß
Dirk

[Dieser Beitrag wurde 2 mal bearbeitet. Zuletzt am 07.05.2008 um 03:32]
Verfasst am: 08.05.2008 [11:35]
triskal

[Themenersteller]
dabei seit: 26.04.2006
Beiträge: 70
 hi dirk,

vielen dank für deine schnelle antwort. ich melde mich erst jetzt, weil ich die letzten tage versucht habe, deinen vorschlag umzusetzen.

es klappt insofern auch schon super, dass die submenüs wie gewünscht stehen bleiben. aber wie kann ich es steuern, dass sie ausgeblendet werden, wenn ich über andere hauptmenü-button rollover?!

ist mein problem nachvollziehbar? es sieht so aus, als wenn ich hier einen css-denkfehler hätte. tut mir auch leid, hier css thematisieren zu müssen, aber da du so ein menü wie es scheint schon erfolgreich umgesetzt hast, würde ich an dieser stelle sehr gerne noch mal deine hilfe in anspruch nehmen.

hier ein auszug des meines erachtens relevanten quelltextes:



Html4strict:Zeilennummerierung:  An / Aus

  1. /* erstmal alle dd's im sub-div 'inlay' ausblenden::: */
  2. #inlay dl dd   { display:none; }
  3.  
  4. /* allgemeine formatierung der dl's im sub-div 'inlay'::: */
  5. #inlay dl {
  6.   position:absolute;
  7.   height:20px;
  8.   line-height:20px;
  9.   top:27px;
  10.   left:0;
  11.   width:750px;
  12. }
  13.  
  14. /* formatierung der links im sub-div 'inlay'::: */
  15. #inlay dl dd a.current,
  16. #inlay dl dd a.nocurrent {
  17.   font-size:11px;
  18.   font-weight:normal;
  19.   text-decoration:none;
  20.   background:none;
  21.   color:#575757;
  22. }
  23.  
  24. /* dto. */
  25. #inlay dl dd a.current,
  26. #inlay dl dd a.nocurrent:hover {
  27.   background:#F0A001;
  28.   color:#575757;
  29.   text-decoration:none;
  30. }
  31.  
  32. /* bei aktuellem hauptmenü-topic, die entsprechenden dd's einblenden::: */
  33. #m1 ul li.current #inlay dl dd { display:block; }
  34.  
  35. /* beim rollover nicht-aktueller hauptmenü-topics, die entsprechenden dd's einblenden:::*/
  36. #m1 ul li.nocurrent:hover #inlay dl dd,
  37. #m1 ul li.nocurrent a:hover #inlay dl dd { display:block; }


die letzten zwei css-geschichten sind glaube ich relevant für meine problematik. prinzipiell müsste ich so etwas coden können:

Html4strict:Zeilennummerierung:  An / Aus

  1. #m1 ul li.nocurrent:hover #m1 ul li.current #inlay dl dd,
  2. #m1 ul li.nocurrent a:hover #m1 ul li.current #inlay dl dd { display:none; }


aber das klappert leider nicht...
kannst du mir sagen, wie du das gelöst hast?

danke und gruss, manuel
Verfasst am: 09.05.2008 [02:29]
Dirk1

dabei seit: 15.03.2007
Beiträge: 51
 Hallo Manuel,

vielleicht wäre es besser, wenn du deine Operationen zur Sichtbarkeit nicht auf die einzelnen unterpunkte, sondern auf die komplette Liste anwenden würdest.

Du willst doch dass das komplette Untermenu erscheint und verschwindet. Oder?

Also z.B.

Html4strict:Zeilennummerierung:  An / Aus

  1. #m1 ul li.nocurrent #inlay dl { display:none; }
  2. #m1 ul li.nocurrent:hover #inlay dl { display:block; }


Das ist eigentlich schon das ganze Prinzip. das Ganze wirkt natürlich nur auf hierarchisch untergeordnete Bereiche. Effekte auf parallele Bereiche sind nicht möglich. Du kannst andere Bereiche höchstens überdecken. Das reicht aber für deinen Zweck, glaube ich.

Dein
Html4strict:Zeilennummerierung:  An / Aus

  1. #m1 ul li.nocurrent a:hover #inlay dl dd { display:block; }

Verstehe ich nicht. Das würde bedeuten deine Liste ist innerhalb des <a>-Tags.
Das wäre aber kein valider HTML-Code - oder ist das für den IE6?
Dafür hätte ich eine bessere Lösung.

Gruß
Dirk
Verfasst am: 12.05.2008 [14:51]
triskal

[Themenersteller]
dabei seit: 26.04.2006
Beiträge: 70
 hi dirk,

erneut bedanke ich mich für deine hilfe. das mit dem überdecken war der entscheidende hinweis. somit läuft das menü jetzt schonmal im firefox und ie7. wie genau sieht denn dein trick für den ie6 aus? arbeitest du wie stu mit den table-tags?

ein weiteres problem besteht jedoch noch. und zwar ist per css doch ein li:hover genauso möglich wie ein a:hover, oder? aber genau das krieg ich nicht hin. beim rollover über einen hauptmenü-link wird das submenü angezeigt. versuche ich dann den mauszeiger dort hinzusteuern, verliert er den kontakt zum hauptmenü-link und das submenü verschwindet. es sind nur zwei, drei pixel die hier zwischen dem a-tag des hauptmenüs und der dl aus dem submenü fehlen. es sieht so aus, als wenn nur das a:hover zieht, nicht das li:hover. wie müssen a-, li- und hover-tags im hauptmenü css-technisch korrekt aufgebaut werden, damit das richtig funktioniert?

danke und gruss, manuel
Verfasst am: 12.05.2008 [15:37]
Dirk1

dabei seit: 15.03.2007
Beiträge: 51
 Hallo manuel,

arbeitest du wie stu mit den table-tags?

Tut er das wirklich?


und zwar ist per css doch ein li:hover genauso möglich wie ein a:hover, oder?

Aber leider nicht im IE6. Der kann das nur mit <a>-tags.
Deshalb lösen viele das Problem, indem sie den fraglichen Bereich in ein <a> </a> verpacken.

Das ist aber nicht HTML-konform.

versuche ich dann den mauszeiger dort hinzusteuern, verliert er den kontakt zum hauptmenü-link und das submenü verschwindet.


Ist das submenu html-mässig verschachtelt?

<li class="menu-item">
<a ...>...</a>
Unternmenu-elemente

</li>

..erlaubt von dem aussen-liegenden <li> einen Zugriff auf das Untermenu.
Aber nicht von <a> aus, da die beiden Blöcke NACHEINANDER kommen und nicht ineinander verschachtelt sind.

Wenn du also W3C-konformen Code produzieren willst, kannst du beim <a> element als hover-Effekt nur Eigenschaften des <a>-Elementes selbst manipulieren.

Also hover für das submenu nur über das aussen liegende <li>, oder was immer man da verwendet hat.

Das kann aber IE6 wie gesagt nicht. Man kann es ihm aber beibringen mit einem htc-script, EINER Zeile (!) in der CSS-Datei und NULL Eingriff in HTML oder Typo3.
Details verrate ich dir, wenn du dein Verfahren im Firefox und IE7 sauber zu laufen gebracht hast.

Man kann sich aber auch auf den Standpunkt stellen, dass der IE6 dann eben nicht hovern kann - sozusagen als Anreiz zum Update. Deine Navigation sollte aber natürlich trotzdem funktionieren und daher auch nicht auf den hover -Effekt angewiesen sein.

Gruß
Dirk
Verfasst am: 13.05.2008 [07:41]
triskal

[Themenersteller]
dabei seit: 26.04.2006
Beiträge: 70
 hi dirk,

ok. in ff und ie7 funktioniert es soweit. hier der beweis: [LINK GELÖSCHT]

verrätst du mir die 'zauber-css-zeile' für den ie6?

danke und gruss, manuel
Verfasst am: 13.05.2008 [13:14]
Dirk1

dabei seit: 15.03.2007
Beiträge: 51
 Gerne:

Du erstellst eine Datei (Inhalt folgt am Ende), die du z.B. in folgender Weise über CSS referenzierst:

body {behavior:url("fileadmin/hover.htc")}

CSS-Validatoren meckern diese Zeile allerdings an.
Vielleicht kann man das über Kommentar-Tricks (mit denen ich mich nicht beschäftigt habe) aber auch noch irgend wie hin bekommen. Denn es ist ja wirklich nur für IE6.

Zu beachten ist allerdings noch, dass die Klassen mit dem voll qualifizierten Objekttyp angesprochen werden müssen.
Also nicht #ml .. li:hover {..}, sondern div#ml .. li:hover {..}
Funktioniert sonst nicht - daran bin ich mal fast einen vollen Tag verzweifelt.

Was dir dann noch passieren kann, ist die Kollision mit Javascript. Ich hatte z.B. mit der Extension JW_Calendar das Problem, dass das menu immer so seltsam flackerte. Aber auch dafür gibts eine Lösung.

Javascript:Zeilennummerierung:  An / Aus

  1. <attach event="ondocumentready" handler="parseStylesheets" />
  2. <script>
  3. /**
  4.  *      HOVER - V1.00.031224 - whatever:hover in IE
  5.  *      ---------------------------------------------
  6.  *      Peterned - http://www.xs4all.nl/~peterned/
  7.  *      (c) 2003 - Peter Nederlof
  8.  *
  9.  *      howto: body { behavior:url("csshover.htc"); }
  10.  *      ---------------------------------------------
  11.  */
  12.  
  13. var CSSBuffer, doc = window.document;
  14.  
  15. function parseStylesheets() {
  16.         var rules, sheet, sheets = doc.styleSheets;
  17.         var bufferIndex = sheets.length;       
  18.         var head = doc.getElementsByTagName('head')[0];
  19.         var buffer = doc.createElement('style');
  20.  
  21.         buffer.setAttribute('media', 'screen');
  22.         buffer.setAttribute('type', 'text/css');
  23.         head.appendChild(buffer);
  24.         CSSBuffer = sheets[bufferIndex];
  25.  
  26.         for(var i=0; i<sheets.length -1; i++) {
  27.                 sheet = sheets[i];
  28.                 if(!sheet.media || sheet.media == 'screen') {
  29.                         rules = sheet.rules;
  30.                         for(var j=0; j<rules.length; j++) {
  31.                                 parseCSSRule(rules[j]);
  32.                         }
  33.                 }
  34.         }
  35. }
  36.         function parseCSSRule(rule) {
  37.                 var select = rule.selectorText, style = rule.style.cssText;
  38.                 if(!select || !style || select.indexOf(':hover') < 0) return;
  39.                 var newSelect = select.replace(/\:hover/g, '.onHover');
  40.                 CSSBuffer.addRule(newSelect, style);
  41.                
  42.                 var affected = select.replace(/\:hover.*$/g, '');
  43.                 var elements = getElementsBySelect(affected);
  44.                 for(var i=0; i<elements.length; i++) {
  45.                         if(elements[i].nodeName == 'A') continue;
  46.                         new HoverElement(elements[i]);
  47.                 }
  48.         }
  49.  
  50. /**
  51.  *      HoverElement
  52.  *      -------------------------
  53.  *      applies the hover
  54.  */
  55.  
  56. function HoverElement(element) {
  57.         if(element.isHoverElement) return;
  58.         element.isHoverElement = true;
  59.         element.attachEvent('onmouseover',
  60.                 function() { element.className += ' onHover'; });
  61.  
  62.         element.attachEvent('onmouseout',
  63.                 function() { element.className = element.className.replace(/onHover/g, ''); });
  64. }
  65.  
  66. /**
  67.  *      domFinder
  68.  *      -----------------------------------
  69.  *      returns list of elements based on css selector
  70.  */
  71.  
  72. function getElementsBySelect(rule) {
  73.         var nodeList = [doc], sets = rule.split(' ');
  74.         for(var i=0; i<sets.length; i++) {
  75.                 nodeList = domFinder.filterNodes(sets[i], nodeList);
  76.         }       return nodeList;
  77. }
  78.  
  79. var domFinder = {
  80.         findNodes:function(tag, docs) {
  81.                 var res, nodes = [];
  82.                 for(var i=0; i<docs.length; i++) {
  83.                         res = docs[i].getElementsByTagName(tag);
  84.                         for(var j=0; j<res.length; j++) nodes[nodes.length] = res[j];
  85.                 }       return nodes;
  86.         },
  87.  
  88.         filterNodes:function(select, docs) {
  89.                 var filtered = [], nodes,rule,atr,s = (/#|\./).exec(select);
  90.                 if(!s) return this.findNodes(select, docs);
  91.                 nodes = this.findNodes((rule = select.split(s))[0], docs);
  92.                 atr = (s == '#')? 'id':'className';
  93.                 for(var i=0; i<nodes.length; i++) {
  94.                         if(new RegExp('(^|\s)' +  rule[1] + '(\s|$)').exec(nodes[i][atr]))
  95.                                 filtered[filtered.length] = nodes[i];
  96.                 }       return filtered;
  97.         }
  98. }
  99. </script>


Gruß
Dirk
Verfasst am: 13.05.2008 [13:26]
Dirk1

dabei seit: 15.03.2007
Beiträge: 51
 Ich sehe gerade, dass es von dem script eine neue Version gibt:
http://www.xs4all.nl/~peterned/htc/csshover.htc

Vielleicht kannst du das ja mal auf Unterschiede (vielleicht geht jetzt auch #ml) überprüfen?

Dirk

[Dieser Beitrag wurde 1 mal bearbeitet. Zuletzt am 13.05.2008 um 13:27]
[1] [2] [Letzte »]



Impressum | Kontakt | TYPO3-Hosting | TYPO3-Schulungen

  
TYPO3 Version 4.2.0 testen

TYPO3 Ver. 4.2.0 testen

Testen Sie die neue TYPO3 Version 4.2.0 kostenlos für einen Monat

TYPO3 Bücher

TYPO3 Workshops

TYPO3 Einführungsschulung
in Berlin:
Montag, 07.07.
in Espelkamp:
Montag, 04.08.
TYPO3 Intensivschulung
in Espelkamp:
Mi., 06.08. - Fr., 08.08.
in Würzburg:
Mo., 18.08. - Mi., 20.08.
in Köln:
Mo., 01.09. - Mi., 03.09.
in Berlin:
Mi., 24.09. - Fr., 26.09.
TYPO3 Extensionschulung
in Berlin:
Mo., 14.07. - Mi., 16.07.
in Espelkamp:
Mo., 11.08. - Mi., 13.08.