HMENU: menüpunkt (1.menüebene) soll hover-eigenschaft behalten wenn mauszeiger auf 2. menuebene geht

[kornwolf]

Ich hoffe ich habe mich im Titel einigermaßen plausibel ausgedrückt.

Der Menüpunkt der 1. Menüebene wird umrahmt wenn er den mauszeiger erhält und die 2. menüebene klappt auf.
Wenn ich jetzt mit dem mauszeiger auf die 2. menüebene gehe verliert die 1. menüebene die hover-eigenschaft und ist nicht mehr umrahmt.

Das kann man doch sicherlich irgendwie programmieren das der jeweilige menüpunkt aus der 1. menüebene irgenwie noch aktiv bleibt und die eigenschaft für den hintergrund behält.

Hier die Seite: ---www.a-prof.de---


Vielen Dank und viele Grüße

Dieter

[Steinvirus]

Hallo Dieter,

das ganze ist meiner ansicht nach ein CSS problem

ich mache das immer so:

das ist einmal der befehl wenn die maus auf dem menüpunkt ist

#name der id a:hover {
    background-color: #ffffff;
    color: #ff0000;
}

und einmal der befehel wenn die runter ist und der menüpung aktiv sein soll

#name der id  a#current {
    background-color: #ffffff;
    color: #000000;
}

das ganze geht natürlich auch mit class


steini

[kornwolf]

Danke steini für deinen hinweis. Aber aktiv oder current eigenschaft meinte ich nicht.

Ich möchte, dass dieser Level1-Punkt solange als hover behandelt wird, wie ich im Slidedown-Menü navigiere bzw. ich ein anderes Menü öffne.

Dadurch sieht die Menüstruktur einer Registerkarte ähnlich so wie z.B. hier
auf der Mercedes-Seite: --http://www.mercedes-benz.de--

Vielleicht noch eine Idee wie das geht?

Dieter

[etux]

Da Du Deine Navi mit JavaScript steuerst, kann ich Dir dabei leider nicht helfen. Würdest Du die Navi aber mit CSS umsetzen wollen, so besteht der „Trick“ darin, das Aufklappen und folgende Hover-Zustände an die „li“-s der ersten Ebene an zu binden. JavaScript brauchst Du dann nur für IE 5.0-5.5. Extra Zustands-Klassen wie „current“ usw. brauchst Du auch nicht. Was Du allerding brauchst sind mit „optionSplit“ definierte „class“ oder „id“ für die „li“-s der ersten Ebene und „id“-s oder „class“ für die „body“-Tags. Das gibt Dir auch die Möglichkeit mit „strong“ den aktuellen Link zu ersetzen, bzw. ein „em“ um den Link zu setzen, wenn ein Link der zweiten Ebene gewählt wird.
Hier kannst Du ein Beispiel sehen (statisch):
statisch
Oder auf meine Typo3-Website (noch im Bau):
Typo3
Grüße: Emil

[kornwolf]

Danke Emil für deine Idee.

Stimmt schon, die tmenu_layers mischen mir auch zuviel javascript ein.
Ist aber ansonsten für die Menusteuerung recht einfach zu definieren.
Ich dachte mit der lockPosition in der Menusteuerung wäre mein Problem
gelöst. Iss ess aba leida nich !!

Kannst du mal deinen TypoScript Setup Code für dein Beispiel-Menu
hier posten. Stelle dann vielleicht doch auch so die Menusteuerung um.

Viele Grüsse

Dieter

[etux]

Hallo kornwolf,
das finde ich ziemlich lustig. Gerade wollte ich ein HowTo hier
TYPO3.net - Das deutsche TYPO3-Portal:Wie wird ein Menü als Punkteliste gemacht?
posten. Habe es aber vorläufig sein lassen, da es für mich noch nicht nach fertig aussieht.
Was als HowTo nicht zu gebrauchen wäre, wäre vielleicht als Antwort auf Deine Frage/Bitte aber gut genug. Ich poste also hier das, was für das TYPO3.net - Das deutsche TYPO3-Portal: Forum gedacht war. Für Kritik/Bewertung wäre ich dankbar.
Grüße: Emil

