-->

Articulo

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ú.

1 Comentario