Vertikales Pull-down Menü für TYPO3

WAM
TYPO3 Codeschnipsel
Donnerstag - 1 . Juli . 2010

In diesem Tutorial wird gezeigt, wie Ihr ein J-Query basierendes Pull-down Menü, in Eure TYPO3 Seite einbauen könnt. Vorteil an diesem Menü ist es sieht ansprechend aus und klappt beim Rollover gleich die Unterpunkte aus. Das es auch einen Nachteil gibt will ich nicht verheimlichen. Sollte Java deaktiviert sein, rollt hier nichts mehr. Darum solltet Ihr so ein Menü nur auf der Startseite anbauen und auf den Unterseiten ein alternatives oder Zusatz Menü mit CSS. So sind Eure Unterseiten, die im Normalfall nur über den Pull-down erreichbar sind, auch über das alternativ Menü wählbar.

Die Angabe für das TS:
[sourcecode language=”matlab”]
subparts.nav = HMENU

subparts.nav {

# Hier schreibt Ihr die Seiten ID rein die nicht gezeigt werden sollen.

excludeUidList = 1,2,3,

wrap = <ul class=”topnav”> | </ul>

# Die erste Ebene:

1 = TMENU

1.expAll = 1

1.NO.wrapItemAndSub = <li> | </li>

# 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

3.wrap = navcontent

2.wrap = <ul class=”subnav”> | </ul>

2.NO.wrapItemAndSub = <li> | </li>

# CUR-Zustand der zweiten Ebene:

2.CUR = 1

2.CUR < .2.NO

2.CUR.ATagParams = class=”active”

}
[/sourcecode]

Im zweiten Schritt sollte man die HTML-Vorlage bearbeiten, so das TYPO 3 das Menü auch Platzieren kann.

HTML Code:
[sourcecode language=”php”]
<div class=”nav”>
<ul class=”topnav”>
<li><a href=”#”> </a>
<ul class=”subnav”>
<li><a href=”#”> </a></li>
</ul>
</li>
</ul>
</div>

[/sourcecode]

Nun habt Ihr das Menü schon fast fertig. Es fehlen noch zwei schritte, dass alles läuft. Im nächsten Schritt sollten wir uns der CSS-Datei zuwenden, dass alles auch richtig dargestellt wird.

Angaben für das Menü in der CSS Eures Templates:
[sourcecode language=”css”]
.nav{

position:absolute;

width:940px;

margin:273px 0 0 30px;

float:right;

}

ul.topnav {

list-style: none;

padding: 0 0px;

margin: 0;float: left;

width: 940px;

background: #222;

font-size: 1.2em;

background: url(topnav_bg.gif) repeat-x;

}

ul.topnav li {

float: left;margin: 0;

padding: 0 15px 0 0;

position: relative;

}

ul.topnav li a{

padding: 10px 5px;

color: #fff;display:

block;text-decoration:

none;float: left;

}

ul.topnav li a:hover{background: url(../img/topnav_hover.gif) no-repeat center top;

}

ul.topnav li span {

width: 17px;

height: 35px;

float: left;

background: url(../img/subnav_btn.gif) no-repeat center top;

}

ul.topnav li a.active { background: url(../img/active.jpg);color:#202020;

}

ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;

}

ul.topnav li ul.subnav {

list-style: none;

position:absolute;

left: 0; top: 35px;

background: #333;

margin: 0;

padding: 0;

display: none;

float: left;

width: 170px;

border: 1px solid #111;

}

ul.topnav li ul.subnav li{

margin: 0; padding: 0;

border-top: 1px solid #252525;

border-bottom: 1px solid #444;

clear: both;

width: 170px;

}
[/sourcecode]
Da nun auch die Position und das Aussehen bestimmt, ist könnt Ihr das Menü schon ohne Pull-down Funktion betrachten. Damit Ihr aber nun auch das, Sliden bekommt, müsst Ihr eine Java-Datei öffnen oder erstellen und die Anweisungen einbauen.

Als Erstes solltet Ihr aber noch im Header Bereich des TS diesen Link einfügen :
[sourcecode language=”java”]
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js” language=”JavaScript”></script>
[/sourcecode]
JS Anweisung zum Sliden:
[sourcecode language=”java”]
$(document).ready(function(){

$(“ul.subnav”).parent().append(“<span></span>”); //Only shows drop down trigger when js is enabled – Adds empty span tag after ul.subnav

$(“ul.topnav li span”).hover (function() { //When trigger is clicked…

//Following events are applied to the subnav itself (moving subnav up and down)

$(this).parent().find(“ul.subnav”).slideDown(‘fast’).show(); //Drop down the subnav on click

$(this).parent().hover(function() {

}, function(){

$(this).parent().find(“ul.subnav”).slideUp(‘slow’); //When the mouse hovers out of the subnav, move it back up

});

//Following events are applied to the trigger (Hover events for the trigger)

}).hover(function() {

$(this).addClass(“subhover”); //On hover over, add class “subhover”

}, function(){ //On Hover Out

$(this).removeClass(“subhover”); //On hover out, remove class “subhover”

});

});
[/sourcecode]
Das war es schon.

Wenn Ihr das Menü mit special anstatt dem excludeUidList müsst Ihr dies natürlich im TS angeben.

Das würde dann so aussehen:

subparts.nav = HMENU

subparts.nav {

special = list

special.value = 14,12,9,21 # Die Menü-ID die Ihr haben wollt

wrap = <ul class=”topnav”> | </ul>

IM BEZUG:

Vorherigen Beitrag

Nächster Beitrag

Vertikales Pull-down Menü für TYPO3