26 enero 2020

Como crear un Menú Desplegable

Anteriormente, vimos como crear un menú estático, ahora crearemos un menú desplegable:



Paso 1: Añadir un nuevo gadget

  1. Ve a Diseño
  2. Añades un nuevo gadget en la zona de Cross-column
  3. Selecciona la opción: HTML/JavaScript - Añade funciones de terceros u otro código a tu blog.

Paso 2: Configuración menú

  1. En la parte del código escribe esto:
  2. <ul id="ybmenud">
          <li><a href="#">Inicio</a></li>
          <li><a href=“#”>Menú 1</a> 
          	<ul>
    	     <li><a href="#">Submenú 1.1</a></li>
    	     <li><a href="#">Submenú 1.2</a></li>
                    <li><a href="#">Submenú 1.3</a></li> 
        	</ul>
            </li>
          <li><a href=“#”>Menú 2</a> 
          	<ul>
    	     <li><a href="#">Submenú 2.1</a></li>
    	     <li><a href="#">Submenú 2.2</a></li>
                    <li><a href="#">Submenú 2.3</a></li> 
        	</ul>
            </li>
            <li><a href="#">Sobre mí</a></li>
    </ul>
      
  3. Modifica '#' por la dirección a la que quieres enlazar y el nombre de cada enlace
  4. Por último queda asignar los colores y el despliegue del menú cuando se pase el cursor por encima. Esto se hace con el siguiente texto, que se coloca debajo de la lista del menú, en el mismo sitio.
  5. <style type="text/css">
    	.tabs-inner .widget ul#ybmenud {
    	text-align: left;
    	display: inline;
    	margin: 0;
    	padding: 15px 4px 17px 0; /* espacio de padding de los botones del menú */
    	list-style: none;
    	border:none;
    }
    
    .tabs-inner .widget ul#ybmenud li {
    	text-shadow: 0 -1px 0 #000;
    	color: #ffffff; 
    	display: inline-block;
    	margin-right: -4px;
    	position: relative;
    	padding: 15px 20px;
    	background: #b4a2b6; /* color de fondo de tu menu */ 
    	float:none;
    	cursor: pointer;
    	-webkit-transition: all 0.2s;
    	-moz-transition: all 0.2s;
    	-ms-transition: all 0.2s;
    	-o-transition: all 0.2s;
    	transition: all 0.2s;
    }
    
    .tabs-inner .widget ul#ybmenud li a {
    	padding:0; 
    	background: transparent;
    	border:0;
    }
    
    .tabs-inner .widget ul#ybmenud li:hover {
    	background: #fc867e; /* color de fondo para cuando pasas el ratón por encima del botón de la barra */
    }
    
    .tabs-inner .widget ul#ybmenud li:hover a {
    	background: transparent;
    }
    
    .tabs-inner .widget ul#ybmenud li ul {
    	z-index:1000; 
    	border:none;
    	padding: 0;
    	position: absolute;
    	top: 45px;
    	left: 30px;
    	float:none;
    	width: 150px;
    	-webkit-box-shadow: none;
    	-moz-box-shadow: none;
    	box-shadow: none;
    	display: none;
    	opacity: 0;
    	visibility: hidden;
    	-webkit-transiton: opacity 0.2s;
    	-moz-transition: opacity 0.2s;
    	-ms-transition: opacity 0.2s;
    	-o-transition: opacity 0.2s;
    	-transition: opacity 0.2s;
    }
    
    .tabs-inner .widget ul#ybmenud li ul li { 
    	background: #fc867e; /* color del fondo de las pestañas del sub-menu */
    	display: block; 
    	text-shadow: 0 -1px 0 #000;
    }
    
    ul#ybmenud li ul li a{
    	background: transparent;
    }
    
    .tabs-inner .widget ul#ybmenud li ul li:hover { 
    	background: #b4a2b6; /* color de fondo cuando pasas el ratón sobre el sub menu */
    }
    
    .tabs-inner .widget ul#ybmenud li:hover ul {
    	display: block;
    	opacity: 1;
    	visibility: visible;
    }
    </style>
    
      

¡Listo!

Si quieres leer más tips

No hay comentarios:

Publicar un comentario