Menú Vertical Índices Numéricos con efectos
Publicado por ScriptShow (692 intervenciones) el 23/05/2019 13:42:13
Saludos,
un Menú por Índices con efectos en JavaScript nativo y CSS compatible (no precisa librerías). Es un script adaptable a cualquier proyecto para navegar por secciones, capas, páginas, etc. Al clicar el número, queda resaltado con una transición ajustable. Veamos el ejemplo:
Espero sea útil.
un Menú por Índices con efectos en JavaScript nativo y CSS compatible (no precisa librerías). Es un script adaptable a cualquier proyecto para navegar por secciones, capas, páginas, etc. Al clicar el número, queda resaltado con una transición ajustable. Veamos el ejemplo:
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
<!DOCTYPE html>
<html>
<head>
<style>
body {font-family:"Helvetica", sans-serif;
font-size:16px;
color:#D4D4D4;
}#tab li a {
display:inline-block;
text-decoration:none;
text-align:center;
color:#000000;
padding:16px;outline:none;transition:0.4s;
}.active {
font-size:48px;
}.normal {
font-size:16px;
}</style>
<script>
function test(e) {
var tabs=document.getElementById("tab").querySelectorAll("a");
for (var i=0; i < tabs.length; i++) {tabs[i].className="normal"}
e.className="active";
}</script>
</head>
<body>
<h2>Test</h2>
<ul id="tab">
<li><a href="javascript:void(0)" onfocus="test(this)" tabindex="1">01</a></li>
<li><a href="javascript:void(0)" onfocus="test(this)" tabindex="2">02</a></li>
<li><a href="javascript:void(0)" onfocus="test(this)" tabindex="3">03</a></li>
<li><a href="javascript:void(0)" onfocus="test(this)" tabindex="4">04</a></li>
</ul>
</body>
</html>
Espero sea útil.
Valora esta pregunta
1