79 lines
2.3 KiB
HTML
79 lines
2.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="es" dir="ltr">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title></title>
|
|
<link rel="stylesheet" type="text/css" href="menu.css">
|
|
<link rel="stylesheet" type="text/css" href="contenedor.css">
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="cubo">
|
|
<div>
|
|
<span style="--i:0;"></span>
|
|
<span style="--i:1;"></span>
|
|
<span style="--i:2;"></span>
|
|
<span style="--i:3;"></span>
|
|
</div>
|
|
</div>
|
|
<div class="navigation">
|
|
<ul>
|
|
<li class="list active">
|
|
<a href="#">
|
|
<span class="icon">
|
|
<ion-icon name="home-outline"></ion-icon>
|
|
</span>
|
|
<span class="text">Inicio</span>
|
|
</a>
|
|
</li>
|
|
<li class="list">
|
|
<a href="#">
|
|
<span class="icon">
|
|
<ion-icon name="chatbubble-outline"></ion-icon>
|
|
</span>
|
|
<span class="text">Soporte</span>
|
|
</a>
|
|
</li>
|
|
<li class="list">
|
|
<a href="#">
|
|
<span class="icon">
|
|
<ion-icon name="barcode-outline"></ion-icon>
|
|
</span>
|
|
<span class="text">Sinc</span>
|
|
</a>
|
|
</li>
|
|
<li class="list">
|
|
<a href="#">
|
|
<span class="icon">
|
|
<ion-icon name="finger-print-outline"></ion-icon>
|
|
</span>
|
|
<span class="text">Acceder</span>
|
|
</a>
|
|
</li>
|
|
<li class="list">
|
|
<a href="#">
|
|
<span class="icon">
|
|
<ion-icon name="settings-outline"></ion-icon>
|
|
</span>
|
|
<span class="text">Ajustes</span>
|
|
</a>
|
|
</li>
|
|
<div class="indicator"></div>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
const list = document.querySelectorAll('.list');
|
|
function activeLink(){
|
|
list.forEach((item)=>
|
|
item.classList.remove('active'));
|
|
this.classList.add('active');
|
|
}
|
|
list.forEach((item)=>
|
|
item.addEventListener('click',activeLink));
|
|
</script>
|
|
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
|
|
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
|
|
</body>
|
|
</html>
|