Diferencia entre revisiones de «OptionBar.html»
Ir a la navegación.
Sin resumen de edición |
Sin resumen de edición |
||
Línea 125: | Línea 125: | ||
justify-content: end; | justify-content: end; | ||
transition: 1s; | transition: 1s; | ||
z-index: | /*z-index: 0;*/ | ||
} | } | ||
.optionBar.open{ | .optionBar.open{ |
Revisión actual - 20:01 17 feb 2024
<section class="optionBar">
<button class="openClose_OptionBar" id="openAndCloseOptionBar"></button>
<a class="containerOption" title="Linea de Bùsquedas" href="/wiki/Indice_Alfab%C3%A9tico_de_B%C3%BAsquedas">
Linea de Búsquedas
<img alt="Quests" src="https://wiki.the-west.net/images/3/34/Dock_quests.png" decoding="async" width="52" height="52">
</a>
<a class="containerOption" title="Items" href="/wiki/Items">
Items
</a>
<a class="containerOption" title="Conjuntos" href="/wiki/Lista_de_conjuntos">
Conjuntos/Sets
<img alt="Quests" src="https://es1.the-west.es/images/window/shop/icons/tabs/equip.png?1699352772" decoding="async" width="52" height="52">
</a>
<a class="containerOption" title="Lista de trabajos" href="/wiki/Lista_de_trabajos">
Lista de Trabajos
</a>
<a class="containerOption" title="Artesanía" href="/wiki/Oficios">
Artesanía
</a>
<a class="containerOption" title="Logros" href="/wiki/Logros">
Logros
<img alt="Quests" src="https://westes.innogamescdn.com/images/items/yield/rodeo_trophy.png?5" decoding="async" width="52" height="52">
</a>
<a class="containerOption" title="Duelos" href="/wiki/Duelos">
Duelos
</a>
<a class="containerOption" title="Batallas de Fuerte" href="/wiki/Batallas_de_fuerte">
Batallas de Fuerte
</a>
<a class="containerOption" title="Ciudades" href="/wiki/Ciudades">
Ciudades
</a>
<a class="containerOption" title="Aventuras" href="/wiki/Aventuras">
Aventuras
<img alt="Quests" src="https://es1.the-west.es/images/window/shop/icons/tabs/veteran.png?1699352772" decoding="async" width="52" height="52">
</a>
</section>
<style>
.optionBar{ height: 550px; width: 55px; position: fixed; top: 100px; background-image: url(/skins/MirageWest/images/headline-bgtile.png); box-shadow: inset 0px 0px 30px 8px #140a05; display: grid; padding: 5px; padding-top: 20px; padding-left: 0px; border-top-right-radius: 20px; border-bottom-right-radius: 20px; flex-direction: column; border-right: 3px solid #100b07; justify-content: end; transition: 1s; /*z-index: 0;*/ } .optionBar.open{ width: 200px; } .containerOption{ height: 52px; width: 295px; display: flex; justify-content: flex-end; } .optionInBar{ background: url(https://wiki.the-west.net/images/a/a2/Dock_buttons.png) no-repeat; width: 52px !important; height: 52px !important; } .containerOption:hover .optionInBar{ background-position-x: -52px !important; } .openClose_OptionBar{ position: absolute; right: -35px; top: 37px; background: transparent; border: 0px solid; background: url(https://westes.innogamescdn.com/images/tw2gui/arrow_updown.png) no-repeat; width: 54px !important; height: 12px !important; background-position: 0px -2px; rotate: 90deg; /* background-position: 0px -16px; */ }
.openClose_OptionBar.reverse{
background-position: 0px -16px; } .openClose_OptionBar:hover{ box-shadow: 0px 0px 7px 1px yellow; border-top-right-radius: 10px; border-top-left-radius: 10px; } .textOption{ background: url(https://westes.innogamescdn.com/images/tw2gui/window/minimized_bg.png?24) left top; height: 32px; width: 150px; background-position: 0px -32px; margin-top: 10px; color: white; font-weight: bold; font-size: 12px; text-align: center; line-height: 30px; } .containerOption:hover .textOption{ box-shadow: 0px 0px 6px 0px yellow; } @media (max-width: 768px) { .optionBar{ display: none; } }
</style> <script>
window.openAndCloseOptionBar.addEventListener('click', () => { $('.optionBar').toggleClass('open'); $('.openClose_OptionBar').toggleClass('reverse'); });
</script>