<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">/*
	------------------------------------------------------------------------------------------------------------------
	 MENU DESPLEGABLE DESDE BOTÃ“N PARA PÃGINA RESPONSIVE DESIGN
	 Reglas:
	 
	 - El menÃº de instala en el div a2 (esquina superior derecha)
	 - El menÃº consta de los siguientes elementos div

			&lt;div id="divbtnmenu"&gt;
            	&lt;a href="#" id="botonmenu1"&gt;&lt;img src="img/botonmenu1.png" id="imgbtnmenu1"&gt;&lt;/a&gt;
                &lt;a href="#" id="botonmenu2"&gt;&lt;img src="img/botonmenu2.png" id="imgbtnmenu2"&gt;&lt;/a&gt;
            &lt;/div&gt;
            &lt;div id="divmenumin"&gt; &lt;!-- menÃº responsive  --&gt;
            	&lt;ul&gt;
                	&lt;li&gt;&lt;a href="#"&gt;Opcion1&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Opcion2&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;OpciÃ³n3&lt;/a&gt;&lt;/li&gt;
				&lt;/ul&gt;
			&lt;/div&gt;
        	&lt;div id="divmenumax"&gt; &lt;!-- menu pantalla grande (pc, laptop) --&gt;
				&lt;a href="#"&gt;Opcion1&lt;/a&gt; | &lt;a href="#"&gt;Opcion2&lt;/a&gt; | &lt;a href="#"&gt;Opcion3&lt;/a&gt;
			&lt;/div&gt;
	- Las imagenes botonmenu1.png y botonmenu2.png son de los botones para desplegar y cultar el menÃº respectivamente
	- No importa en que div estÃ© el menÃº max (pantalla grande) pero debe estar dentro del div con id="divmenumax"
	- En el head deberÃ¡n existir las siguientes lÃ­neas y los archivos correspondientes en las rutas especificadas
			&lt;link href="css/MenuBtn_01.css" rel="stylesheet" type="text/css" /&gt;
			&lt;script src="js/MenuBtn_01.js" type="text/javascript"&gt;&lt;/script&gt;
*/

/* Esteblecer aquÃ­ colores del menÃº	*/
#divmenumin				{	background-color:#F90;	}
#divmenumin a			{	font-size:70px; }
#divmenumin a:link		{	font-weight:bold; text-decoration:none; color:#CCC;	}
#divmenumin a:visited	{	font-weight:bold; text-decoration:none; color:#CCC;	}
#divmenumin a:active	{	font-weight:bold; text-decoration:none; color:#CCC;	}
#divmenumin a:hover		{	font-weight:bold; text-decoration:none; color:#FFF;	}
#divmenumin a:focus		{	font-weight:bold; text-decoration:none;	color:#CCC; }

/* DemÃ¡s configuraciones 	*/
#divbtnmenu				{	display:none; position:fixed; right:1%; top:1%; z-index:999; opacity:0.95; 	}
#botonmenu1				{	display:none;	}
#botonmenu2				{	display:none;	}
#imgbtnmenu1			{	width:100px; height:auto; 	}
#imgbtnmenu2			{	width:100px; height:auto; 	}

#divmenumin				{	width:90%; height:auto; padding:30px; display:none; position:fixed; right:2%; top:120px; z-index:999; opacity:0.95; 	}
#divmenumin ul li		{	display:list-item; list-style-type:none; text-align:center; font-size:60px; margin-top:25px; margin-bottom:25px;	}
	
#divmenumax				{	display:block;	}

@media screen and (max-width:1100px)
{
	#divbtnmenu			{	display:block;	}
	#botonmenu1			{	display:block;	}
	
	#divmenumax			{	display:none;	}
}
</pre></body></html>