Menú Slamp

Saludos amigo que visian mi blog. Aquí les tengo un diseño especial que desapareció del blog d ZKreations, Agradezco a Daniel que creo este menú y ahora lo comparto con una pequeña modificación. Puesto que en el diseño original no tenía nada mas que una imagen, hoy les presento diversas imagenes que pueen cambiar a su elección. Empecemos.

Lo primero es ir a nuestra plantilla y editar el HTML para agregar un codigo CSS.

Pegaremos todo este codigo antes de la etiqueta </b:skin>.

#menu-slamp {
background-color: #212121; /*Color de fondo*/ box-shadow: 5px 0 2px rgba(0, 0, 0, 0.2);
height: 494px; /*largo del menu*/ list-style: none outside none;
margin: 0;
padding: 0;
width: 215px; /*ancho del menu*/}
#menu-slamp li a {
background-image: linear-gradient(bottom, #3D3D3D 0%, #4C4C4C 100%);
background-image: -o-linear-gradient(bottom, #3D3D3D 0%, #4C4C4C 100%);
background-image: -moz-linear-gradient(bottom, #3D3D3D 0%, #4C4C4C 100%);
background-image: -webkit-linear-gradient(bottom, #3D3D3D 0%, #4C4C4C 100%);
background-image: -ms-linear-gradient(bottom, #3D3D3D 0%, #4C4C4C 100%);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #3D3D3D),color-stop(1, #4C4C4C));
list-style: none outside none;
border-bottom: 1px solid #484848;
border-top: 1px solid #303030;
}
#menu-slamp li:hover a {
background-image: linear-gradient(bottom, #178FC3 0%, #22ADDB 100%);
background-image: -o-linear-gradient(bottom, #178FC3 0%, #22ADDB 100%);
background-image: -moz-linear-gradient(bottom, #178FC3 0%, #22ADDB 100%);
background-image: -webkit-linear-gradient(bottom, #178FC3 0%, #22ADDB 100%);
background-image: -ms-linear-gradient(bottom, #178FC3 0%, #22ADDB 100%);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #178FC3),color-stop(1, #22ADDB));
border-top: 1px solid #3ED2EC;
border-bottom: 1px solid #0f72ae;
}
#menu-slamp li a {
border-bottom: 1px solid #222222;
border-top: 1px solid #555555;
color: #FFFFFF;
display: block;
font-family: Arial,Helvetica;
font-size: 12px;
font-weight: bold;
line-height: 32px;
padding: 15px 25px;
text-decoration: none !important;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
text-align: left;
}
#menu-slamp span {
color: #FFFFFF;
display: block;
font-family: Arial,Helvetica;
font-size: 14px;
font-style: italic;
font-weight: bold;
padding: 15px;
text-align: center;
}
#menu-slamp vehiculos {
background: url("https://lh3.googleusercontent.com/-oklw4PwKHsI/U3pvS7ktGhI/AAAAAAAAAvM/BHStj_b6P-U/w61-h40-no/vehiculos.png") no-repeat scroll 0 0 transparent;
display: block;
float: left;
height: 40px;
margin-right: 20px;
margin-top: -5px;
width: 61px;
}
#menu-slamp armas {
background: url("https://lh5.googleusercontent.com/-8PUXN95mUNc/U3pvQ12DLyI/AAAAAAAAAvU/_56QO7eUP2s/w61-h40-no/armas.png") no-repeat scroll 0 0 transparent;
display: block;
float: left;
height: 40px;
margin-right: 20px;
margin-top: -5px;
width: 61px;
}
#menu-slamp graficos {
background: url("https://lh4.googleusercontent.com/-PW_yDqWOC58/U3pvRO31kBI/AAAAAAAAAvQ/Hq3rWu9n2ZM/w61-h40-no/graficos.png") no-repeat scroll 0 0 transparent;
display: block;
float: left;
height: 40px;
margin-right: 20px;
margin-top: -5px;
width: 61px;
}
#menu-slamp mapas {
background: url("https://lh3.googleusercontent.com/-jMDDDonJZSw/U3pvQ4z5izI/AAAAAAAAAvc/xlCSDdQ1EpA/w61-h40-no/mapas.png") no-repeat scroll 0 0 transparent;
display: block;
float: left;
height: 40px;
margin-right: 20px;
margin-top: -5px;
width: 61px;
}
#menu-slamp programas {
background: url("https://lh3.googleusercontent.com/-DivMJiQhol4/U3pvSEu26VI/AAAAAAAAAvE/_tvazFtouaQ/w61-h40-no/programas.png") no-repeat scroll 0 0 transparent;
display: block;
float: left;
height: 40px;
margin-right: 20px;
margin-top: -5px;
width: 61px;
}
#menu-slamp partidas {
background: url("https://lh3.googleusercontent.com/-8w2mZhAHdfA/U3pvRwAVYvI/AAAAAAAAAu0/5ZJvwR3nNUM/w61-h40-no/partidas.png") no-repeat scroll 0 0 transparent;
display: block;
float: left;
height: 40px;
margin-right: 20px;
margin-top: -5px;
width: 61px;
}
#menu-slamp mods {
background: url("https://lh3.googleusercontent.com/-DFOQa9Mrr3k/U3pvRoLaz4I/AAAAAAAAAvI/M934YFwaB48/w61-h40-no/mods.png") no-repeat scroll 0 0 transparent;
display: block;
float: left;
height: 40px;
margin-right: 20px;
margin-top: -5px;
width: 61px;
}
#sub-slamp {
-moz-transition: all 500ms ease-in-out 0s;
max-height: 0;
margin: 0;
overflow: hidden;
padding: 0;
}
#sub-slamp li {
background: none repeat scroll 0 0 #242424;
border-bottom: 1px solid #131313;
border-top: 1px solid #373737;
}
#sub-slamp li a {
background: none repeat scroll 0 0 transparent !important;
border: medium none !important;
padding: 6px 25px;
}
#sub-slamp li:hover {
background: none repeat scroll 0 0 #383838 !important;
border-bottom: 1px solid #131313;
border-top: 1px solid #373737;
}
#menu-slamp li.desp:hover ul {
max-height:400px;
}

Bueno, en este codigo no he modificado las imagenes para que ustedes puedan visualizar mejor.

La dimención de las imagenes es de 40px de alto y 61px de ancho. Eso si desean crear su propias imagenes.

Lo siguiente es el HTML, que es lo más importante ya que se mostrara en nuestro blog.

Vamos a Diseño y agregaremos un nuevo gadget.

Y pegan el siguiente codigo.

<center><ul id="menu-slamp">
<span>GTA San Andreas</span>
<li><a href="#"><vehiculos class="icon-typs"></vehiculos>Vehiculos</a></li>
<li><a href="#"><armas class="icon-typs"></armas>Armas</a></li>
<li><a href="#"><graficos class="icon-typs"></graficos>Graficos</a></li>
<li><a href="#"><mapas class="icon-typs"></mapas>Mapas</a></li>
<li><a href="#"><programas class="icon-typs"></programas>Programas</a></li>
<li><a href="#"><partidas class="icon-typs"></partidas>Partidas</a></li>
<li><a href="#"><mods class="icon-typs"></mods>Mods</a></li>
</ul></center>

Guardan el Gadget y listo, tendran este menú hermoso para su blog.

Disfruten del Menú.

Articulo

Menú Slamp

1 Comentario