NavBarMobile.html

De Wiki The-West ES
Revisión del 22:47 20 feb 2024 de Gacorosis (discusión | contribs.) (Página creada con «<section class="conteiner-navigation-mobil"> <nav class="site-navigation-mobile"> <button class="button-menu-navigation-mobile close"> <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 32H…»)
(difs.) ← Revisión anterior | Revisión actual (difs.) | Revisión siguiente → (difs.)
Ir a la navegación.

<section class="conteiner-navigation-mobil">

   <nav class="site-navigation-mobile">
     <button class="button-menu-navigation-mobile close">
       <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">
   </article>

</section>


<style>

   @media (max-width: 768px) {
       #module-site-navigation{
           display: none;
       }
       .container-navigation-mobil{
           display: block;
       }
   }
   .container-navigation-mobil{
       width: 100%;
       margin: 0px;
       padding: 0px;
       display:none;
   }
   .site-navigation-mobile{
       position: fixed;
       top: 0px;
       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: 10;
       box-shadow: inset 0px 0px 30px 2px #140a05;
       
   }
   .button-menu-navigation-mobile{
       color: #e9d3a7;
       font-size: 17px;
       background: transparent;
       border: 0px;
       display: flex;
     align-items: center;
     justify-content: center;
     padding: 3px;
   }
   .button-menu-navigation-mobile:hover{
       background: rgb(78, 60, 50);
   }
   .content-site-navigation-mobile{
       position: relative;
       min-width: 250px;
       width: 250px;
       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: 38px;
       left: -250px;
       margin: 0px;
       padding-top: 20px;
       padding-left: 15px;
       padding-right: 15px;
       padding-bottom: 20px;
       border-bottom-right-radius: 20px;
   }
   .content-site-navigation-mobile ul li{
       display: flex;
       align-items: center;
       list-style:none;
       min-height: 40px;
       color: #e9d3a7;
       font-weight: 900;
       font-size: 15px;
       margin: 5px;
       /*padding: 13px;*/
       padding-left: 10px;
       /*background:#46352c;*/
       background-color: rgb(36, 27, 22);
       border-radius: 10px;
       transition: transform 0.2s; 
   }
   .content-site-navigation-mobile ul li:hover{
       background: #e9d3a7;
       color: #46352c;
       font-weight: 900;
       transform: scale(1.10);
   }

</style>