Guia de estilo Sede electronica. Ayuntamiento de Zaragoza

Menu de tercer nivel

.FG8KLQQA8YT.nav li { margin-bottom: unset; } .FG8KLQQA8YT.nav li a { border: unset; } .int_nav_title { position: static !important; font-weight: bold !important; width: auto !important; height: auto !important; margin: 1em 0 !important; border-bottom: 1px solid #ddd !important; padding-bottom: .5em !important; }

Ejemplo:

	
<sede:component fragment="/fragmentos/componentes/menu-tercer-nivel"
mtnColor="#006B87"
type="pills" 
json="{'data' : 
			[
	        	{
	        		'name': 'item',
	        		'link': '...'
	        	},
	        	{
	        		'name': 'item',
	        		'link': '...'
	        		
	        	},
	        	{
	        		'name': 'item',
	        		'link': '...'
	        		
	        	}
  			]
   }">
</sede:component>

Globales
Atributo	Descripción	Valor por defecto
type	Clase Bootstrap - Especificar el tipo de menú	' '
mtnColor	#hex / color - Color que tomará el menú en activo	'#e81b16'
intNav	Boolean - Declarar si la navegación será interna o no	'false'
noTitles	Boolean - Si la navegación es interna podemos definir si mostrar u ocultar los títulos de las tabs	'false'

json[data]
Key	Descripción	Valor por defecto
Name	String - Nombre del enlace del menú	' '
link	URL - Definir la URL del enlace	'#'
contenido	HTML / String - Definir el contenido de la navegación interna. (Se debe declarar intNav)	' '
include	URL - Incluir un fragmento externo, útil para contenido extenso (Se debe declarar intNav)	' '

Se puede utilizar como navegación interna. Para ello, debemos asignarle el atributo intNav y pasar el contenido correspondiente en cada elemento del json. Por ejemplo:

Home

Texto de la home

Menu 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin felis tellus, lacinia sed accumsan non, pretium vel urna. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent felis orci, rhoncus id pulvinar nec, varius ut mi. Ut sed lorem id arcu sagittis iaculis vitae sed augue. Proin quis tellus ac risus aliquet blandit. Cras eleifend venenatis orci a faucibus. Nulla sed egestas nisi. Etiam et placerat eros, ac eleifend risus. Maecenas vel ligula fringilla, placerat erat consequat, vulputate turpis. Quisque sit amet vestibulum felis, eu fringilla enim. Aliquam vehicula ex id blandit tincidunt. Nullam in lacus tempus, tristique risus vel, tristique turpis. Pellentesque ac nisl et nisi vehicula porttitor non vitae dui. Suspendisse sit amet urna eget lectus venenatis interdum. Duis sollicitudin ultrices arcu nec feugiat. Mauris at placerat massa, vitae sodales sem. Aliquam malesuada nibh nec massa posuere ultrices. Praesent eu pulvinar lorem. Pellentesque sed aliquet dolor, vitae maximus eros. Etiam dignissim mattis sapien vel aliquet. Donec ligula velit, tempus id purus quis, faucibus imperdiet tellus. Donec facilisis vel enim vel vestibulum. Proin nec magna pretium magna tincidunt accumsan vitae in orci. Maecenas facilisis, justo at elementum molestie, metus elit molestie nunc, ac imperdiet dui lorem vel nulla. Donec rutrum dignissim tincidunt. Pellentesque arcu neque, rutrum eget semper eget, sollicitudin in ante. Nulla in nibh condimentum, lobortis lacus id, aliquet neque. Nunc sollicitudin dolor dolor, sit amet laoreet enim tincidunt non. Curabitur egestas iaculis finibus. Nam aliquet turpis risus, ac interdum ante dignissim ut. Phasellus vestibulum ornare consectetur. Aliquam imperdiet orci sit amet sem volutpat, vel bibendum tortor luctus. In volutpat risus non purus tempor pellentesque. Cras sodales sapien eu volutpat facilisis. Aenean accumsan vehicula dolor id hendrerit. Fusce rutrum lectus hendrerit massa sollicitudin, eu bibendum magna varius. Phasellus mauris urna, commodo nec enim vitae, tristique suscipit metus. Sed facilisis augue eget sem mollis vulputate. Vestibulum ultrices dolor efficitur lacus vulputate tincidunt. Suspendisse eget orci erat. Morbi at metus nec ante placerat venenatis. Maecenas egestas elit vitae tincidunt ullamcorper. Pellentesque nisi mauris, tristique sed felis ac, varius volutpat nulla. Donec enim ex, suscipit eu venenatis at, imperdiet ut turpis. Sed imperdiet nibh libero, a pulvinar elit hendrerit a. Suspendisse tincidunt urna sem, et pulvinar lorem consequat vel. Suspendisse mattis sapien ac elit ornare, et congue dolor dignissim. Sed sed massa eget sem gravida fermentum. Curabitur molestie vel mauris sed rutrum. Phasellus ut porta tellus, ut mollis nisl. Nunc bibendum sollicitudin urna, eu interdum diam maximus ac. Vestibulum at ultrices dui. Vivamus pretium elit quis hendrerit consequat. Sed tristique lectus sit amet odio dictum consectetur. Sed nec tortor aliquet, sollicitudin turpis vel, semper dui. Proin et urna venenatis, ultrices massa quis, gravida nibh. Donec id laoreet arcu. Etiam at ultrices tellus. Sed elementum sapien nec quam luctus suscipit non ac elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vestibulum a ligula purus. Curabitur auctor consectetur eros a lacinia. Nulla auctor finibus quam id dapibus. Nullam posuere arcu sed lectus ullamcorper sollicitudin. Fusce aliquam, massa a dapibus faucibus, sem diam mattis est, ut gravida quam erat et turpis. Cras eget posuere purus. Vestibulum at mi in nisl tincidunt dictum. Mauris sed mauris elementum, egestas dolor vel, semper odio.

Menu 2

Texto del menu 2

.FPVTAJOFIHG.nav li { margin-bottom: unset; } .FPVTAJOFIHG.nav li a { border: unset; } .int_nav_title { position: static !important; font-weight: bold !important; width: auto !important; height: auto !important; margin: 1em 0 !important; border-bottom: 1px solid #ddd !important; padding-bottom: .5em !important; }

	
<sede:component 
	fragment="/fragmentos/componentes/menu-tercer-nivel" 
	type="tabs" 
	intNav="true" 
	json="{'data' : 
					[
			        	{
			        		'name': 'Home',
			        		'link': '#home',
			        		'contenido': 'Texto de la home'
			        	},
			        	{
			        		'name': 'Menu 1',
			        		'link': '#menu1',
			        		'include': '/portal/sistema-diseno/loremExtenso'
			        	},
			        	{
			        		'name': 'Menu 2',
			        		'link': '#menu2',
			        		'contenido': 'Texto del menu 2'
			        	}
	     			]
	      }">
</sede:component>