Zum Inhalt springen

Probleme bei horizont. CSS-Menü

Erstellt am 9. September 2007 · 2 Antworten · letzte Antwort am 13. September 2007

Tags: HTML & CSS, Frage

Organic ·

Hallo Forum,

ich bin gerade dabei das http://www.cssplay.co.uk/menus/flyout_horizontal.html von Stu Nicolls in Typo3 umzusetzen, komme aber irgendwie nicht weiter.
Das Menü funktioniert im IE 7 und FF, doch leider nicht im IE 6.

Vielleicht kann mir ja jemand einen Tipp geben.

Code für den Header:

page.headerData.20 = TEXT
page.headerData.20.value (
<!--[if lte IE 6]>
<link rel="stylesheet" media="all" type="text/css" href="fileadmin/css/flyout_h_ie.css" />
<![endif]-->
)

Code fürs Menü:

#Hauptnavigation
MENU = HMENU
MENU {
	1 = TMENU
        1 {
            wrap = <ul>|</ul>
            expAll = 1
            noBlur = 1    
            NO.ATagTitle.field = subtitle//title
            NO.wrapItemAndSub = <li>|</li>
                        
            IFSUB = 1
            IFSUB {
                   wrapItemAndSub = <li>|</li>
                   ATagParams = class="hide"
                   }
           }
        
        2 = TMENU
        2 {
           wrap = <!--[if IE 6]><table><tr><td><![endif]--><ul> | </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
           expAll = 1
           noBlur = 1
           
           NO.ATagTitle.field = subtitle//title
           NO.wrapItemAndSub = <li> | </li>                   
           }
	}

Ich muss irgendwie zwischen "2 {wrap = <!--[if IE 6]>" und "<table><tr><td><![endif]--><ul>..." noch einmal einen a href reinbekommen.

So soll es aussehen:

<div class="menu">
	<ul>
		<li><a class="hide" href="#">Home</a></li>
		<li><a class="hide" href="#">Nagelstudio</a>
		<!--[if lte IE 6]>
		<a href="#">Nagelstudio
		<table><tr><td>
		<![endif]-->
		<ul>
			<li><a href="#" title="Maniküre">Maniküre</a></li>
			<li><a href="#" title="Verlängerung">Verlängerung</a></li>
			<li><a href="#" title="Verstärkung">Verstärkung</a></li>
			<li><a href="#" title="Nail Art">Nail Art</a></li>
		</ul>
		<!--[if lte IE 6]>
		</td></tr></table>
		</a>
		<![endif]-->
		</li>
		<li><a class="hide" href="#">Fuss-French</a></li>
		<li><a class="hide" href="#">Fachfusspflege</a>
		<!--[if lte IE 6]>
		<a href="#">Fachfusspflege
		<table><tr><td>
		<![endif]-->
		<ul>
			<li><a href="#" title="#">Produkte</a></li>
			<li><a href="#" title="#">Preise</a></li>
			<li><a href="#" title="#">Gutscheine</a></li>
			</ul>
		<!--[if lte IE 6]>
		</td></tr></table>
		</a>
		<![endif]-->
		</li>
		<li><a class="hide" href="#">Preise</a>
		<!--[if lte IE 6]>
		<a href="#">Preise
		<table><tr><td>
		<![endif]-->
			<ul>
				<li><a href="#" title="#">Gutscheine</a></li>
			</ul>
		<!--[if lte IE 6]>
		</td></tr></table>
		</a>
		<![endif]-->
		</li>
		<li><a class="hide" href="#">Öffnungszeiten</a></li>
		<li><a class="hide" href="#">Fotoalbum</a></li>
		<li><a class="hide" href="#">Fragen</a></li>
		<li><a class="hide" href="#">Kontakt / Anfahrt</a></li>
		<li><a class="hide" href="#">Impressum</a></li>
	</ul>
</div>

Die URL für Vorschau:
http://nailsworld.wendelken.net

Schon einmal besten Dank im voraus

Gruß
Organic

Schengo ·

Hallo Organic.

Es liegt vielleicht am hover-Befehl. Es ging bei mir erst auch nicht, bis ich diesen FIX für IE eingefügt habe.

Ich habe eine eigene .js-Datei angelegt und die dann im <head> eingefügt:

<!--//--><![CDATA[//><!--

sfHover = function() {
	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

//--><!]]>

Dann musst du natürlich noch die sfhover-Elemente in deiner CSS-Datei deklarieren.

Gruß Schengo

Unbekannter Benutzer ·

Nein, es liegt an dem fehlenden Link, wie Organic schon geschrieben hat.
Such mal hier im Forum, dieses Menü hat schon mal jemand in TS umgesetzt. Aber das ist weder barrierefrei noch standardkonform. Sinnvoller ist doch ein JS gestütztes Drop-Down.

Grüße
Christian