HowTo-Versuch:

Wir wollen eine verschachtelte (zwei Ebenen), XHTML 1.0 Strict konforme Listennavigation erzeugen nach dem folgenden Schema:

<ul>
	<li><a>A</a>
		<ul>
			<li><a>Aa</a></li>
			<li><a>Ab</a></li>
			<li><a>Ac</a></li>
		</ul>
	</li>
	<li><a><em>B</em></a>
		<ul>
			<li><strong>Ba</strong></li>
			<li><a>Bb</a></li>
			<li><a>Bc</a></li>
			<li><a>Bd</a></li>
		</ul>
	</li>
	<li><a>C</a>
		<ul>
			<li><a>Ca</a></li>
			<li><a>Cb</a></li>
			<li><a>Cc</a></li>
			<li><a>Cd</a></li>
		</ul>
	</li>
	<li><a>D</a>
		<ul>
			<li><a>Da</a></li>
			<li><a>Db</a></li>
			<li><a>Dc</a></li>
		</ul>
	</li>
</ul>

Da ein Link nicht auf die gerade aktuelle Seite zeigen sollte, wird der Link der aktuellen Seite herausgenommen und mit einem strong-Tag ersetzt. Bei einem Link aus der zweiten Ebene wird zusätzlich der übergeordnete Link der ersten Ebene mit einem em-Tag gezeichnet.
So ist für den User sein momentaner Standort auch ohne CSS erkennbar.

XHTML Template (TemplaVoila):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta http-equiv="Content-Language" content="de" />
	<meta name="language" content="de" />
	<title>Navi Template (TemplaVoila)</title>
</head>

<body>

	<ul id="mainNav">mainNav</ul>

</body>

</html>

TypoScript Object Path -> lib.mainnav
Mapping rules -> ul:INNER


TypoScript (Setup):

# Hauptnavigation
lib.mainnav = HMENU
lib.mainnav {
	entryLevel = 0
	1 = TMENU
	1 {
		noBlur = 1
		expAll = 1
		NO = 1
		NO {
			wrapItemAndSub = <li>|</li>
			}
		CUR = 1
		CUR {
			wrapItemAndSub = <li>|</li>
			doNotLinkIt = 1
			ATagBeforeWrap = 1
			linkWrap = <strong>|</strong>
			}
		ACTIFSUB = 1
		ACTIFSUB {
			wrapItemAndSub = <li>|</li>
			ATagBeforeWrap = 1
			linkWrap = <em>|</em>
			}
		}
	2 = TMENU
	2 {
		noBlur = 1
		wrap = <ul>|</ul>
		NO = 1
		NO {
			allWrap = <li>|</li>
			}
		CUR = 1
		CUR {
			ATagBeforeWrap = 1
			linkWrap = <li><strong>|</strong></li>
			doNotLinkIt = 1
			}
		}
	}

Um auch aufwendige CSS-Gestaltung der Navigation zu ermöglichen, können wir (wie hier im Forum mehrfach erklärt) die verschiedene Zustände der Listenpunkte durch TypoScript mit „class“ oder „id“ ausstatten lassen.
Zur Abwechselung vergeben wir den Listen der ersten Ebene im Beispiel hier „id“-s (mit Hilfe der „OptionSplit“). Dazu bekommen die body-Tags der ersten Seiten-Ebene „class“-en.

# Hauptnavigation
lib.mainnav = HMENU
lib.mainnav {
	entryLevel = 0
	1 = TMENU
	1 {
		noBlur = 1
		expAll = 1
		NO = 1
		NO {
			wrapItemAndSub = <li id="startseite">|</li>||<li id="portfolio">|</li>||<li id="xhtml_css">|</li>||<li id="typo3_cms">|</li>
			}
		CUR = 1
		CUR {
			wrapItemAndSub = <li id="startseite">|</li>||<li id="portfolio">|</li>||<li id="xhtml_css">|</li>||<li id="typo3_cms">|</li>
			doNotLinkIt = 1
			ATagBeforeWrap = 1
			linkWrap = <strong>|</strong>
			}
		ACTIFSUB = 1
		ACTIFSUB {
			wrapItemAndSub = <li id="startseite">|</li>||<li id="portfolio">|</li>||<li id="xhtml_css">|</li>||<li id="typo3_cms">|</li>
			ATagBeforeWrap = 1
			linkWrap = <em>|</em>
			}
		}
	2 = TMENU
	2 {
		noBlur = 1
		wrap = <ul>|</ul>
		NO = 1
		NO {
			allWrap = <li>|</li>
			}
		CUR = 1
		CUR {
			ATagBeforeWrap = 1
			linkWrap = <li><strong>|</strong></li>
			doNotLinkIt = 1
			}
		}
	}

