Diferencia entre revisiones de «NavBarMobile.html»

De Wiki The-West ES
Ir a la navegación.
Sin resumen de edición
Sin resumen de edición
 
(No se muestran 8 ediciones intermedias del mismo usuario)
Línea 13: Línea 13:
     <article class="content-site-navigation-mobile" id="contentSiteNavigationMobile">
     <article class="content-site-navigation-mobile" id="contentSiteNavigationMobile">
       <button class="button-close-content-site-navigation-mobile" id="buttonCloseontentSiteNavigationMobile"> X </button>
       <button class="button-close-content-site-navigation-mobile" id="buttonCloseontentSiteNavigationMobile"> X </button>
           <div><img src="https://wiki.the-west.net/images/3/34/Dock_quests.png" alt=""><span>Lista de Búsquedas</span></div>
           <a title="Indice alfabético de Búsquedas" href="/wiki/Indice_Alfab%C3%A9tico_de_B%C3%BAsquedas"><img src="https://wiki.the-west.net/images/3/34/Dock_quests.png" alt=""><span>Lista de Búsquedas</span></div>
           <div><div style="width: 50px; height: 50px; background: url(https://westes.innogamescdn.com/images/interface/dock_icons.png?4) no-repeat; background-position-x: -208px !important; background-position-y: -52px !important;"></div><span>Inventario</span></div>
           <a title="Items" href="/wiki/Items"><div style="width: 50px; height: 50px; background: url(https://westes.innogamescdn.com/images/interface/dock_icons.png?4) no-repeat; background-position-x: -208px !important; background-position-y: -52px !important;"></div><span>Inventario</span></a>
           <div><img src="https://es1.the-west.es/images/window/shop/icons/tabs/equip.png?1699352772" height="50px"><span>Conjuntos</span></div>
           <a title="Lista de Conjuntos" href="/wiki/Lista_de_conjuntos"><img src="https://es1.the-west.es/images/window/shop/icons/tabs/equip.png?1699352772" height="50px"><span>Conjuntos</span></a>
           <div><div style="width: 50px;height: 50px;background: url(https://westes.innogamescdn.com/images/interface/dock_icons.png?4) no-repeat;background-position-x: -260px !important;background-position-y: -52px !important;"></div><span>Trabajos</span></div>
           <a title="Lista de trabajos" href="/wiki/Lista_de_trabajos"><div style="width: 50px;height: 50px;background: url(https://westes.innogamescdn.com/images/interface/dock_icons.png?4) no-repeat;background-position-x: -260px !important;background-position-y: -52px !important;"></div><span>Trabajos</span></a>
           <div><div style="width: 50px;height: 50px;background: url(https://westes.innogamescdn.com/images/interface/dock_icons.png?4) no-repeat;background-position-y: -52px !important;"></div><span>Oficios</span></div>
           <a title="Oficios" href="/wiki/Oficios"><div style="width: 50px;height: 50px;background: url(https://westes.innogamescdn.com/images/interface/dock_icons.png?4) no-repeat;background-position-y: -52px !important;"></div><span>Oficios</span></a>
           <div><img src="https://westes.innogamescdn.com/images/items/yield/rodeo_trophy.png?5" height="50px"><span>Logros</span></div>
           <a title="Logros" href="/wiki/Logros"><img src="https://westes.innogamescdn.com/images/items/yield/rodeo_trophy.png?5" height="50px"><span>Logros</span></a>
           <div><div style="width: 50px; height: 50px; background: url(https://westes.innogamescdn.com/images/interface/dock_icons.png?4) no-repeat; background-position-x: -52px !important; background-position-y: -52px !important;"></div><span>Duelos</span></div>
           <a title="Duelos" href="/wiki/Duelos"><div style="width: 50px; height: 50px; background: url(https://westes.innogamescdn.com/images/interface/dock_icons.png?4) no-repeat; background-position-x: -52px !important; background-position-y: -52px !important;"></div><span>Duelos</span></a>
           <div><div style="width: 50px; height: 50px; background: url(https://westes.innogamescdn.com/images/interface/dock_icons.png?4) no-repeat; background-position-x: -105px !important; background-position-y: -52px !important;"></div><span>Batallas de Fuerte</span></div>
           <a title="Batalla de fuerte" href="/wiki/Batallas_de_fuerte"><div style="width: 50px; height: 50px; background: url(https://westes.innogamescdn.com/images/interface/dock_icons.png?4) no-repeat; background-position-x: -105px !important; background-position-y: -52px !important;"></div><span>Batallas de Fuerte</span></a>
           <div><div style="width: 50px; height: 50px; background: url(https://westes.innogamescdn.com/images/interface/dock_icons.png?4) no-repeat; background-position-x: -210px !important; background-position-y: -104px !important;"></div><span>Ciudades</span></div>
           <a title="Ciudades" href="/wiki/Ciudades"><div style="width: 50px; height: 50px; background: url(https://westes.innogamescdn.com/images/interface/dock_icons.png?4) no-repeat; background-position-x: -210px !important; background-position-y: -104px !important;"></div><span>Ciudades</span></a>
           <div><img src="https://es1.the-west.es/images/window/shop/icons/tabs/veteran.png?1699352772" width="50px"><span>Aventuras</span></div>
           <a title="Aventuras" href="/wiki/Aventuras"><img src="https://es1.the-west.es/images/window/shop/icons/tabs/veteran.png?1699352772" width="50px"><span>Aventuras</span></a>
           <div><img src="https://westde.innogamescdn.com/images/items/yield/fireworks_low.png?5" alt="" width="40px"><span style="padding-left:10px">Eventos</span></div>
           <a title="Eventos" href="/wiki/Eventos_especiales"><img src="https://westde.innogamescdn.com/images/items/yield/fireworks_low.png?5" alt="" width="40px"><span style="padding-left:10px">Eventos</span></a>
           <div><span>Interfaz del juego</span></div>
           <a title="Interfaz del juego" href="/wiki/Interfaz,_Mapa"><span>Interfaz del juego</span></a>
     </article>
     </article>
