Replies

May 12, 2020 5 years ago
Necolasa
plays with dead things
User Avatar
Izekiel

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?

______________________ CW Ping Group ❤️Art Ping Group ❤️Overlay & Graphics Ping Group ❤️ deviantART

May 20, 2020 5 years ago
Frenchi
is hopelessly romantic
User Avatar
Vivisect

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.

May 20, 2020 5 years ago
Necolasa
plays with dead things
User Avatar
Izekiel

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

______________________ CW Ping Group ❤️Art Ping Group ❤️Overlay & Graphics Ping Group ❤️ deviantART

May 20, 2020 5 years ago
Frenchi
is hopelessly romantic
User Avatar
Vivisect

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!

May 20, 2020 5 years ago
Necolasa
plays with dead things
User Avatar
Izekiel

, Thank you so much!

______________________ CW Ping Group ❤️Art Ping Group ❤️Overlay & Graphics Ping Group ❤️ deviantART

Please log in to reply to this topic.