Like Skype CSS Menü in TYPO3

WAM
TYPO3 Codeschnipsel
Freitag - 25 . März . 2011

Hier wollen wir euch zeigen wie Ihr ein CSS Menü, wie bei „Skype“ auch im TYPO3 verwenden könnt. Das Problem ist das bei diesem CSS Menü das alle Menüpunkte bis in die Dritte ebene Aktiv sein müssen, was TYPO3 anfangs nicht wirklich kapiert.

Als Grundlage dieses Menüs dient die Version von uxrevisions.com. Im Grunde habt Ihr hier schon das komplette Menü, muss aber etwas überarbeitet werden, da es sowohl mit der Suche als auch mit den Menüpunkten im TYPO3 etwas ärger gibt.

Was wir an diesem Menü sehr gut finden, ist das es komplett auf CSS Basis gemacht ist, also keinen Java benötigt. Auch wenn mittlerweile fast jeder Java aktiviert hat, kommt es immer noch vor das User, oder ganz spezielle Administratoren diesen nicht aktivieren wollen. In diesem Fall ist es aber völlig egal, weil es wie gesagt auf CSS-Basis läuft.

Um das im Menü eingebettete Suchfeld auch über TYPO3 steuern zu können muss es raus aus dem Original Code.
[sourcecode language=“html“]
<!– Like Skype–>
<div id=“awesomeHeader“>
<div id=“header“>
<a href=“#“></a>
<!—Suchfeld neue Position–>
<div class=“searchfield“></div>
<!—Suchfeld neue Position–>
<div class=“middleContent“>
<div id=“secure“></div>
<div id=“globalNav“>
<ul>
<li class=“ fourColumns“>
<a href=“#“ >Startseite<span></span></a></li>
<li class=“ fourColumns“>
<a href=“#“ >Zweite Seite<span></span></a>
<div class=“pointer“></div>
<div class=“sub“>
<div class=“menu“>
<ul>
<li class=“title“>Titel der ersten Ebene</li>
<li><a href=“#“ >Subebene 1</a></li>
<li><a href=“ #“ >Subebene 1</a></li>
</ul>
<ul>
<li class=“title“>Titel der zweiten ebene</li>
<li><a href=“#“ >Subebene 2</a></li>
<li><a href=“# „>Subebene 2</a></li>
</ul>
<ul>
<li class=“title“>Titel der dritten Ebene</li>
<li><a href=“#“ >Subebene 3</a></li>
<li><a href=“ #“ > Subebene 3</a></li>
<li><a href=“ #“ > Subebene 3</a></li>
</ul>
</div>
</div>
</li>
<li class=“ fourColumns“>
<a href=“#“ >Titel der nächsten box<span></span></a>
<div class=“pointer“></div>
<div class=“sub“>
<div class=“menu“>
<ul>
<li class=“title“>Titel menü 2</li>
<li><a href=“#“ >Titel menüpunkt 2</a></li>
</ul>
<ul>
<li class=“title“> Titel menü 3</li>
<li><a href=“#“ > Titel menüpunkt 3 </a></li>
<li><a href=“#“ > Titel menüpunkt 3</a></li>
</ul>
<ul>
<li class=“title“> Titel menü 4</li>
<li><a href=“#“ > Titel menüpunkt 4</a></li>
</ul>
</div>
</div>
</li>
<li class=“ fourColumns“>
<a href=“#“ >Normaler Menüpunkt<span></span></a></li>
<li class=“ fourColumns“>
<a href=“# „>Normaler Menüpunkt <span></span></a></li>
</ul>
</div>
</div>
</div>
</div>
<!– Like Skype–>
[/sourcecode]

Für das TYPO3 Setup müssen nun noch alle Menüpunte ansprechbar sein.

[sourcecode language=“xml“]

######################## TOP Menu ##############################

subparts.globalNav = HMENU
subparts.globalNav {
excludeUidList = 34,68,69,52,70,71,72,73
wrap = <ul> | </ul>
# Die erste Ebene:
1 = TMENU
1.expAll = 1
1.NO.wrapItemAndSub =
<li class=“ fourColumns“> | </li>
1.NO.stdWrap.wrap = | <span></span>

# CUR-Zustand der ersten Ebene:
1.CUR = 1
1.CUR < .1.NO
# 1.CUR.ATagParams = class=“active“

# ACT-Zustand der ersten Ebene:
1.ACT = 1
1.ACT < .1.CUR

# Die zweite Ebene:
2 = TMENU
2.expAll = 1
2.wrap =
<div class=“pointer“></div>
<div class=“sub“><div class=“menu“> | </div></div>
2.NO.wrapItemAndSub =<ul><li class=“title“> | </ul>

# CUR-Zustand der zweiten Ebene:
# 2.CUR = 2
# 2.CUR < .2.CUR
# 2.CUR.ATagParams = class=“active“

# Die dritte Ebene:
3 = TMENU
3.expAll = 1
3.wrap =</li> |
3.NO.wrapItemAndSub = <li> | </li>

# CUR-Zustand der dritten Ebene:
# 3.CUR = 3
# 3.CUR < .3.CUR
# 3.CUR.ATagParams = class=“active“
}
}

[/sourcecode]

Und fertig ist das CSS Menü wie bei Skype im TYPO3

Vorherigen Beitrag

Nächster Beitrag

Like Skype CSS Menü in TYPO3