Um das ganze testen und an individuellen Anforderungen anpassen zu können – bauen wir uns ein lauffähiges Template. Dazu brauchen wir:

Html-Datei (index.html) :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
	<title>Navigation Template</title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta name="Content-Language" content="de" />
	<link rel="stylesheet" type="text/css" href="screen.css" media="screen" />
	<!--[if lte IE 6]> <style type="text/css" media="screen"> @import "ie_screen.css"; </style> <![endif]-->
</head>

<body class="portfolio">

	<ul id="mainNav">
		<li id="startseite"><a href="#">Home</a>
			<ul>
				<li><a href="#">Kontakt</a></li>
				<li><a href="#">Impressum</a></li>
				<li><a href="#">Sitemap</a></li>
			</ul>
		</li>
		<li id="portfolio"><a href="#"><em>Portfolio</em></a>
			<ul>
				<li><strong>portfolio 1</strong></li>
				<li><a href="#">portfolio 2</a></li>
				<li><a href="#">portfolio 3</a></li>
				<li><a href="#">portfolio 4</a></li>
			</ul>
		</li>
		<li id="xhtml_css"><a href="#">XHTML CSS</a>
			<ul>
				<li><a href="#">xhtml css 1</a></li>
				<li><a href="#">xhtml css 2</a></li>
				<li><a href="#">xhtml css 3</a></li>
				<li><a href="#">xhtml css 4</a></li>
			</ul>
		</li>
		<li id="typo3_cms"><a href="#">Typo3 CMS</a>
			<ul>
				<li><a href="#">typo3 1</a></li>
				<li><a href="#">typo3 2</a></li>
				<li><a href="#">typo3 3</a></li>
			</ul>
		</li>
	</ul>

</body>
</html>

CSS-Satei für alle Browser (screen.css) :

@charset "utf-8";
* { margin: 0; padding: 0; border: none; list-style: none; }
em, strong { font-style: normal; font-weight: normal; }
html {
	width: 100%;
	font-size: 100.01%;
}
body {
	width: 100%;
	font-family: Helvetica, Arial, sans-serif;
	font-size: small;
	line-height: 1.4;
	color: #333;
	background: #e8e4d8;
}

/* mainNav */
/* erste Ebene */
ul#mainNav {
	position: relative;
	padding-top: 4em;
	width: 100%;
	background: #464646;
}
ul#mainNav li {
	display: inline;
}
ul#mainNav li#startseite {
	margin-left: .6em;
}
ul#mainNav a,
ul#mainNav strong {
	display: -moz-inline-box;
	display: inline-block;
	margin-right: .4em;
	padding: .5em .4em;
	text-transform: uppercase;
	text-decoration: none;
	border: .1em solid #8b8473;
	background: #bfb8a8;
}
ul#mainNav a,
ul#mainNav em,
ul#mainNav strong {
	font-weight: bold;
}
ul#mainNav a {
	color: #69655c;
	
}
ul#mainNav a,
ul#mainNav em,
ul#mainNav strong {
	font-weight: bold;
}
ul#mainNav li:hover a,
ul#mainNav strong {
	color: #bfb8a8;
	background: #69655c;
}
.index ul#mainNav li#startseite a,
.portfolio ul#mainNav li#portfolio a,
.xhtml_css ul#mainNav li#xhtml_css a,
.typo3_cms ul#mainNav li#typo3_cms a {
	color: #69655c;
	border-bottom-color: #e8e4d8;
	background: #e8e4d8;
}

