Answered, please lock :)
Replies
Hi, guys. I'm trying to teach myself how to code a pet profile. I'm stuck on what I think are hover tabs. Those tabs on pet profiles that 'pop out' when you hover over them? Like here. The peach tabs that roll out to show pet spotlight trophy at the top and treasures at the bottom. Anyway, I'm assuming they're hover tabs.
I've searched and I can't find any info on how to code these. I must be searching the wrong keywords? Could someone explain how to code these, or point me to a source that explains it?
[tot=Zalda] [egg=Zalda] [tp=Zalda]
Let me give this a try.
What you're looking for can be called expandable div. I'm not sure of the special terminology because I do not study coding myself, so I call it that XD.
Basically for this to work you'll need to create a div and give it border. The border acts as the tab that you hover over to expand the rest of the content.
I'm going to create a random code and break down its components.
Toggle for code
{ /Name of the div to expand on hover/
padding: 0px 5px 0px 5px; /How far away from the border you want the content (image, text) to be/
border-radius: 0px 0px 10px 10px; /this creates rounded border/
height: 0px; /set to 0px so that the tab is hidden; the height value set to 0px also decides that the tab when hovered expands upward or downward/
width: 120px; /set to however wide you want the tab to be/
border-width: 2px 2px 20px 2px; /the values correspond to top-right-bottom-left. I want the tab to expand downward so I set the bottom border to be the thickest one/
border-style:solid;
border-color:; /the colour of the border to hover over/
overflow:hidden; /to hide content/
position: absolute; /to set the position of the tab on the page/
top: 0px; /how far from top you want the tab to be/
left: 200px; /how far from left you want the tab to be/
transition:height 0.5s;
-webkit-transition:height 0.5s; /this is to ensure the transition is spread over certain amount of time, so it feels smoother/
text-align: center;
}
:hover { /the :hover selector specifies the behaviour of the div when hovered over/
height: 115px; /* This is the expanded height on hover */
overflow:auto; /This is to make sure all content is displayed. If you don't want a scrollbar to appear, leave this out of the code/
}
To play around with the tab appearance, I recommend the following: Padding properties : To see how the tab appears in close mode when you tweak the padding of the content inside it. Border-Width properties: To see how the borders (or hover tab) looks when you change things around. Border-radius properties: Manipulate how the border looks
You may also want to add background-color value to the tab to change the look of the tab when fully expanded. A transparent background may mean the tab will overlap with the background beneath it. It will make it super difficult to read if the page has a busy background.
You can copy and test this code on your profile. Please let me know if you need further help ^^.
|
This is perfect! Thank you so much for taking the time to explain it to me! I have successfully coded a tab. :) It took some trial and error to figure out how to make it pop out to the right, but it looks great now and really fits in with the profile.
Thank you again!
[tot=Zalda] [egg=Zalda] [tp=Zalda]