Is it possible to create tabs inside of a drawer/drop down?
I'd like to create tabs within in the drawer that is currently housing Izekiel's treasure so I can have his art, stats, credits all in that area.
Is this possible?
yes, but you'd have to do some restructuring.
essentially, you would utilize the same principles as 's tutorial, but only include the sections you want inside the hover drawer – so, treasure, stats, and your created divs for art and credits. position where you want the drawer to be and apply the drawer styling to it.
then you'd need to take the parts you DON'T want in that drawer – and position them to the left of it. column 2, story div, etc.
one thing to note is that 's tutorial gives relative positioning so it stays centered on the page. for your purposes, you'll probably want to use absolute positioning so the stuff outside of it doesn't get pushed around when the window size changes.
it's ugly and messy, but you can see this inside/outside principle in action here: Flowering
let me know if you need help or clarification on anything.
, Thank you so much! That is exactly what I was looking for. Do you mind sharing the code or if I use that coding to teach myself?
yeah, this is the code i used. it's just a very sloppily edited version of 's code, just to prove to myself that you can in fact have only certain divs inside the drawer. so obviously there's a lot of fine-tuning to be done here to achieve the effect you want (changing which divs are in the drawer, positioning, styling, etc), but the principle is there:
<style type="text/css">
url('https://bug.bz/subeta/css/reset/pet.css');
{ visibility: visible; } , , , { visibility: hidden; z-index: 10; } :target, :target, :target, :target, :target { visibility: visible; }
.navigation-links { position: fixed; top: 0; visibility: visible; height: 60px; width: 500px; text-align: center} .navigation-links a { display: inline-block; margin-left: 5px; margin-right: 5px; }
{ position: absolute; left: 500px; top: 0; width: 500px; height: 500px; max-height: 0; border-top: 30px solid ; transition: .5s all ease-in-out} :hover {max-height: 500px}
, , , , { border-bottom: 30px solid ; background-color: ; position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: auto; }
{margin: auto}
{ position: absolute; left: -300px; top: 0; }
</style>A pet story can go here!
, Thank you so much!