Un concepto de navegación receptivo inspirado en material design de Google, que transforma un menú horizontal
normal en un menú fuera de lienzo móvil con una barra de alternar cuando el tamaño de la pantalla es menor que un punto
Tan solo tiene una cierta limitación, que no es desplegable, siendo bueno para blogs pequeños con pocos enlaces.
Si queréis instalarlo en vuestro Bloc solo tenéis que seguir estos pasos:
Ir a Blogger
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">
div.topbar {
height: 16px;
background: #AE0707;
}
ul.amor {
font-weight: bold;
width: 100%;
background: #FFF;
padding: 6px 0 6px 0;
margin: 0;
text-align: left;
font-family: calibri;
border: 1px solid #9B0404;
}
ul.amor li {
display: inline;
}
ul.amor li a {
color: black;
padding: 6px 8px 4px 8px;
margin-right: 20px;
text-decoration: none;
}
ul.amor li a:hover, ul.amor li a.selected {
color: white;
background: #CB0404;
background: -moz-linear-gradient(top, #5d4137 0%, #CB0404 12%, #840404 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5d4137), color-stop(12%,#41251b), color-stop(100%,#2c0f05));
background: -webkit-linear-gradient(top, #5d4137 0%,#41251b 12%,#2c0f05 100%);
background: -o-linear-gradient(top, #5d4137 0%,#41251b 12%,#2c0f05 100%);
background: -ms-linear-gradient(top, #5d4137 0%,#41251b 12%,#2c0f05 100%);
background: linear-gradient(top, #5d4137 0%,#41251b 12%,#2c0f05 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5d4137', endColorstr='#2c0f05',GradientType=0 );
-moz-box-shadow: 0 0 5px #840404;
-webkit-box-shadow: 0 0 5px #840404;
box-shadow: 0 0 5px #840404;
padding-top: 17px;
padding-bottom: 6px;
}
</style>
<div class="topbar">
</div>
<ul class="amor">
<li><a href="http://www.amorsevillista.com">INICIO</a></li>
<li><a href="Url del link">Link 1</a></li>
<li><a href="Url del link">Link 2</a></li>
<li><a href="Url del link">Link 3</a></li>
<li><a href="Url del link">Link 4</a></li>
<li><a href="Url del link">Link 5</a></li>
</ul>
Si quieres añadir mas enlaces solo tienes que poner esta linea de código antes de la ultima </ul>
<li><a href="Url del link">Link 6</a></li>
Si queréis verlo en acción podéis ir a mi Bloc de Demos lo veréis con el nombre Menú Horizontal solo con CSS
0 comentarios: