preloder

Like Skype CSS Menü in TYPO3

Like Skype CSS Menü in TYPO3

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.

intro_image_like_new

 

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

KOMMENTAR (1) “Like Skype CSS Menü in TYPO3”

Schreibe einen Kommentar

Über WAM

Die WAM - Webagentur-Meerbusch. Die Typo3 und Wordpress Agentur aus Meerbusch bei Düsseldorf in NRW. Ganz nach dem Motto: Wenn man es ins Netz stellen kann, können wir es bauen. Und das schon seit über 10 Jahren.

-
Das Archiv
Werbung
Haendlerbund_Leistungen_265x221_animiert