</section>
</section>
Línea 36: Línea 36:
       $('#contentSiteNavigationMobile').toggleClass('open');
       $('#contentSiteNavigationMobile').toggleClass('open');
     });   
     });   
   
</script>
</script>
    
    


<style>
<style>  
   
    @media (max-width: 768px) {
        #module-site-navigation{
            display: none;
        }
        .container-navigation-mobil{
            display: block;
        }
    }
 
     .container-navigation-mobil{
     .container-navigation-mobil{
         width: 100%;
         width: 100%;
Línea 67: Línea 56:
         /*background-image: url(https://wiki.the-west.es/skins/MirageWest/images/headline-bgtile.png);*/
         /*background-image: url(https://wiki.the-west.es/skins/MirageWest/images/headline-bgtile.png);*/
         width: 100%;
         width: 100%;
        height:40px;
         margin: 0px;
         margin: 0px;
         padding-left: 25px;
         padding-left: 25px;
         padding-bottom: 5px;
         padding-bottom: 5px;
         padding-top: 5px;
         padding-top: 3px;
         z-index: 1;
         z-index: 1;
         box-shadow: inset 0px 0px 30px 2px #140a05;
         box-shadow: inset 0px 0px 30px 2px #140a05;
Línea 93: Línea 83:
         position: fixed;
         position: fixed;
         min-width: 250px;
         min-width: 250px;
         width: 0px;
         width: 100vw;
        height: calc(100vh - 55px);
         background: rgb(48, 37, 31);
         background: rgb(48, 37, 31);
         /*background-image: url( https://wiki.the-west.es/skins/MirageWest/images/headline-bgtile.png);*/
         /*background-image: url( https://wiki.the-west.es/skins/MirageWest/images/headline-bgtile.png);*/
Línea 105: Línea 96:
         padding-right: 15px;
         padding-right: 15px;
         padding-bottom: 20px;
         padding-bottom: 20px;
         z-index: 20;
         z-index: 10;
         box-sizing: border-box;
         box-sizing: border-box;
         display: grid;
         display: grid;
         grid-template-columns: 1fr 1fr;
         grid-template-columns: 1fr 1fr;
        grid-template-rows: repeat(auto-fill, minmax(80px, 80px));
         transition: 1s;
         transition: 1s;
   
        overflow-x: auto;
     }
     }
     .content-site-navigation-mobile.open{
     .content-site-navigation-mobile.open{
Línea 119: Línea 110:
     }
     }


     .content-site-navigation-mobile div{
     .content-site-navigation-mobile a{
         display: flex;
         display: flex;
         align-items: center;
         align-items: center;
         list-style:none;
         list-style:none;
         min-height: 40px;
         min-height: 70px;
         max-height: 70px;
         max-height: 70px;
         color: #e9d3a7;
         color: #e9d3a7;
Línea 137: Línea 128:
         box-sizing: border-box;
         box-sizing: border-box;
     }
     }
     .content-site-navigation-mobile div:hover{
     .content-site-navigation-mobile a:hover{
         background: #e9d3a7;
         background: #e9d3a7;
         color: #46352c;
         color: #46352c;
Línea 143: Línea 134:
         transform: scale(1.10);
         transform: scale(1.10);
     }
     }
     .content-site-navigation-mobile div img{
     .content-site-navigation-mobile a img{
         height: 60px;
         height: 50px;
         width: 60px;
         width: 50px;
         box-sizing: border-box;
         box-sizing: border-box;
     }
     }
