Ultimas entradas

Entradas Destacadas

PÁGINA DE BIENVENIDA

PÁGINA DE BIENVENIDA

Blogger

MENÚ DE NAVEGACIÓN VERTICAL HTML-JAVASCRIPT

By Blogs Famag - lunes, agosto 05, 2019

MENÚ DE NAVEGACIÓN VERTICAL HTML-JAVASCRIPT.




En esta ocasión os traigo un menú de navegación vertical. Es una buena forma de ocultar una gran cantidad de enlaces en un espacio reducido y las animaciones le darán un toque sencillo y elegante a vuestro blog.  Incluso si no tenéis mucha práctica en Html, seréis capaces de sacar esto adelante.

Como podéis ver un poco más abajo en la demo, las secciones se despliegan de forma predeterminada al colocar el ratón sobre ellas. La sección principal permanece siempre abierta, para incluir un mensaje de bienvenida.

Está adaptado al Sevillismo pero podéis cambiarlo a vuestro antojo, tan solo cambiando los títulos y url.
Ahora que tenemos una idea de como funciona, vamos a empezar!

Si queréis verlo en acción copia este código y pegarlo en este probador y lo veras integro.:



Para instalarlo en vuestro Bloc en un gadget solo tenéis que seguir estos pasos:




1-Un clic en “Diseño”



2-Clic en “Añadir un gadget”



3-Busca el widget que dice “HTML-Javascript” y ábrelo



4-Coloca el siguiente codigo en el interior





<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
nav {
font-family: Helvetica, Arial, sans-serif;
line-height: 1.5;
margin: 50px auto; /*for display only*/
width: 200px;
-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}
.menu-item {
background: #fff;
width: 200px;
}
/*Menu Header Styles 1*/
.menu-item h4 {
color: #fff;
font-size: 15px;
font-weight: 500;
padding: 7px 12px;
background: #a90329;
}
.menu-item h4 a {
color: white;
display: block;
text-decoration: none;
width: 200px;
}
/*Menu Header Styles 2*/
.menu-item h4 {
border-bottom: 1px solid rgba(0,0,0,0.3);
border-top: 1px solid rgba(255,255,255,0.2);
color: #fff;
font-size: 15px;
font-weight: 500;
padding: 7px 12px;
background: #a90329; /* Old browsers */
background: -moz-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a90329), color-stop(44%,#8f0222), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* IE10+ */
background: linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
}
.menu-item h4:hover {
background: #cc002c; /* Old browsers */
background: -moz-linear-gradient(top, #cc002c 0%, #6d0019 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cc002c), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #cc002c 0%,#6d0019 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #cc002c 0%,#6d0019 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #cc002c 0%,#6d0019 100%); /* IE10+ */
background: linear-gradient(top, #cc002c 0%,#6d0019 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc002c', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
}
.alpha p {
font-size: 13px;
padding: 8px 12px;
color: #aaa;
}
/*ul Styles*/
.menu-item ul {
background: #fff;
font-size: 13px;
line-height: 30px;
list-style-type: none;
overflow: hidden;
padding: 0px;
}
.menu-item ul a {
margin-left: 20px;
text-decoration: none;
color: #aaa;
display: block;
width: 200px;
}
/*li Styles*/
.menu-item li {
border-bottom: 1px solid #eee;
}
.menu-item li:hover {
background: #eee;
}
/*ul Styles*/
.menu-item ul {
background: #fff;
font-size: 13px;
line-height: 30px;
height: 0px; /*Collapses the menu*/
list-style-type: none;
overflow: hidden;
padding: 0px;
}
/*ul Styles*/
.menu-item ul {
background: #fff;
font-size: 13px;
line-height: 30px;
height: 0px;
list-style-type: none;
overflow: hidden;
padding: 0px;
/*Animation*/
-webkit-transition: height 1s ease;
-moz-transition: height 1s ease;
-o-transition: height 1s ease;
-ms-transition: height 1s ease;
transition: height 1s ease;
}
.menu-item:hover ul {
height: 125px;
}
</style>
<nav>
<div class="menu-item alpha">
<h4><a href="http://www.amorsevillista.com/">Inicio</a></h4>
<p>Pequeña descripción ....</p>
</div>
<div class="menu-item">
<h4>Sevilla F.C.</h4>
<ul>
<li><a href="#">Plantilla</a></li>
<li><a href="#">Clasificación</a></li>
<li><a href="#">Resultados</a></li>
<li><a href="#">Calendario</a></li>
</ul>
</div>
<div class="menu-item">
<h4>Sevilla Atltco.</h4>
<ul>
<li><a href="#">Plantilla</a></li>
<li><a href="#">Clasificación</a></li>
<li><a href="#">Resultados</a></li>
<li><a href="#">Calendario</a></li>
</ul>
</div>
<div class="menu-item">
<h4>S.F.C. Medios</h4>
<ul>
<li><a href="#">T.V.</a></li>
<li><a href="#">Radio</a></li>
</ul>
</div>
<div class="menu-item">
<h4>!Síguenos!</h4>
<ul>
<li><a href="#">Twitter</a></li>
<li><a href="#">Facebook</a></li>
<li><a href="#">Google +</a></li>
<li><a href="#">RSS</a></li>
</ul>
</div>
<div class="menu-item">
<h4>Contacto</h4>
<ul>
<li><a href="#">Email</a></li>
</ul>
</div>
</nav>


Despues de haber insertado el código, un clic en  "Guardar"  y llévelo a la sidebar.




Si quieres comprobar el resultado, copia el código de arriba y pégalo en esta página

Para agregar más secciones al Menú, justo debajo de algún </div> agrega el siguiente código:

<div class="menu-item">
<h4> <a href=" "> link-here menú de título </ a> </ h4>
<ul>
<li> <a href=" "> link-here sub-menu-título </ a> </ li>
<li> <a href=" "> link-here sub-menu-título </ a> </ li>
<li> <a href=" "> link-here sub-menu-título </ a> </ li>
</ Ul>
</ Div>





Fecha de la Publicación; 05-08-2019

  Fuente;  amorsevillista

  Publicado por;

  • Share:

You Might Also Like

0 comentarios