Due to all of the questions I've been getting about these, I decided to try and write a guide. There are a lot of different ways to to tabs, but the basic thing you need to keep in mind is that most of them rely on treating your panel header and the panel itself as two separate objects, and coding according to that. You will need to look into how to separate the two so that the movements of one do not affect the other... which is what I have explained below (to the best of my ability)
Some things to keep in mind about "tabbed" layouts and this guide:
Each method of tabs has its own quirks and restrictions Be wary of these. If you are selling profiles, I recommend choosing the most "idiot-proofed" method
I will be assuming that you have a basic ground knowledge of CSS This means that you know of the usual properties of height/width, positioning, and overflow. Knowing of padding and margins can be helpful as well, but is not absolutely necessary. What you definitely need to know though is the :hover psuedo.
This is somewhat advanced coding Personally, I didn't try tabbed layouts until after I had played around with other CSS for a month or two. If you try this when you are inexperienced, then you will most likely fail and make a mess of things, so I am just giving you a warning now.
I will not be giving you "stock codes" Precisely because there are so many different properties to target and account for while doing tabbed layouts that there isn't really a "one size fits all, stock code". If you are confused, experiment! Try and try and you will get what you want! I have sample codes for you to take and experiment with, but it is up for you to expand from there.
Tabs can be aligned to anywhere The best ones are horizontal or vertical. I really wouldn't suggest diagonal. Most of my sample pictures just show horizontal ones because they were easier to draw.
Posted: Tue Jan 20, 2015 11:33 am
Method #1: Simple Drop-Downs
This is the easiest method of doing "tabbed" layouts and it's a good starting point for beginning coders. (Actually, this is where I started with my "tab explorations" as well)
Compatible Panels: Any Required Properties: Height, Overflow Optional Properties: Width, Transition, Padding, Position, etc.
Explanation & Recommended Execution: Simply put, with this method you restrict the height of the panel so that only the top part appears. In order to cut off the rest of the content from appearing, you will need to target overflow of the panel. When the panel is then hovered over, increase the height and set the overflow to "auto" (unless you don't want a scrollbar to appear). You can easily apply this method to all of your panels with the universal selector for them or you can target them individually.
Problems, Quirks, etc.: - The panel header does not stay put when you scroll down through the panel - If panel position is not set to "absolute" or "fixed", when one expands, the other panels below it in the column will move downwards
Lady Saxophone
Vice Captain
Saxy Coder
Offline
Lady Saxophone
Vice Captain
Saxy Coder
Offline
Posted: Tue Jan 20, 2015 11:40 am
Method #2: Draggy Tabs
After you have become familiar with method #1, you can go onto this or #3 In my opinion, this method looks to coolest and nicest, but the fact that scrollbars cannot be added makes it hard to use for most people. I only use this for my own personal layouts or for those who are aware of the restrictions.
Compatible Panels: Any (with low content) Required Properties: Height, Width, Position, Overflow Optional Properties: Transition, Transform, Padding, z-index, etc.
Explanation & Recommended Execution: In the base state, only the header of the panel peeks out, usually from the borders of the page (though you can align it elsewhere depending on your overflow properties for your columns). When you hover over it, the rest of the panel slides out, and the header moves with it like it is attached to the panel. In order to get this, start off by shaping your panel with set heights and widths. Targeting each panel separately will make your life easier if you're still new to this. You will also want to remove the panel from the overflow of the panels around it, so use absolute or fixed positioning to do this. From there, assign top/bottom and left/right values to put it in the exact spot you want (which should be out of visible range). Before you completely "hide" it though, absolutely position your panel header so that it is outside the borders of the panel (You might want to specify a width for the general .panel h2 selector if you are doing multiple "tabs" ). If your "tab" is going on the left or right, you might also want to rotate the header 90deg using the transform property. Once it is arranged as you want, slide your panel out of visible range using negative top/bottom or right/left values. After that, all you need to do is set a positive top/bottom or left/right value for the :hover state and you've got your "draggy tab"!
Problems, Quirks, etc.: - Scrollbars cannot be added - Depending on how you layer your tabs, things can get very jittery with panel movement
Posted: Tue Jan 20, 2015 11:43 am
Method #3: Fixed Headers and Expanding Panels
This is my preferred method to use for any orders requesting "tabbed" layouts It is the most "idiot proofed" and also gives some of the best/cleanest looks.
Compatible Panels: Any (besides ones containing flash objects aka Media, House, Car, and sometimes Details) Required Properties: Height, Width, Padding, Overflow, Position Optional Properties: Z-index, Transition, Transform, Margin, etc.
Explanation & Recommended Execution: Err... basically... the panel headers are separated from the overflow of the parent and remain in a fixed location while the rest of the panel expands and contracts in size. To start, I find it easier to target my panels and group whichever ones are going to be tabbed in a row together. If you are centering the layout, center your columns and then use absolute positioning on your panels. If you are not centering it, you can use fixed positioning on your panels... or set your #columns to cover the entire page and then use absolute. Anyway, now that you've got your panels somewhat under control, switch over to targeting your panel header. Use fixed positioning on it in order to separate it from the parent and line it up where you want it to be (note: if your layout is centered, use margin-left instead of left). Now then, back to your panels. Line your panel up so that it is almost touching the header and make any other minor adjustments you want. From there, the steps are almost like Method #1 -- but in this case, you reduce the height or width of the panel to 0. Target the padding as well, or else you'll have left-over panel appearing. And then for the :hover state, just increase the height or width to some specified amount, increase the padding again, set the overflow to auto, and you should be good!
Problems, Quirks, etc.: - Page cannot scroll, or if it does, used fixed positioning on the panels - Due to rendering issues in Webkit/Blink browsers, panel headers occasionally disappear when you apply this to media panels or other panels with objects
Lady Saxophone
Vice Captain
Saxy Coder
Offline
Lady Saxophone
Vice Captain
Saxy Coder
Offline
Posted: Tue Jan 20, 2015 11:53 am
Method #4: Fixed Headers and Sliding Panels
This is actually a combination of #2 and #3 -- it uses #3's headers, but #2's concept of moving the panels out of visible range and then making them slide back in. The visual effect is very similar to #3, but slightly different.
Compatible Panels: Any Required Properties: Height, Width, Position, Z-index Optional Properties: Padding, Margin, Transition, Transform, etc.
Explanation & Recommended Execution: Ehhh... I'm not going to completely repeat myself all over again. Like I stated earlier, this is pretty much the same as #3 -- use fixed positioning on the panel headers and absolute or fixed positioning on the panels. Also, you will probably need to apply a z-index to the panel header so that it layers on top of the moving panels. Instead of changing the height/width/padding in the hovered state though, you change top/bottom and/or left/right alignment of the panel, so that it is out of visible range in the regular state and moves into visible range in the hovered state.
Problems, Quirks, etc.: - It's really a good idea to not let your page scroll... - The motion of this is a lot more jittery when you apply transition timing
Posted: Wed Jan 21, 2015 1:57 pm
Method #5: Fredy's Version
I'm just going to call it that because Fredy is the one who uses it most often and he even made the original thread about it. Granted, you can't really go and copyright code, but it's easier to refer to it as "Fredy's Method" rather than "Static Panel Positioning Method" or something. Anyway, this method is actually pretty simple. But the amount of other coding and things you have to take into consideration in order to turn it into something you can use later makes it a bit of a pain to use.
Compatible Panels: Any Required Properties: Position, Height, Width, Overflow, Margin, Padding Optional Properties: Transition, etc.
Explanation & Recommended Execution: I think Fredy already explains it pretty well in his thread, but just to re-cap: You want to remove the panel headers from their parents. Method #3/4 suggests doing that with fixed positioning, but the problem is that when you scroll down the page, the panel headers follow you. Instead, if you apply static positioning to your panels and then use absolute positioning on your headers, you can separate the two without this problem. From there, in order to create the tabs, it's pretty much the same method as #3 describes.
Problems, Quirks, etc.: - Due to static positioning of the panels, you need to use margin adjustments in order to position them to where you want, instead of the regular left/right and top/bottom values. - Since you're using margin values on top of static positioning, the order of your panels and which columns you place them in matter greatly, especially when transferring the code between profiles - Also due to static positioning, all of your panel "Edit" buttons get moved into the top left of your columns. This can be fixed by targeting the buttons and moving them somewhere else though
Lady Saxophone
Vice Captain
Saxy Coder
Offline
Lady Saxophone
Vice Captain
Saxy Coder
Offline
Posted: Wed Jan 21, 2015 2:39 pm
Method #6: Layered Tabs
This was one of my earlier formats of tabbed layouts, and I don't really use it anymore, but it is another option. It is possible to mimic this style with Methods #3, 4, or 5 by not applying a transition time to the panels, and since those methods allow for a scrollbar (where this method does not), I would recommend using them instead. The only time this works nicely is for circle layouts.
Compatible Panels: Any which are low-content and do not have Flash objects in them Required Properties: Z-index, Position, Overflow Optional Properties: Height, Width, etc.
Explanation & Recommended Execution: For this layout, you basically manipulate all of your panels to be the same size and then position them all in the same spot. Then you apply a z-index to one of them -- this will layer on top (all panels have a base z-index of 0). Now, the problem is that you have all of your panels in the right spot... but you can't access any but the top one. So use absolute positioning to move the panel headers outside of the panels and align them however you want (you could use fixed, but that would turn this layout into method #3 again). Now that you've got everything in place, for the :hover state, all you have to do is apply a greater z-index to the panels than the index you applied to the "cover" panel (the one on top of them all) and you're good to go!
Problems, Quirks, etc.: - Flash objects cannot be stacked -- they layer on top of any panels put on top of them - Scrollbars cannot be added - There are no transitions which can be added to ease the shift in z-index
Posted: Wed Jan 21, 2015 3:06 pm
Whew, okay, I think that's it - Waits for questions and complaints to pour in -
And remember: this isn't just limited to your panels! You can make entire columns follow some of these tricks. "But there is no header selector for columns!" -- Create your own header by added content with the :before or :after psuedos c:
is it possible to set a tabbed section to stay out while you scroll the window down? i'm thinking something along the lines of setting the section itself to stay open when you hover over it or set the header tab to keep the section open if you click the header?
Posted: Wed Jan 28, 2015 7:55 am
Skye Antaeliel
is it possible to set a tabbed section to stay out while you scroll the window down? i'm thinking something along the lines of setting the section itself to stay open when you hover over it or set the header tab to keep the section open if you click the header?
"Click" effects are not possible with CSS. You can mimic them by abusing spoiler buttons, but I don't really support that so I am not too familiar with how to do that :c You can make the tabs follow you as you scroll down the page though... just set the panel headers to "fixed" positioning and the panels themselves as well. As far as staying open, if you manipulate things right, you might be able to... (like when you are hovering over #main, set your #about height/width to something). Not too sure if that's what you are after?
darn it, you just reminded me that I need to add the finishing touches on this guide
i think so.... cause as i understand it this code seems rather simple... it's a matter of setting a hover effect on the header that adjusts the section size which you default set to 0. as such i imagine you could set the same hover effect to the section itself and align it directly below the header so when you scroll down it tricks itself into staying open.
the main problem i see here though is what about people who don't have scroll wheels... they would be unable to view the sections.
Posted: Fri Mar 20, 2015 10:02 pm
Hello! I've been trying to split the header bar like in your profile, but I can't manage to get the right section to align to the right. Do you have any tips on how to do that?
Hello! I've been trying to split the header bar like in your profile, but I can't manage to get the right section to align to the right. Do you have any tips on how to do that?
Ah, that's actually abusing a "glitch" on the profiles = w = ;; (I have it reported so it might be eventually fixed, but yeah, I'm abusing it myself in the meantime)
You have to disable the header CSS at the bottom of your Theme Override. So do you know what to do in order to break/disable any lines of code under a certain line...? c;
Posted: Fri Mar 20, 2015 10:36 pm
Lady Saxophone
AlkalineGhost
Hello! I've been trying to split the header bar like in your profile, but I can't manage to get the right section to align to the right. Do you have any tips on how to do that?
Ah, that's actually abusing a "glitch" on the profiles = w = ;; (I have it reported so it might be eventually fixed, but yeah, I'm abusing it myself in the meantime)
You have to disable the header CSS at the bottom of your Theme Override. So do you know what to do in order to break/disable any lines of code under a certain line...? c;
im not sure what you mean XD does it have to do with the display:block? or :disabled idk im throwing stones here XD
edit: someone said put a { at the end. what does that do exactly?
im not sure what you mean XD does it have to do with the display:block? or :disabled idk im throwing stones here XD
Well, keyword here is "break" = w = It's something any good coder would never do because it isn't proper syntax... But what happens when you forget to close your brackets or leave an open note line...?
)
