Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Código Fuente » HTML » Código de HTML - Menu Animado Responsive HTML5 & CSS3

Código de HTML - Menu Animado Responsive HTML5 & CSS3

Volver
Agregar Código Fuente
<<>>
Imágen de perfil
Val: 13
Ha disminuido su posición en 18 puestos en HTML (en relación al último mes)
Gráfica de HTML

Menu Animado Responsive HTML5 & CSS3gráfica de visualizaciones


HTML

estrellaestrellaestrellaestrellaestrella(5)
Actualizado el 3 de Agosto del 2020 por Terry (3 códigos) (Publicado el 25 de Noviembre del 2014)
16.031 visualizaciones desde el 25 de Noviembre del 2014
Este es un menú en donde al poner el cursor el elemento gira ya también responsive

espero les sirva en algo, gracias a todos, no olviden dejar sus comentarios o sugerencias.

A.1
estrellaestrellaestrellaestrellaestrella(5)

Publicado el 25 de Noviembre del 2014gráfica de visualizaciones de la versión: A.1
16.032 visualizaciones desde el 25 de Noviembre del 2014
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE HTML>
<!--

 wwww.elgatocoder.com

 pueden usar este codigo como se les de la gana :=)\

 no olviden dejar sus comentarios o sugerencias

 a y siganos en facebook.

-->
<html>
    <head>
        <title>animated manu www.elgatocoder.com</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <style>
            @charset 'UTF-8';
            @import url(http://fonts.googleapis.com/css?family=Indie+Flower);
 
            /*********************************************************************************/
            /* coded by www.elgatocoder.com

               visitanos!!! y sigenos en facebook                                            */
            /*********************************************************************************/
            /* cssreset.com */
            * {
                margin: 0;
                padding: 0;
            }
            /* cssreset.com */
 
            body
            {
                background: #191919;

                /* maybe an option C63D0F       */
            }
 
            header
            {
                position: relative;
                border-bottom: solid 2px #e5e5e5;

                padding: 7em 0 0 0;
                text-align: center;
            }
            #nav

            {
                position: absolute;
                top: 3em;
                font-family: 'Indie Flower', cursive;
                left: 0;
                width: 100%;
            }
 
            #nav  ul  li

            {
                display: inline-block;
                padding-right: 2em;
            }
 
            #nav ul  li  a

            {
                display: block;
                text-decoration: none;
                text-transform: uppercase;
                font-weight: 800;
                color: #5F9EA0;

                outline: 0;
                -moz-transition:all 0.7s ease;
                transition:all 0.7s ease;
                -webkit-transition:all 0.7s ease;
            }
 
            #nav  ul li.active  a ,

            #nav ul  li:hover  a 

            {
                color:#EEE8AA;

                -moz-transform: rotate(360deg);
                -ms-transform: rotate(360deg);
                transform: rotate(360deg);
                -webkit-transform: rotate(360deg);
            }
 
            @media screen and (max-width: 600px){
 
                #nav{

                    background:#250606;

                    top:0;
                    padding:0;
                }
 
                #nav ul li {

                    float: none;
                    display: block;
                    text-decoration: none;
                    text-transform: uppercase;
                    font-weight: 800;
                    color: #5F9EA0;

                    outline: 0;
                    -moz-transition:none;
                    transition:none;
                    -webkit-transition:none;
                }
 
                #nav ul li a {

                    width: 100%;
                    border-bottom: 1px solid #fff;

                }
 
 
                #nav > ul > li.active > a ,

                #nav > ul > li:hover > a {

                    color:#EEE8AA;

                    -moz-transform: none;
                    -ms-transform: none;
                    transform: none;
                    -webkit-transform: none;
                }
            }
        </style>
    </head>
    <body>
        <header>
            <nav id="nav">
                <ul>
                    <li class="active" ><a  href="index.html">Home</a></li>
                    <li><a href="#" >Blog</a></li>
                    <li><a  href="#">Page</a></li>
                    <li><a  href="#">About</a></li>
                    <li><a  href="#">Contact</a></li>
                </ul>
            </nav>
        </header>
    </body>
</html>



Comentarios sobre la versión: A.1 (5)

Víctor Magaña
25 de Noviembre del 2014
estrellaestrellaestrellaestrellaestrella
Excelente artículo, es lo que me fascina de CSS3 la forma en la que las animaciones se pueden ver elegantes y sin tanta complicación en el código, y a partir de esto podemos nosotros ponerle nuestro estilo y las páginas dejan de ser comunes y lo mejor es que son hechas a mano, un saludo.
Responder
Lis
19 de Febrero del 2015
estrellaestrellaestrellaestrellaestrella
Me encanto.. me parecio muy gracioso y original
Responder
Jose Miguel
23 de Febrero del 2015
estrellaestrellaestrellaestrellaestrella
Me gusto mucho...es genial.
Responder
angela
23 de Marzo del 2017
estrellaestrellaestrellaestrellaestrella
si hubiera una sexta estrella te la pondría, excelente trabajo era exactamente o que buscaba gracias a ti mi calificación en informática subirá.... BENDICIONES Y SIGUE CON MAS PROYECTOS
Responder
DAVINA
3 de Agosto del 2020
estrellaestrellaestrellaestrellaestrella
Me ha encantado.
Gracias!
Responder

Comentar la versión: A.1

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios...
CerrarCerrar
CerrarCerrar
Cerrar

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.

Puedes registrarte o validarte desde aquí.

Codigo
Negrita
Subrayado
Tachado
Cursiva
Insertar enlace
Imagen externa
Emoticon
Tabular
Centrar
Titulo
Linea
Disminuir
Aumentar
Vista preliminar
sonreir
dientes
lengua
guiño
enfadado
confundido
llorar
avergonzado
sorprendido
triste
sol
estrella
jarra
camara
taza de cafe
email
beso
bombilla
amor
mal
bien
Es necesario revisar y aceptar las políticas de privacidad
Acepto las políticas de privacidad

http://lwp-l.com/s2877