Dear students,
Last time we started implementing dropdown menus. We decided to continue that effort today, though I do want to add one extra and related exercised: a tabbed viewer.
Here’s your TODO list:
See you next time!
First, we finish up our lab 17 exercise on switching between small and large displays of our nav
links.
Second, create a lab18
directory. Add a partners.html
and include your first names and last initials. In this exercise, we’ll tackle the task of presenting content in tabs.
Create a second page named tabs.html
and an accompanying stylesheet named tabs.css
. Your goal is to create a page that allows the viewer to switch between views within a single web page. Something like this:
I suggest tackling this exercise in this order:
div
with an ID of parent
.parent
three div
s of class tab
. Give each a unique ID. Give as content the labels of the tabs.pointer
.:focus
pseudoselector rule for these tabs so that focused tab
s have a darker background color. The :focus
pseudo-selector is much like :hover
, but focus can “stick.” It is activated when the viewer clicks on an item. This is important for us, because unlike :hover
, we want a tab to stay selected even after the mouse moves on.:focus
rule doesn’t have any effect. That’s because div
s aren’t naturally focusable. In the HTML, add a tabindex
attribute of 0 to each of your tab buttons. The name is coincidental. tabindex
refers to the actual Tab key on your keyboard, not the tabbed view that we are trying to create. Pressing the Tab key cycles through the focusable elements in the page, and by giving your div
s a tabindex
, they become focusable. The numeric value of the tabindex
imposes an ordering on the focusable elements. After setting it, you should be able to see your focused tab button show prominently against its neighbors.outline
property to none
.div
to parent
for the default view. (Your parent
should now have four children.) Give it the ID panel0
and class panel
. Give panel0
the muted background color that you used for non-focused tab buttons. It will hold the default content when no tab has been focused. Put whatever you want in it.div
s to parent
for the views that will appear when their corresponding tab is focused. Give them IDs panel1
, panel2
, and panel3
. Put them all in the class panel
. Give them each some unique content so that you can test your work. Give one an image, another a paragraph of text, and another a list or quote.panel
class to appear below the tabs. This is most easily done with absolute positioning. First, give parent
relative positioning so it can serve as an anchor point. Then give panel
absolute positioning. Anchor the left edge against the anchor’s left edge. Offset them from the top of their anchor by the height of the tabs. We don’t know exactly how tall the tabs are, so use a relative measure. You should see them all stack on top of each other below the buttons.panel
s by the darker, focused color. panel0
should override this to use the lighter, unfocused color.parent
display as an inline-block
so it automatically sizes itself around its children and doesn’t greedily eat up the browser window. Alternatively, one could leave it as block
and just explicitly set the width.panel
s using the display
property.panel0
so that it always displays as a block
element.block
elements only when their corresponding button is focused. We can use the sibling selector to achieve this: #tab3:focus ~ #panel3 {
...
}
id
of panel3
, such that it is a sibling element of a focused element with an id
of tab3
.” When the button’s not focused, the general panel
rule takes effect and hide that tab’s content. Unfortunately, no comprehensive rule can be written to apply to all three views at once. You will need three separate rules.Commit and push your work. Verify that all pages have been uploaded by visiting https://USERNAME.github.io/cs318/lab17
and https://USERNAME.github.io/cs318/lab18
in your browser.
Validate your pages with the W3C Validator. Paste in the URLs to your pages, one at a time, and address all concerns raised by the validator. Fix your changes on the local machine, commit, and push until the validator reports no errors or warnings.
Leave a Reply