Línea 166: Línea 157:
         background: #e9d3a7;
         background: #e9d3a7;
         color: #46352c;
         color: #46352c;
    }
    @media (max-width: 768px) {
        #module-site-navigation{
            display: none;
        }
        .container-navigation-mobil{
            display: block;
        }
    }
    @media (max-width: 320px) {
        .content-site-navigation-mobile{
            grid-template-columns: 1fr;
        }
     }
     }
</style>
</style>

Revisión actual - 21:56 22 feb 2024

<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>

<a title="Indice alfabético de Búsquedas" href="/wiki/Indice_Alfab%C3%A9tico_de_B%C3%BAsquedas"><img src="https://wiki.the-west.net/images/3/34/Dock_quests.png" alt="">Lista de Búsquedas <a title="Items" href="/wiki/Items">

Inventario</a>

         <a title="Lista de Conjuntos" href="/wiki/Lista_de_conjuntos"><img src="https://es1.the-west.es/images/window/shop/icons/tabs/equip.png?1699352772" height="50px">Conjuntos</a>

<a title="Lista de trabajos" href="/wiki/Lista_de_trabajos">

Trabajos</a> <a title="Oficios" href="/wiki/Oficios">

Oficios</a>

         <a title="Logros" href="/wiki/Logros"><img src="https://westes.innogamescdn.com/images/items/yield/rodeo_trophy.png?5" height="50px">Logros</a>

<a title="Duelos" href="/wiki/Duelos">

Duelos</a> <a title="Batalla de fuerte" href="/wiki/Batallas_de_fuerte">

Batallas de Fuerte</a> <a title="Ciudades" href="/wiki/Ciudades">

Ciudades</a>

         <a title="Aventuras" href="/wiki/Aventuras"><img src="https://es1.the-west.es/images/window/shop/icons/tabs/veteran.png?1699352772" width="50px">Aventuras</a>
         <a title="Eventos" href="/wiki/Eventos_especiales"><img src="https://westde.innogamescdn.com/images/items/yield/fireworks_low.png?5" alt="" width="40px">Eventos</a>
         <a title="Interfaz del juego" href="/wiki/Interfaz,_Mapa">Interfaz del juego</a>
   </article>

</section>

<script>

   window.openAndCloseNavBarMobile.addEventListener('click', () => {
     $('#contentSiteNavigationMobile').toggleClass('open');
   });   
   
   window.buttonCloseontentSiteNavigationMobile.addEventListener('click', () => {
     $('#contentSiteNavigationMobile').toggleClass('open');
   });  

</script>


<style>

   .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%;
       height:40px;
       margin: 0px;
       padding-left: 25px;
       padding-bottom: 5px;
       padding-top: 3px;
       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: 100vw;
       height: calc(100vh - 55px);
       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: 10;
       box-sizing: border-box;
       display: grid;
       grid-template-columns: 1fr 1fr;
       grid-template-rows: repeat(auto-fill, minmax(80px, 80px));
       transition: 1s;
       overflow-x: auto;
   }
   .content-site-navigation-mobile.open{
       left: 0px;
       width: 100vw;
       height: calc(100vh - 55px);
   }
   .content-site-navigation-mobile a{
       display: flex;
       align-items: center;
       list-style:none;
       min-height: 70px;
       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 a:hover{
       background: #e9d3a7;
       color: #46352c;
       font-weight: 900;
       transform: scale(1.10);
   }
   .content-site-navigation-mobile a img{
       height: 50px;
       width: 50px;
       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;
   }
   @media (max-width: 768px) {
       #module-site-navigation{
           display: none;
       }
       .container-navigation-mobil{
           display: block;
       }
   }
   @media (max-width: 320px) {
       .content-site-navigation-mobile{
           grid-template-columns: 1fr;
       }
   }

</style>