Home About Affies Afiliame Tutorials
16.10.13

Tutorial: Menú flotante 1


Hola como están? espero que bien. Bueno hoy les traigo un tutorial de un menú circular



P·R·E·V·I·E·W


1° Vamos a Diseño//Añadir Gadget// HTML Java Script
2° Pega el siguiente Código:


<style>
.tabs-MMCf {
overflow: hidden;
position: relative;
width: 165px;
height: 165px;
background:url(http://www.totallylayouts.com/backgrounds/vintage/white_floral.gif);  /* COLOR DE FONDO */
border-radius: 222px;
border: 5px solid #fff; /* BORDE DEL MENU */
padding: 3px;
-moz-transition: 1.0s;
-webkit-box-shadow: 0px 0px 9px #;
-moz-box-shadow: 0px 0px 9px #c7c7c7;
box-shadow: 0px 0px 9px #000;
}
.tabs-MMCf li {
display: block;
padding: 10px;
width: 150px;
border: 1px solid transparent;
font: normal 13px georgia; /* TAMAÑO  FUENTE DE LETRA */
text-transform: uppercase;
line-height: 5px;
margin-left: -10px;
}
.tabs-MMCf li a {
color: #8b8b8b; /* COLOR DEL TEXTO */
text-decoration: none;
text-shadow: 0px 1px 0px #f4feff, 0px -1px 0px #f4feff, 1px 0px 0px #f4feff, -1px 0px 0px #f4feff;
}
.tabs-MMCf li:first-child {
margin-top: 20px;
}
.tabs-MMCf li:hover{
padding: 10px;
background: #fff; /* COLOR DE FONDO {hover} */
border: 1px dashed #39393A; /* BORDE DE LOS LINK {hover} */
border-radius: 222px;
}
</style>
<div style='position: fixed; top: 0px; left: 20px;'>
<ul class='tabs-MMCf'><center>
<li><a href='Link'> Título </a></li>
<li><a href='Link'> Título </a></li>
<li><a href='Link'> Título </a></li>
<li><a href='Link'> Título </a></li>
</center></ul>
</div></style>
Créditos: Thecircus 
Actualizado el 27 de Febrero 2014
Creo que está bastante claro
Espero que les sirva :3

2 comentarios:

  1. me gustaron tus tutos pero estarian geniales si les puedes agregar una vista previa :) saludos

    ResponderEliminar
  2. Sí eso trataba de hacer sólo me falta organizarme bien

    ResponderEliminar

Escribe tu comentario pequeño friki :3
Recuerda que me haces muy feliz si no haces:
·Spam
·Insultos
·Anónimos ofensivos
·etc.
·Y por favor escribe algo que se pueda entender