Menus en Typoscript

De I-Vortex

Aquí algunos ejemplos del uso de Typoscript para creación de menús dinámicos en Typo3.


Tabla de contenidos

[editar] Menu basico de 3 niveles

Ejemplo de menú dinámico de 3 niveles de profundidad, esto tiene que ir de la mano con los estilos del CSS: 

 lib.mainMenu = HMENU
 lib.mainMenu.entryLevel = 0
 lib.mainMenu.wrap = <ul>|</ul>	
 lib.mainMenu.1 = TMENU
 lib.mainMenu.1.NO {
   allWrap = <li>|</li>
   ATagParams = class="menu1-no"
 }
 lib.mainMenu.1.ACT = 1
 lib.mainMenu.1.ACT {
   allWrap = <li>|</li>
   ATagParams = class="menu1-act"
 }
 lib.mainMenu.2 = TMENU
 lib.mainMenu.2.NO {
   allWrap = <li> |</li>
   ATagParams = class="menu2-no"
 }
 lib.mainMenu.2.ACT = 2
 lib.mainMenu.2.ACT {
   allWrap = <li>|</li>
   ATagParams = class="menu2-act"
 }
 lib.mainMenu.3 = TMENU
 lib.mainMenu.3.NO {
   allWrap = <li>|</li>
   ATagParams = class="menu3-no"
 }	
 lib.mainMenu.3.ACT = 3
 lib.mainMenu.3.ACT {
   allWrap = <li>|</li>
   ATagParams = class="menu3-act"
 }

[editar] Menu desplegable basado en tablas 

##----Top Menu [begin]
page.includeLibs.gmenu_layers = media/scripts/tmenu_layers.php
lib.topmenu  = HMENU
lib.topmenu.1 = TMENU_LAYERS
lib.topmenu.1.wrap = <table border=0 width=470><tr>|</tr></table>
lib.topmenu.1 {
  layerStyle = position:absolute; VISIBILITY:hidden; 
  lockPosition = y
  expAll=1
  topOffset=28
  relativeToTriggerItem = 2
  NO {
    allWrap = <td class="menu1-no">|</td>
  }
  ACT =1
  ACT.allWrap = <td class="menu1-act">|</td>
}
lib.topmenu.2 = TMENU_LAYERS
lib.topmenu.2.wrap = <table class="menu2" border="0">|</table>
lib.topmenu.2 {
  layerStyle = position:absolute; VISIBILITY:hidden;
  lockPosition = x
  expAll=1
  yPosOffset=0
  lockPosition_addSelf = 1
  relativeToTriggerItem = 1
  relativeToParentLayer = 1
  leftOffset=119
  NO {
    allWrap = <tr><td class="menu2-no">|</td></tr>
  }
  ACT = 1
  ACT.allWrap = <tr><td class="menu2-act">|</td></tr>
}
lib.topmenu.3 = TMENU
lib.topmenu.3.wrap = <table class="menu3" border="0">|</table>
lib.topmenu.3{
NO {
  allWrap = <tr><td class="menu3-no">|</td></tr>
}
ACT = 1
  ACT.allWrap = <tr><td class="menu3-act">|</td></tr>
}
##----Top Menu [end]


[editar] Breadcrumb Menu 

lib{
   breadcrumb = HMENU
   breadcrumb.special = rootline
   breadcrumb.special.range = 0
   breadcrumb.1 = TMENU
   breadcrumb.1.NO.linkWrap =  | > |*||*| | 
   breadcrumb.1.CUR = 1
   breadcrumb.1.CUR.doNotLinkIt = 1
}

[editar] Submenu: Solo paginas hijas (hasta 2 niveles)

lib
{
   ##----Sub Menu [SUB]----
   submenu = HMENU
   submenu.special = directory
   submenu.special.value.field = pages
   submenu.1 = TMENU
   submenu.1.expAll = 1
   submenu.1.wrap = <ul>|</ul>
   submenu.1.NO.allWrap = <li>|</li>
   submenu.2 = TMENU
   submenu.2.NO.allWrap = <li>|</li>
   submenu.2.NO.ATagParams = class="child"
}

[editar] Menu desplegable con CSS (2 niveles) 

lib.mainmenu = HMENU
lib.mainmenu.entryLevel = 0
lib.mainmenu {
   wrap = <ul id="nav" class="lev1">|</ul><div class="leaf"><img alt="" src="{$file.leaf}"/></div>
   1 = TMENU
   1.expAll = 1
   1.NO.wrapItemAndSub = <li class="lev1_li">|</li>
   1.ACT = 1
   1.ACT.wrapItemAndSub = <li>|</li>
   1.ACT.ATagParams = class="current"
   2 = TMENU
   2.wrap = <ul class="lev2">|</ul>
   2.NO.allWrap = <li>|</li>
   2.ACT = 1
   2.ACT.allWrap = <li>|</li>
   2.ACT.ATagParams = class="current"
}

CSS Normal: 

.main_menu{
	position: relative;
	padding-bottom: 68px;
}
.main_menu ul{ padding: 0; 	margin: 0;	}
.main_menu li{
	list-style-type: none;
}
.main_menu ul.lev1 li{
	position: relative;
	margin-top: 10px;
}
.main_menu ul.lev1 li a{
	padding: 2px 10px 2px 55px;
	background: transparent url(../images/bullet_right.png) 25px no-repeat;
	color: #FDF9EA;
	font-weight: bold;
	display: block;
	width: 205px;
	
}
.main_menu ul.lev1 li a:hover{
	background-color: #4D3D25;
}
	.main_menu ul.lev2{
		position: absolute;
		top: 0;
		left: -170px;
		z-index: 100;
		display: none; 
		width: 170px;
	}
	.main_menu ul.lev1 li:hover ul.lev2, .main_menu ul.lev1 li.over ul.lev2{
		display: block;
	}
	.main_menu ul.lev2 li{
		margin: 0;
	}
	.main_menu ul.lev2 li a{
		display: block;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 0.85em;
		padding: 2px;
		background: #4D3D25;	
		width: 164px;
		font-weight: normal;
		border-top: 1px solid #b1a28e;
		border-left: 1px solid #b1a28e;
		border-bottom: 1px solid #332819;
		border-right: 1px solid #332819;
	}
	.main_menu ul.lev2 li a:hover{
		background-color: #818E6F;
	}

CSS para Explorer 6 (adicionalmente a lo anterior). Se puede utilizar etiquetas asi en el header: 

<!--[if lte IE 6]>
<link href="css/estilo.css" rel="stylesheet" type="text/css" />
<![endif]-->

.main_menu ul.lev1 li a{
	background: transparent url(../images/bullet_right.gif) 25px no-repeat;
	width: 270px;
	float: right;
}
.main_menu ul.lev1 li a:hover{
	background-color: #4D3D25;
}
	.main_menu ul.lev2 {
		clear: right;
	}
	.main_menu ul.lev2 li{
		float: left;
	}
	.main_menu ul.lev2 li a{
		background: #4D3D25;	
		width: 170px;
	}
	.main_menu ul.lev2 li a:hover{
		background-color: #818E6F;
	}

[editar] Ver más

Obtenido de "http://wiki.ivortex-sac.com/info/Menus_en_Typoscript"
Herramientas personales