Guia de estilo Sede electronica. Ayuntamiento de Zaragoza

Menu de primer nivel

.megamenu_v1>ul>li ul { display: none; } .megamenu_v1>ul>li:focus-within ul, .megamenu_v1>ul>li:focus ul, .megamenu_v1>ul>li:hover ul { display: block; transform-origin: 0 0; animation: dropdown .2s ease-out; } .megamenu_v1 ul li ul span[data-toggle="collapse"]:after { display: none; } @keyframes dropdown { from { transform: scaleY(0); } to { transform: scaleY(1); } }

Ejemplo:

	
<sede:component fragment="/fragmentos/componentes/megamenu" mpnColor="#006600" json="{'data' : 
	[
     	{
     		'name': 'menu1',
     		'link': '#'
     	},{
     		'name': 'menu2',
     		'children': [
        		{
        			'name': 'submenu2.1',
        			'link': '#'
        		},{
        			'name': 'submenu2.2',
        			'children': [
		        		{
		        			'name': 'submenu2.2.1',
		        			'link': '#'
		        		},{
		        			'name': 'submenu2.2.2',
		        			'link': '#'
		        		},
	        		]
        		},
     		]
     	},{
     		'name': 'menu3',
     		'icon': ' fab fa-accessible-icon fa-fw',
     		'children': [
        		{
        			'name': 'submenu3.1',
        			'link': '#'
        		},{
        			'name': 'submenu3.2',
        			'children': [
		        		{
		        			'name': 'submenu3.2.1',
		        			'link': '#'
		        		},{
		        			'name': 'submenu3.2.2',
		        			'link': '#'
		        		},
	        		]
        		},
     		]
     	},
        {
            'include': '/portal/sistema-diseno/v1/componentes/contenido/megamenu :: redes',
            'liClass': 'flex-grow ignoreStyles'
        }
	]
}"></sede:component>

	
<th:block th:if="false">
    <th:block th:fragment="redes">
        <div class="flex flex-ac flex-jc">
            <a style="width: unset; display: inline-flex; position: static;" class="a-fix nopadding margin-r1em" itemprop="sameAs" href="https://twitter.com/FiestasPilarOfi">
                <span class="fab fa-2x fa-twitter-square text-color" aria-hidden="true"></span>
                <span class="oculto">Twitter</span>
            </a>
            <a style="width: unset; display: inline-flex; position: static;" class="a-fix nopadding margin-r1em" itemprop="sameAs" href="https://www.facebook.com/FiestasdelPilar.Oficial">
                <span class="fab fa-2x fa-facebook-square text-color" aria-hidden="true"></span>
                <span class="oculto">Facebook</span>
            </a>
            <a style="width: unset; display: inline-flex; position: static;" class="a-fix nopadding margin-r1em" itemprop="sameAs" href="https://www.instagram.com/fiestaspilaroficial">
                <span class="fab fa-2x fa-instagram text-color" aria-hidden="true"></span>
                <span class="oculto">Instagram</span>
            </a>
            <a style="width: unset; display: inline-flex; position: static;" class="a-fix nopadding" itemprop="sameAs" href="https://www.youtube.com/playlist?list=PLfj57q5hJUJSMcymtKeGfcAIVaZESfgLf">
                <span class="fab fa-youtube-square fa-2x text-color" aria-hidden="true"></span>
                <span class="oculto">Youtube</span>
            </a>
        </div>
    </th:block>
</th:block>

Abrir configurador

Ejemplos de uso

IDEZAR Mapa de ruido (dataAttr)

Globales
Atributo	Descripción	Valor por defecto
mmColor	#hex - color - Definir el color del menú	'#e81b16'
bgColor	#hex - color - Color de fondo del menú	'#fff'
border	Boolean - Define si se muestran o no los bordes	'true'
containerClass	-	''
btnColor	#hex - color - Color del boton que despliega el menu para móviles	'unset'

json[data]
Key	Descripción	Valor por defecto
Name	String - Nombre del enlace del menú	' '
link	URL - Definir la URL del enlace	'#'
mobileLink	URL - Definir una URL alternativa para el enlace en dispositivos móviles. Ej: Bibliotecas Municipales -> Catálogo	'#'
icon	Clase FontAwesome - Icono para hacer mas descriptivo el enlace. Este puede quedar vacío, el texto se centrará respecto al contenedor del enlace. Se puede obtener desde biblioteca de iconos	' '
img	URL - En caso de que se solicite utilizar un icono personalizado se puede incorporar una imagen	' '
id	String - Definir un identificador para el enlace del menú	' '
liClass	Clase HTML / Clase Bootstrap - Definir una clase para el elemento del listado	' '
aClass	Clase HTML / Clase Bootstrap - Definir una clase para el enlace	' '
imgColor	Boolean - Definir si la imagen del icono personalizado es a color. Ej: gobierno abierto	'true'
newWindow	Boolean - Si el ancla enlaza a una página externa a zaragoza.es se debe definir esta propiedad	'true'
dataAttrName	attribute name - Para uso especial. Esta propiedad se utiliza en conjunto con dataAttrValue Ver ejemplos de uso	'data-attr'
dataAttrValue	attribute value - Para uso especial.	'false'