MENÚ VERTICAL DDBLUE

julio 24, 2019

MENÚ VERTICAL DDBLUE .

Podeis verlo en el Bloc de pruebas con el Nombre Menu Vertical 1:

Otro menu vertical, ideal para ponerlo en la sidebar de vuestro blog.
De color azul con una franja a la izquierda de un azul mas intenso, es sencillo, a la vez efectivo y siempre queda bien.
Para añadirlo, simplemente copiais el codigo y lo pegais donde querais mostrarlo.

Podeis modificar el tamaño para adaptarlo a vuestro blog y añadir tantos enlaces como querais (todo ello lo teneis indicado en rojo)

<div id="ddblueblockmenu">
<div class="menutitle">
  MENU</div>
<ul>
<a href="ENLACE">TEXTO</a>
<a href="ENLACE">TEXTO</a>
<a href="ENLACE">TEXTO</a>
<a href="ENLACE">TEXTO</a>
<a href="ENLACE">TEXTO</a>
<a href="ENLACE">TEXTO</a>
</ul>
</div>
<style type="text/css">
#ddblueblockmenu{
border: 3px solid #000000; /*Main Border Color */
border-bottom-width: 0;
width: 250px;/* tamaño ancho del menu */
}

#ddblueblockmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
font: bold 90% 'Lucida Grande', Arial, sans-serif;
}

#ddblueblockmenu a{
display: block;
padding: 5px 0;
padding-left: 9px;
width: 94%; /*94% minus all left/right paddings and margins*/
text-decoration: none;
color: #ffffff !important; /* Menu Font Color */
background-color: #2175bc; /*Menu background Color */
border-bottom: 1px solid #90bade; /*Bottom border color */
border-left: 7px solid #1958b7; /*Left border color */
list-style-type:none;text-align:center;font-size:20px;text-shadow: 2px 1px 2px #000;
}

* html #ddblueblockmenu a{ /*IE only */
width: 94%; /*IE 5*/
width: 94%; /*94% minus all left/right paddings and margins*/
}

#ddblueblockmenu a:hover {
background-color: #2586d7; /*Menu background Color On Hover*/
border-left-color: #1c64d1; /*Left border color On Hover*/
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}

#ddblueblockmenu div.menutitle{
color: #E8CC7F; /* Title Font Color */
border-bottom: 1px solid black;
padding: 5px 0;font-size:20px;
padding-left: 0px;text-align:center;
background-color: #000000; /*Menu Tite Background Color*/

}
</style>