ｈｅｌｐｉｎｇʰᵉʳᵉ: Menú

HTML CODE

Colocar debajo de <body>
CSS CODE

#music-rounded {
      position:fixed;
      left:75px;
      top:150px;
      width:50px;
      height:50px;
      background-color:#000;
      -moz-border-radius:100px;
      -webkit-border-radius:100px;
      border-radius:100px;
      opacity:1;
      -webkit-transition: all 0.4s ease;
      -moz-transition: all 0.4s ease;
      transition: all 0.4s ease;
}

#music-rounded img {
     margin-top:17px;
     margin-left:-2px;
}

#music-rounded:hover .music-player-embed {
     -moz-border-radius:5px;
     -webkit-border-radius:5px;
     border-radius:5px;
     margin-top:-20px;
     opacity:1;
     background-color:#000;
     color:#fff;
     -webkit-transition: all 0.7s ease;
     -moz-transition: all 0.7s ease;
     transition: all 0.7s ease;
}

.music-border {
        position:absolute;
        margin-top:-42px;
        margin-left:-15px;
        border:10px solid rgba(0, 0, 0, 0.4);
        width:60px;
        height:59px;
        background-color:none;
        -moz-border-radius:100px;
        -webkit-border-radius:100px;
        border-radius:100px;
        -webkit-transition: all 0.4s ease;
        -moz-transition: all 0.4s ease;
        transition: all 0.4s ease;
}

.music-border:hover {
        margin-top:-48px;
        margin-left:-20px;
        border:15px solid rgba(0, 0, 0, 0.4);
        -webkit-transition: all 0.7s ease;
        -moz-transition: all 0.7s ease;
        transition: all 0.7s ease;
        -webkit-transform:rotateY(360deg);
        -moz-transform:rotateY(360deg);
        -o-transform: rotateY(360deg);
}

.music-player-embed {
    font-family:Consolas;
    font-size:11px;
    position:absolute;
    min-width:100px;
    background-color:#FFF;
    padding:9px;
    margin-left:90px;
    margin-top:0px;
    overflow:hidden;
    opacity:0;
    -webkit-transition: all 0.7s ease;
    -moz-transition: all 0.7s ease;
    transition: all 0.7s ease;
}

Colocar al lado de <style type=text/css”>

viernes, 28 de junio de 2013

Menú - Códigos

No hay comentarios :

Publicar un comentario