Código de JavaScript - Interactive Fade Menu 2.0

Imágen de perfil

Interactive Fade Menu 2.0gráfica de visualizaciones


JavaScript

estrellaestrellaestrellaestrellaestrella(1)
Actualizado el 13 de Junio del 2017 por ScriptShow (Publicado el 12 de Junio del 2017)
343 visualizaciones desde el 12 de Junio del 2017. Una media de 28 por semana
Menú Fade Interactivo que gradualmente actúa según la actividad en la Web.
No utiliza librerías, frameworks. etc. de terceros. Por tanto, reacciona rápido; es compatible con cualquier navegador web.

Tiene otras muchas y variadas aplicaciones.

Espero sea útil.

Un saludo

Requerimientos

Un navegador web o dispositivo compatible.

2.0
estrellaestrellaestrellaestrellaestrella(1)

Actualizado el 13 de Junio del 2017 (Publicado el 12 de Junio del 2017)gráfica de visualizaciones de la versión: 2.0
344 visualizaciones desde el 12 de Junio del 2017. Una media de 28 por semana
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

Interactivemenu
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
<!DOCTYPE html>
<html>
<head>
<title>Interactive Fade Menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
<!--
html, body {width:100%;height:100%;margin:0px;font-family:sans-serif;font-size:100%;color:#CECECE;background:#4E4E4E;}
a {text-decoration:none;color:#CECECE;outline:none;}
#men {width:100%;height:auto;margin:auto;padding:0px;position:absolute;top:44%;left:0px;display:inline-block;list-style:none;color:#CECECE;background:#000000;
filter:alpha(opacity=20);-khtml-opacity:0.2;-moz-opacity:0.2;opacity:0.2;}
#men li {margin:2px;padding:2px;border:1px solid #CECECE;}
#men li a:hover {border-left:240px solid #CECECE;}
//-->
</style>
<script type="text/javascript">
<!--
var opac=20, tim, lap;
function fade(dir){
var elm=document.getElementById("men");
if(elm.filters){elm.filters.alpha.Opacity=opac}
if(!elm.filters){elm.style.opacity=(opac/100)}
if(!elm.filters){elm.style.MozOpacity=(opac/100)}
if(!elm.filters){elm.style.KHTMLOpacity=(opac/100)}
if(dir==1 && opac<=80){opac=opac+2} else{clearTimeout(tim)}
if(dir==0 && opac>=20){opac=opac-2} else{clearTimeout(tim)}
tim=setTimeout("fade("+dir+")", 10);
}

function test(){
fade(1); clearTimeout(lap);
lap=setTimeout("fade(0)", 4000);
}

document.onmousemove=test;
document.onmousedown=test;
document.onkeydown=test;
//-->
</script>
<body>
<ul id="men">
<li><a href="#">&nbsp;&nbsp;Menu 1&nbsp;&nbsp;</a></li>
<li><a href="#">&nbsp;&nbsp;Menu 2&nbsp;&nbsp;</a></li>
<li><a href="#">&nbsp;&nbsp;Menu 3&nbsp;&nbsp;</a></li>
<li><a href="#">&nbsp;&nbsp;Menu 4&nbsp;&nbsp;</a></li>
</ul>
</body>
</html>



Comentarios sobre la versión: 2.0 (1)

Imágen de perfil
xve
13 de Junio del 2017
estrellaestrellaestrellaestrellaestrella
No ha dejado ningún comentario
Responder

Comentar la versión: 2.0

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

http://lwp-l.com/s4019