tabbed content
…
may come handy
Web pages can be as tall, and contain as many sections, as we want them to. Nevertheless, it does not always make sense to put everything up front sequenced down very tall pages.
Even if it should all be there on same page, information aimed at different groups of visitors may as well be split up in suitable chunks with most stowed away so as to make a page appear less crowded. The precondition is that it all is within easy reach.
We have had ways to build tabbed site menus for a very long time, using
hover effects and/or scripting. Maybe not all realize that we can
show/hide chunks of content using INPUT, a technique that
doesn't rely so much on a steady hand to work flawlessly.
That solutions based on INPUT will only work in
browser versions made in later years, is OK with me. I see no point in
using old browser versions, when new and better ones are available.
five tab flipbook demo
overview
features…
- content‐blocks hold any type and mix of content.
- flexible content‐block size = vertically expandable beyond min-height.
- responsive (with the page).
HTML/CSSonly (no script).- not using
target= does not mess up page addresses with in‐page links. - hidden in clear view = no “invisible” content positioned outside browser window.
Having up to five tabs on a line looks fine to me on this
page, where a line spans approx. 40em on wide and 20em on very narrow
screens.
Having more tabs, and/or letting tabs
span more than one line, is of course possible – see below, but it then
easily will appear crowded.
flipbook
You may call it what you like, as this tabbed flipbook is of course well
suited to split up and present any content, being it text, images, videos,
menus, or a mixture of all. Its use is, as for most things web, only
limited by our imagination and taste.
It can easily be styled with transitions and effects, to satisfy those who believe web pages need that sort of thing. Personally I don't.
For this demo I have kept everything simple, as it is more a proof of
concept than anything. Not much chance that the concept will end up in the
garbage bin, but it does need time to grow into something useful.
picture #1
picture #2
dry lake.
Signs of a very dry winter and spring in Florida.
Image borrowed from sketchbook, sixth sheet.
finally
This page‐design itself is responsive, and
the tabbed flipbook with its content naturally follows suit and adjusts
to a wide range of browser‐windows.
Horizontally tabbed interfaces like this are not very suitable for really small screens, as those tabs will end up being compacted too much. Thus, this demo expands fully open on narrow screens – break‐point at 501px.
I have a preference for “quiet and simple” web designs, down to the smallest details. Consequently, for me it is natural to implement “clever” solutions in such a way that they do not immediately call for attention and/or disturb the average visitor.
ten tab flipbook demo
overview
features…
- content‐blocks hold any type and mix of content.
- flexible content‐block size = vertically expandable beyond min-height.
- responsive (with the page).
HTML/CSSonly (no script).- not using
target= does not mess up page addresses with in‐page links. - hidden in clear view = no “invisible” content positioned outside browser window.
Spreading up to ten tabs over two lines is really stretching it.
It definitely looks crowded up there, but if that many “sheets” are
needed it can be made to work.
More tabs and/or
more lines can be inserted applying the same technique, but I would rather
have fewer and wider tabs.
flipbook
You may call it what you like, as this tabbed flipbook is of course well
suited to split up and present any content, being it text, images, videos,
menus, or a mixture of all. Its use is, as for most things web, only
limited by our imagination and taste.
It can easily be styled with transitions and effects, to satisfy those who believe web pages need that sort of thing. Personally I don't.
For this demo I have kept everything simple, as it is more a proof of
concept than anything. Not much chance that the concept will end up in the
garbage bin, but it does need time to grow into something useful.
picture #1
picture #2
dry lake.
Signs of a very dry winter and spring in Florida.
Image borrowed from sketchbook, sixth sheet.
picture #3
red velvet.
A plant observed on one of the many rest areas along the US highways.
Image borrowed from sketchbook, first sheet.
picture #4
picture #5
picture #6
sandy neighborhood.
Five minutes walk from the house.
Image borrowed from sketchbook, seventh sheet.
picture #7
finally
This page‐design itself is responsive, and
the tabbed flipbook with its content naturally follows suit and adjusts
to a wide range of browser‐windows.
Horizontally tabbed interfaces like this are not very suitable for really small screens, as those tabs will end up being compacted too much. Thus, this demo expands fully open on narrow screens – break‐point at 501px.
I have a preference for “quiet and simple” web designs, down to the smallest details. Consequently, for me it is natural to implement “clever” solutions in such a way that they do not immediately call for attention and/or disturb the average visitor.
one more for the archives
Not much to add, other than that the above is built on a mix of solutions spread around on my own sites. Home‐built is well‐built – at least some of the time.
Philippe Wittenbergh has helped making my “tabbed content” solutions more AT friendly.
sincerely 
Hageland 22.jan.2014
23.jan.2014 - styled for moving two-line tabs.
24.jan.2014 - testing ways to make tabs stand out.
25.jan.2014 - testing shortened tab-line variations.
29.jan.2014 - optimized selector chains.
20.sep.2016 - updated minimum page-width to 501px, and changed tab-margins to
reflect latest site-wide line-up upgrade.
last rev: 20.sep.2016