/* zweite Ebene */
ul#mainNav ul {
	position: absolute;
	left: -9999em;
	top: 100%;
	width: 100%;
	padding-top: 1.2em;
	background: #e8e4d8;
}
.index ul#mainNav li#startseite ul,
.portfolio ul#mainNav li#portfolio ul,
.xhtml_css ul#mainNav li#xhtml_css ul,
.typo3_cms ul#mainNav li#typo3_cms ul {
	left: 0;
	z-index: 10;
}
ul#mainNav li:hover ul {
	left: 0;
	z-index: 20;
}
ul#mainNav ul a,
ul#mainNav ul strong {
	padding: 0 .3em 0 .4em;
	font-size: .85em;
	border: none;
	background: transparent;
}
ul#mainNav li:hover ul a {
	background: transparent;
}
ul#mainNav ul a,
ul#mainNav li:hover ul a,
.index ul#mainNav li#startseite ul a,
.portfolio ul#mainNav li#portfolio ul a,
.xhtml_css ul#mainNav li#xhtml_css ul a,
.typo3_cms ul#mainNav li#typo3_cms ul a {
	color: #69655c;
}
ul#mainNav li:hover ul a:hover,
ul#mainNav ul a:hover,
ul#mainNav ul strong,
.index ul#mainNav li#startseite ul a:hover,
.portfolio ul#mainNav li#portfolio ul a:hover,
.xhtml_css ul#mainNav li#xhtml_css ul a:hover,
.typo3_cms ul#mainNav li#typo3_cms ul a:hover {
	color: #121110;
}

CSS-Datei für IE < 7 (ie_screen.css) :

@charset "utf-8";
body {
	behavior: url(csshover.htc);
}
body {
	font-size: x-small;
	f\ont-size: small;
}
ul#mainNav {
	padding-left /**/: .6em;
}
ul#mainNav li#startseite {
	margin-left: 0;
	marg\in-left: .6em;
}
ul#mainNav a,
ul#mainNav strong {
	position: relative;
	z-index: 30;
	height /**/: 1%;
}
ul#mainNav  a {
	margin-bottom: -.2em;
	margin-bottom/**/: 0;
}
ul#mainNav  ul,
ul#mainNav  ul li {
	display: inline;
	zoom: 1;
	height /**/: 1px;
}
ul#mainNav  ul a {
	margin-bottom: 0;
}

CSS-Template zum Anschauen:
Menü - flüssige Breite

Die csshover.htc-Datei sorgt dafür, dass die IEs kleiner 7 "hover" auch bei nicht a-Elementen interpretieren können.
Peter Nederlof hat zu der Datei eine umfassende Dokumentation geschrieben.
Whatever:hover
Kurze Erklärung zu der CSS-Formatierung der Navigation:
Die Listenelemente mit „float“ horizontal einzuordnen wäre viel einfacher und würde mehr Gestaltungsfreiheit und -genauigkeit bieten. Im Beispiel hier (und auf meine Website) hat die Navigation (ul#mainNav) eine Breite in Prozent. Die zweite Ebene (ul#mainNav ul) wird an die erste Ebene aufgerichtet und ist immer so breit wie sie („width: 100%;“). Nur in IE5.0 un IE5.5 nicht. Daher kommt es bei den Beiden, dass die Listenelemente die Breite der „ul“ bestimmen und die 100% nicht erreicht werden. So eine Art shrink-to-fit Effekt.
Im Falle einer festen Breite (px, em) ist es also nicht notwendig die Beispiel-CSS zu verwenden.

Achtung: Die Navigation hier und die auf meine Website unterscheiden sich in einige Deteils!

EDIT: In dem statischen Beispiel funktioniert das Ganze auch so, wie es ist. Sobald man aber der ersten Navi-Ebene neue/andere Eigenschaften vergibt, gelten sie auch für die zweite Ebene. Man muss sie also ggf. für die zweite Ebene wieder rückgängig machen überschreiben).


Viel Spaß!

EDIT und OT: Ich sehe gerade, dass ich just2b eine Antwort noch schuldig bin:
http://www.typo3forum.net/forum/gmen...bschalten.html
@just2b: Danke und Grüße. Emil