Código de CSS - Top Menu Responsive

Imágen de perfil
Val: 407
Plata
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Top Menu Responsivegráfica de visualizaciones


CSS

estrellaestrellaestrellaestrellaestrella(2)
Publicado el 4 de Octubre del 2016 por Scriptshow (137 códigos)
4.593 visualizaciones desde el 4 de Octubre del 2016
Un sencillo menú horizontal compatible con la mayoría de dispositivos y navegadores actuales.

Con muy pocas líneas de código, se pueden conseguir atractivos efectos.

Requerimientos

Para visualizar este código, se precisa un navegador web actualizado; un equipo de sobremesa o portátil; una tableta o un smartphone. Redimensiona la ventana del navegador para ver el efecto.

1.0
estrellaestrellaestrellaestrellaestrella(2)

Publicado el 4 de Octubre del 2016gráfica de visualizaciones de la versión: 1.0
4.594 visualizaciones desde el 4 de Octubre del 2016
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
<!DOCTYPE html>
<html>
<head>
<style>
* {
margin:0;
font:normal 16px/16px sans-serif;
}
a, a:link {
background-color:#FFFFFF;
color:gray;
border:1px solid #DDDDDD;
padding:8px;
margin:4px;
text-align:center;
text-decoration: none;
display:inline-block;
-webkit-transition: all .4s;
-moz-transition: all .4s;
-ms-transition: all .4s;
-o-transition: all .4s;
transition: all .4s;
}
a:hover, a:focus {
background-color:#DEDEDE;
color:#FFFFFF;
}
@media screen and (max-width: 480px) {
a:link {
display:block;
}
}
</style>
</head>
<body>
<a href="#" target="_self">Inicio</a>
<a href="#" target="_self">Galería</a>
<a href="#" target="_self">Contacto</a>
<a href="#" target="_self">Otros...</a>
</body>
</html>



Comentarios sobre la versión: 1.0 (2)

Imágen de perfil
5 de Octubre del 2016
estrellaestrellaestrellaestrellaestrella
Hola, esta muy bien el código, pero le falta esta linea en el <header> para que funcione en smartphones:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
Responder
Imágen de perfil
20 de Octubre del 2016
estrellaestrellaestrellaestrellaestrella
Gracias por el aporte.

Un saludo
Responder

Comentar la versión: 1.0

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s3693