[TYPO3-german] Mouseover H-Menu

Christian Wolff chris at connye.com
Mon Nov 1 14:25:26 CET 2010


-----BEGIN PGP SIGNED MESSAGE-----
Hash: SHA1

Am 01.11.2010 10:41, schrieb Hessix:
> Sers Christian,
> 
> dein Verständnis ist genau richtig.
> Aber irgendwie verstehe ich deinen Vorschlag noch nicht ganz.
> Was meinst du mit einem ul Menu?
> Wie per css ausblenden? FÜr den Mouseover brauche ich ja alle Menus der
> 2. Ebene wieder...
> 
> Gruß Lars
> 
Hi Lars,
du generierst ein html das ungeführ so aussieht:

HTML:
<ul id="menu">
  <li>Ebene1 A
    <ul>
       <li>Ebene2 A A</li>
       <li>Ebene2 A B</li>
       <li>Ebene2 A C</li>
    </ul>
  </li>
  <li class="act">Ebene1 B
    <ul>
       <li>Ebene2 A A</li>
       <li>Ebene2 A B</li>
       <li>Ebene2 A C</li>
    </ul>
  </li>
  <li>Ebene1 C
    <ul>
       <li>Ebene2 A A</li>
       <li>Ebene2 A B</li>
       <li>Ebene2 A C</li>
    </ul>
  </li>
</ul>


CSS:

/* koordinaten system setzten*/
ul#menu {position:relative}

/* Submenüs stylen (ausgeblendet)*/
ul#menu ul {
	position:absolute;
	top:30px;
	left:0px;
	width:900px;
	height:30px;
	Z-index:10;
	background:#fff;
	display:none;
}

/* Actives menü einblenden*/
ul#menu li.act ul {
	display:block;
}

/* im Hover Status einblenden */
ul#menu li:hover ul {
	display:block;
	z-index:20; /* z-index setzten damit das
	menü auf jedenfall dem act menü gezeigt wird.*/
}

html und css ist jetzt einfach mal so in die mail getippt kann also
tippfehler enthalten. ältere IE's unterstützen den :hover status nur auf
links da muss man mit javascript nachhelfen.

gruss chris

- -- 
Christian Wolff // Berlin
http://www.connye.com

some projects:
http://richtermediagroup.com | http://titanic.de | http://keyopinions.info
-----BEGIN PGP SIGNATURE-----
Version: GnuPG v1.4.10 (MingW32)

iEYEARECAAYFAkzOv8YACgkQIcCaXPh/JHESQgCg2dXJdTXqjSKAa/raWqwrkjke
aSYAnjojQalwBeZFCmcq/o2y8iO2s2cP
=lnZQ
-----END PGP SIGNATURE-----


More information about the TYPO3-german mailing list