Diesmal ein Codesnippsel für ein Grafisches Listen Menu mit Typoscript für mehrere Levels. Dieses Menu ist lauffähig und natürlich noch ausbaufähig.

// TYPO3 Setup
// mainmenu
lib.mainmenu = HMENU
lib.mainmenu {
entryLevel = 0
1 = GMENU
1 {
useLargestItemY = 1
noBlur = 1
expAll = 0
accessKey = 0
wrap =
<ul>|</ul>
NO = 1
NO {
ATagTitle.field =  subtitle // title // description
allWrap =
	<li>|</li>
XY = [10.w]+4,[10.h]+6
transparentBackground = 1
backColor = #000
10 = TEXT
10 {
text.field = title
offset = 0,16
fontColor = #ffffff
niceText = 0
align	= center
fontFile = fileadmin/templates/fonts/verdanab.ttf
fontSize = 11
}
}
RO < .NO
RO = 1
RO.10 {
fontColor = #78d200
}
ACT < .RO
ACT = 1
ACT.10 {
fontColor = #78d200
fontFile = fileadmin/templates/fonts/verdanab.ttf
}
}
2 < .1
2 = GMENU
2 {
wrap =
<ul class="level2">|</ul>
}
}

Tags: menu, ts, typo3, typoscript

Kategorie typo3 | 0 comments

In meiner neuen Serie werden ich euch alle Möglichen Menüs für Typo3 vorstellen. Diesmal ein Codesnippsel für ein Listen Menu mit Typoscript für mehrere Levels.

// TYPO3 settings
// mainmenu
lib.mainnavi = HMENU
lib.mainnavi {
entryLevel = 0
1 = TMENU
1 {
noBlur = 1
expAll = 1
wrap =
<ul class="mainnavi">|</ul>
NO = 1
NO {
ATagTitle.field = title // description // abstract
ATagBeforeWrap = 1
stdWrap.htmlSpecialChars = 1
wrapItemAndSub =
<li class="first"> |</li>
|*|
<li> |</li>
|*|
<li class="last"> |</li>
}
ACT = 1
ACT {
ATagTitle.field = abstract // description // title
ATagParams = class = "active"
ATagBeforeWrap = 1
stdWrap.htmlSpecialChars = 1
wrapItemAndSub =
<li class="first"> |</li>
|*|
<li> |</li>
|*|
<li class="last"> |</li>
}
}
2 < .1
2 = TMENU
2 {
wrap =
<ul class="level2">|</ul>
}
3 < .1
3 = TMENU
3 {
wrap =
<ul class="level3">|</ul>
}
4 < .1
4 = TMENU
4 {
wrap =
<ul class="level3">|</ul>
}
}

Erklärungen für das Listen Menu:
Mit wrapItemAndSub habt ihr die Möglichkeit den ersten und dem letzten li eine bestimmte CSS Klasse zuzuweisen.
Mit ATagTitle.field könnt ihr den Anchor eine Title Beschreibung die Ihr im Backend einfügt zuweisen.
Mit stdWrap.htmlSpecialChars = 1 wird darauf geachtet das die HTML-Entities richtig erstellt werden.

Tags: menu, typo3, typoscript

Kategorie typo3 | 0 comments

Hier ein Codesnippsel für ein Brotkrumenmenü (Breadcrumb) Menu/Navigation mit Typoscript erstellt. Dieses spezielle Menü zeigt uns an, wo wir uns gerade befinden. Hier noch einige Beispiele wie man Breadcrumb Menus Effektiv einsetzen kann.

// TYPO3 Constants
baseUrlOn = 1
baseUrl = http://www.domain.de

// TYPO3 settings
lib.breadcrumb = HMENU
lib.breadcrumb {
special = rootline
special.range = 1|-1
includeNotInMenu = 0
1 = TMENU
1 {
noBlur = 1
wrap =
<ul>
<li><a href="{$baseUrl}">Home</a> ></li>
|</ul>
NO {
linkWrap =
<li> | ></li>
ATagTitle.field = abstract // title // description
ATagTitle.noTrimWrap = | zur Seite: |
}
CUR = 1
CUR {
linkWrap =
<li> |</li>
doNotLinkIt = 1
}
}
}

includeNotInMenu = 0/1 gilt für Seiten die auf Hide in Menu gestellt sind.

Tags: menu, typo3, typoscript

Kategorie typo3 | 1 comment

A multi-level horizontal CSS menu created using a regular nested HTML list, then turned into a fully functional drop down menu using CSS and a touch of jQuery. Slide-In Menu

Tags: css, jQuery, menu

Kategorie jQuery | 0 comments

Tab navigation has been one of the most fundamental element in any modern web structure. In order to make sure visitors can properly navigate through the website. One of the biggest challenge web designers and developers faced is to integrate a simple and nice tab navigation that not only don’t confuse, but helps visitors easily understand where they should be clicking. Here you can see 50+ clean and sleek CSS Tab-Based Samples

Tags: css, menu, navigation, tab

Kategorie css | 0 comments