[TYPO3-german] fly-out menu von stu nicholls einbinden

[Aleksej Denisenko]

Hallo

Bin nach längerem rumprobieren selbst auf die lösung gekommen. Falls es
jemanden interessiert, hier der code.

Gruß
Aleksej

TS

  20 = HMENU
  20 {
    wrap = <div class="menu2">|</div>
    entryLevel = 0
    excludeUidList = 70,37,68,10,143,144,145
    1 = TMENU
    1 {
      expAll = 1
      noBlur = 1
      wrap = <ul>|</ul>
      NO.wrapItemAndSub = <li>|</li>
      NO.stdWrap.htmlSpecialChars = 1
      NO.ATagBeforeWrap = 1
      IFSUB {
        beforeWrap = <li>
        inkWrap = |
        doNotShowLink = 1
        before.cObject = TEXT
        before.cObject.dataWrap = <a href="{field:uid}.html">
        after.cObject = TEXT
        after.cObject.field = nav_title//title
        after.cObject.wrap = | <!--[if IE 7]><!--></a><!--<![endif]-->
      }
    }
    2 < .1
    2.wrap = <!--[if lte IE 6]><table><tr><td><![endif]--><ul>|</ul><!--[if
lte IE 6]></td></tr></table></a><![endif]-->
    3 < .2
    4 < .2
  }

CSS

.menu2{
	font-family: arial, sans-serif;
	width:100px;
	height:180px;
	position:relative;
	font-size:11px;
	margin:30px 0;
	z-index:100;
}
.menu2 ul {
	padding:0;
	margin:0;
	list-style-type: none;
	background:#eee;
	width:100px;
	height:180px;
	border:1px solid #606;
}
.menu2 ul li ul {
	visibility:hidden;
	position:absolute;
	height:0;
	overflow:hidden;
	top:0;
	left:85px;
}
.menu2 ul li {
	float:left;
}
.menu2 ul li a, .menu2 ul li a:visited {
	display:block;
	float:left;
	text-decoration:none;
	color:#000;
	width:90px;
	height:30px;
	line-height:29px;
	font-size:11px;
	/*background:transparent;*/
	padding-left:10px;
}
* html .menu2 ul li a, * html .menu2 ul li a:visited {
	width:100px;
	w\idth:90px;
}

.menu2 table {
	border-collapse:collapse;
	border:0;
	margin:0;
	padding:0;
	font-size:1em;
	position:absolute;
	left:0;
	top:0;
}

/* first line for IE7 and non-IE browsers - second line for IE5.5 and IE6 */
.menu2 ul li:hover a, .menu2 ul li a:hover{
	background:#606;
	color:#fff;
}

.menu2 ul li:hover {position:relative;
	z-index:90;
}
* html .menu2 ul li a:hover {position:relative;
	z-index:100;
}

.menu2 ul li:hover ul, .menu2 ul li a:hover ul {
	visibility:visible;
	position:absolute;
	height:auto;
	border:1px solid #606;
	background:#606;
	overflow:visible;
}
.menu2 ul li:hover ul li a, .menu2 ul li a:hover ul li a{
	display:block;
	/*background:transparent;*/
	color:#fff;
	line-height:15px;
	padding:5px 0 5px 10px;
	height:auto;
	text-decoration:none;
}

.menu2 ul li:hover ul li:hover a, .menu2 ul li a:hover ul li a:hover {
	background:#069;
	color:#ff0;
}
.menu2 ul li:hover ul li ul, .menu2 ul li a:hover ul li a ul {
	visibility:hidden;
	position:absolute;
	height:0;
	overflow:hidden;
	top:0;
	left:85px;
}
.menu2 ul li:hover ul li:hover ul, .menu2 ul li a:hover ul li a:hover ul {
	visibility:visible;
	position:absolute;
	height:auto;
	color:#000;
	padding:0;
	border:1px solid #069;
	list-style-type:none;
	background:#069;
}
.menu2 ul li:hover ul li:hover ul li a, .menu2 ul li a:hover ul li a:hover
ul li a {
	display:block;
	/*background:transparent;*/
	color:#ff0;
}

.menu2 ul li:hover ul li:hover ul li:hover a, .menu2 ul li a:hover ul li
a:hover ul li a:hover {
	background:#eee;
	color:#000;
}

P.S.
Das ganze funktioniert im IE 6 leider nicht, wenn overlib (wird von
mr_parseglossary benötigt) installiert ist. 

-----Ursprüngliche Nachricht-----
Von: Aleksej Denisenko [mailto:denisenko at cue-sound.de] 
Gesendet: Freitag, 10. November 2006 13:28
An: 'German Typo3 Userlist'
Betreff: [TYPO3-german] fly-out menu von stu nicholls einbinden

Hallo zusammen

Ich probiere gerade ein fly-out menu einzubinden.
http://www.cssplay.co.uk/menus/flyout5.html

Das problem dabei ist, dass die Liste bei diesem Menu etwas "unkonform"
ist...
Hat jemand eine Idee, wie man das lösen kann? Man muss ja theoretisch die
links per TS aufsplitten können, um dann die konditions reinzuschreiben.

Gruß
Aleksej

<ul>
  <li><a href="#">Item 1 </a></li>
  <li><a href="#">Item 2<!--[if IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul>
      <li><a href="#">Item 2.1</a></li>
      <li><a href="#">Item 2.2
        <!--[if IE 7]><!--></a><!--<![endif]-->
        <!--[if lte IE 6]><table><tr><td><![endif]-->
        <ul>
          <li><a href="#">Item 2.2.1</a></li>
          <li><a href="#">Item 2.2.2</a></li>
          <li><a href="#">Item 2.2.3</a></li>
        </ul>
        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
      </li>
      <li><a href="#">Item 2.3</a></li>
    </ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
  </li>
  <li><a href="#">Item 3</a></li>
</ul>

_______________________________________________
TYPO3-german mailing list
TYPO3-german at lists.netfielders.de
http://lists.netfielders.de/cgi-bin/mailman/listinfo/typo3-german