NavBarMobile.html
Ir a la navegación.
<section class="conteiner-navigation-mobil">
<nav class="site-navigation-mobile"> <button class="button-menu-navigation-mobile" id="openAndCloseNavBarMobile"> <svg xmlns="http://www.w3.org/2000/svg" style=" color: currentColor; height: 30px; width: 30px;" height="16" width="14" viewBox="0 0 448 512"> <path fill="currentColor" d="M0 96C0 78.3 14.3 64 32 64H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z"></path> </svg> </button> </nav> <article class="content-site-navigation-mobile" id="contentSiteNavigationMobile"> <button class="button-close-content-site-navigation-mobile" id="buttonCloseontentSiteNavigationMobile"> X </button>
<img src="https://wiki.the-west.net/images/3/34/Dock_quests.png" alt="">Lista de Búsquedas
Inventario
<img src="https://es1.the-west.es/images/window/shop/icons/tabs/equip.png?1699352772" height="50px">Conjuntos
Trabajos
Oficios
<img src="https://westes.innogamescdn.com/images/items/yield/rodeo_trophy.png?5" height="50px">Logros
Duelos
Batallas de Fuerte
Ciudades
<img src="https://es1.the-west.es/images/window/shop/icons/tabs/veteran.png?1699352772" width="50px">Aventuras
<img src="https://westde.innogamescdn.com/images/items/yield/fireworks_low.png?5" alt="" width="40px">Eventos
Interfaz del juego
</article>
</section>
<script>
window.openAndCloseNavBarMobile.addEventListener('click', () => { $('#contentSiteNavigationMobile').toggleClass('open'); }); window.buttonCloseontentSiteNavigationMobile.addEventListener('click', () => { $('#contentSiteNavigationMobile').toggleClass('open'); });
</script>
<style>
@media (max-width: 768px) { #module-site-navigation{ display: none; } .container-navigation-mobil{ display: block; } }
.container-navigation-mobil{ width: 100%; height: 0px; margin: 0px; padding: 0px; display:none; box-sizing: border-box; } .site-navigation-mobile{ position: fixed; top: 55px; left: 0px; background: rgb(48, 37, 31); background-image: url(/skins/MirageWest/images/headline-bgtile.png); /*background-image: url(https://wiki.the-west.es/skins/MirageWest/images/headline-bgtile.png);*/ width: 100%; margin: 0px; padding-left: 25px; padding-bottom: 5px; padding-top: 5px; z-index: 1; box-shadow: inset 0px 0px 30px 2px #140a05; box-sizing: border-box; } .button-menu-navigation-mobile{ color: #e9d3a7; font-size: 17px; background: transparent; border: 0px; display: flex; align-items: center; justify-content: center; padding: 3px; box-sizing: border-box; } .button-menu-navigation-mobile:hover{ background: rgb(78, 60, 50); }
.content-site-navigation-mobile{ position: fixed; min-width: 250px; width: 0px; background: rgb(48, 37, 31); /*background-image: url( https://wiki.the-west.es/skins/MirageWest/images/headline-bgtile.png);*/ background-image: url(/skins/MirageWest/images/headline-bgtile.png); box-shadow: inset 0px 0px 30px 10px #140a05; top: 55px; left: -100vw; margin: 0px; padding-top: 50px; padding-left: 15px; padding-right: 15px; padding-bottom: 20px; z-index: 20; box-sizing: border-box;
display: grid; grid-template-columns: 1fr 1fr; transition: 1s; } .content-site-navigation-mobile.open{ left: 0px; width: 100vw; height: calc(100vh - 55px); }
.content-site-navigation-mobile div{ display: flex; align-items: center; list-style:none; min-height: 40px; max-height: 70px; color: #e9d3a7; font-weight: 700; font-size: 17px; margin: 5px; /*padding: 13px;*/ padding-left: 10px; /*background:#46352c;*/ background-color: rgb(36, 27, 22); border-radius: 10px; transition: transform 0.2s; box-sizing: border-box; } .content-site-navigation-mobile div:hover{ background: #e9d3a7; color: #46352c; font-weight: 900; transform: scale(1.10); } .content-site-navigation-mobile div img{ height: 60px; width: 60px; box-sizing: border-box; } .button-close-content-site-navigation-mobile{ position: absolute; width: 35px; height: 35px; background: transparent; border: 0px; color: #e9d3a7; font-size: 25px; font-weight: 900; top: 10px; right: 30px; padding:0px; margin: 0px; border-radius: 100%; } .button-close-content-site-navigation-mobile:hover{ background: #e9d3a7; color: #46352c; }
</style>