Vertikales Pull-down Menü für TYPO3

Vertikales Pull-down Menü für TYPO3

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.

intro_image_Typotut_3_new

 

demo Download

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=“#“>&nbsp;</a>
<ul class=“subnav“>
<li><a href=“#“>&nbsp;</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(„&lt;span&gt;&lt;/span&gt;“); //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:

Teile uns

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
Datenschutz-Übersicht
logo_wam_gray

Hier können Sie einstellen welche Cookies unsere Webseite auf Ihrem Endgerät speichern „Local Storage“ darf. Diese werden beim nächsten besuch auf unserer Webseite reaktiviert. Diese Einstellungen können Sie jederzeit wieder ändern. Dazu klicken Sie unten Links auf das Zahnradsymbol.

Sie können die Cookies nach dem Besuch unserer Webseite natürlich auch bedenkenlos löschen. Dazu müssen Sie die entsprechenden Einstellungen in Ihrem Browser vornehmen.

Unbedingt notwendige Cookies

Unbedingt notwendige Cookies sollten jederzeit aktiviert sein, damit wir deine Einstellungen für die Cookie-Einstellungen speichern können.

  • pll_language .

Cookie zur Verarbeitung eines mehrsprachiges System. Inhalte auf de / en / fr - Ablaufdatum 1 Jahr

  • reCAPTCHA ist ein CAPTCHA-System,

das es Webhostern ermöglicht, zwischen menschlichen und automatisierten Zugriffen auf Websites zu unterscheiden.

Unternehmen, das die Daten verarbeitet
Google Ireland Ltd
Gordon House, Barrow Street
Dublin 4
IE

Datenschutzerklärung

Kategorien verarbeiteter Daten:
KlickpfadSichtbarkeit von Anzeigen messenMausbewegungZeitstempelKlicks auf Anzeigen verfolgenConversion-TrackingIPUhrzeit und Datum verfolgenVerfolgung des BenutzerstandortsBesucherverhaltenUser-AgentSpracheBesuchte WebseiteZeitzone

Rechtsgrundlage für die Datenverarbeitung: Einwilligung (DSGVO 6.1.a)

Datenübertragung außerhalb der EU
Dieser Anbieter kann Ihre personenbezogenen Daten außerhalb des EWR/der EU übertragen, speichern oder verarbeiten. Diese Länder haben möglicherweise nicht das gleiche Datenschutzniveau und die Durchsetzung Ihrer Rechte kann eingeschränkt oder nicht möglich sein.
Cookies, die in Ihrem Browser gesetzt werden Cookiename Beispielwert Ablaufzeit Typ Domain rc::a MjNxdWs3M2o5ZGt­x Persistent Funktion www.google.com

  • Google Fonts

ist ein Dienst, der es Websites ermöglicht, bestimmte Schriftarten für ihre Gestaltung zu verwenden.

Unternehmen, das die Daten verarbeitet
Google Ireland Ltd
Gordon House, Barrow Street
Dublin 4
IE

Datenschutzerklärung

Rechtsgrundlage für die Datenverarbeitung: Einwilligung (DSGVO 6.1.a)

  • Google Maps

ist ein von Google entwickeltes Web-Mapping-Produkt.

Unternehmen, das die Daten verarbeitet
Google Ireland Ltd
Gordon House, Barrow Street
Dublin 4
IE

Datenschutzerklärung

Kategorien verarbeiteter Daten
Betrugserkennung und -präventionSichtbarkeit von Anzeigen messenZeitstempelIPUhrzeit und Datum verfolgenVerfolgen des BenutzergerätsVerfolgung des BenutzerstandortsBesucherverhaltenUser-AgentSpracheBesuchte WebseiteZeitzone

Rechtsgrundlage für die Datenverarbeitung: Einwilligung (DSGVO 6.1.a)

Datenübertragung außerhalb der EU
Dieser Anbieter kann Ihre personenbezogenen Daten außerhalb des EWR/der EU übertragen, speichern oder verarbeiten. Diese Länder haben möglicherweise nicht das gleiche Datenschutzniveau und die Durchsetzung Ihrer Rechte kann eingeschränkt oder nicht möglich sein.

Drittanbieter-Cookies

Diese Website verwendet Google Analytics, um anonyme Informationen wie die Anzahl der Besucher der Website zu sammeln.

Betreibergesellschaft der Google-Analytics-Komponente ist die Google Inc., 1600 Amphitheatre Pkwy, Mountain View, CA 94043-1351, USA.

Name des Cookies: _ga
Inhalte: GA1.2.1970440283.1622365906
Ablaufdatum des Cookies : 1 Jahr - Nur bei Verbindungen zur gleichen Website

Name des Cookies: _gat_gtag_UA_1602708_1
Inhalte: 1
Ablaufdatum des Cookies : 1 Minute - Nur bei Verbindungen zur gleichen Website

Name des Cookies: _gid
Inhalte: GA1.2.1949554392.1622365906
Ablaufdatum des Cookies : 24 Stunden - Nur bei Verbindungen zur gleichen Website

Name des Cookies: chimpstatic
Inhalte: E-Mail Adresse bei Newsletter anmeldung
Ablaufdatum des Cookies : 24 Stunden - Nur bei Verbindungen zur gleichen Website

Zusätzliche Cookies

Diese Website verwendet die folgenden zusätzlichen Cookies:

Name des Cookies: pll_language
Cookie zur Verarbeitung eines mehrsprachiges System. Inhalte auf de / en / fr - Ablaufdatum 1 Jahr - Nur bei sicheren Verbindungen zur gleichen Website

Name des Cookies: moove_gdpr_popup
Cookie zur Speicherung der Funktion der Cookieseinstellung - Ablaufdatum 1 Jahr - Nur bei Verbindungen zur gleichen Website