Lady Saxophone
Saxy Coder
Lady Saxophone
Saxy Coder
Lady Saxophone
Saxy Coder
MINI GUIDE: TABBED LAYOUTS
▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀
▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀
▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀
▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀
- Method #1: Simple Drop-Down Panels
Compatible Panels: Any
Required Properties: Height, Overflow
Optional Properties: Width, Transition, Padding, Position, etc.
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)
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.
Concept Image
Sample Code
- #id_about{height: 20px; overflow: hidden;}
#id_about:hover{height: 200px; overflow: auto;}
Problems, Quirks, and further notes:
- 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
Saxy Coder
MINI GUIDE: TABBED LAYOUTS
▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀
▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀
▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀
▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀
- Method #2: Draggy Tabs
Compatible Panels: Any (with low content)
Required Properties: Height, Width, Position, Overflow
Optional Properties: Transition, Transform, Padding, z-index, etc.
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.
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"!
Concept Image
Sample Code
- #id_about h2{position: absolute; transform: rotate(90deg); width: 100px; top: 60px; right: -60px;}
#id_about{height: 250px; width: 400px; position: absolute; top: 0; left: -430px;}
#id_about:hover{left: 0px;}
Problems, Quirks, and further notes:
- Scrollbars cannot be added
Depending on how you layer your tabs, things can get very jittery with panel movement
Lady Saxophone
Saxy Coder
MINI GUIDE: TABBED LAYOUTS
▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀
▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀
▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀
▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀
- Method #3: Fixed Headers and Expanding Panels
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.
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.
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!
Concept Image
Sample Code
- #id_about h2{position: fixed; top: 50px; left: 10px;}
#id_about{position: fixed; top: 70px; left: 10px; height: 0px; width: 300px; overflow: hidden; padding: 0 10px;}
#id_about:hover{height: 200px; overflow: auto; padding: 10px;}
Problems, Quirks, and further notes:
- Headers move as the page scrolls. Due to this, it's best to not let your page scroll if it bothers you.
Due to rendering issues in Webkit/Blink browsers, panel headers occasionally disappear when you apply this to media panels or other panels with flash objects
Lady Saxophone
Saxy Coder
MINI GUIDE: TABBED LAYOUTS
▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀
▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀
▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀
▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀
- Method #4: Fixed Headers and Sliding Panels
Compatible Panels: Any
Required Properties: Height, Width, Position, Z-index
Optional Properties: Padding, Margin, Transition, Transform, etc.
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.
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.
Concept Image
Sample Code
- #id_about h2{position: fixed; top: 50px; left: 10px;}
#id_about{position: fixed; top: 70px; left: -350px; height: 200px; width: 300px; overflow: hidden;}
#id_about:hover{overflow: auto; left: 10px;}
Problems, Quirks, and further notes:
- 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
Flash object issue from #3 still sometimes applies to this, so apply it to such panels with caution
Lady Saxophone
Saxy Coder
MINI GUIDE: TABBED LAYOUTS
▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀
▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀
▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀
▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀
- Method #5: Fredy's Version
Compatible Panels: Any
Required Properties: Position, Height, Width, Overflow, Margin, Padding
Optional Properties: Transition, etc.
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.
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.
Concept Image
Sample Code
- #column_1 .panel{position: static; padding: 0 5px; width: 300px; height: 0; margin: 0; overflow: hidden;}
#column_1 .panel:hover{padding: 5px; height: 200px; overflow-y: auto;}
#column_1 .panel h2{position: absolute;}
#column_1 .panel:nth-of-type(1) h2{left: 0;}
#column_1 .panel:nth-of-type(2) h2{left: 100px;}
#column_1 .panel:nth-of-type(3) h2{left: 200px;}
Problems, Quirks, and further notes:
- 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
Saxy Coder
Lady Saxophone
Saxy Coder
Lady Saxophone
Saxy Coder
Lady Saxophone
Saxy Coder
Lady Saxophone
Saxy Coder
Lady Saxophone
Saxy Coder
Lady Saxophone
Saxy Coder
Lady Saxophone
Saxy Coder