Developer.com content and product recommendations are editorially independent. We may make money when you click on links to our partners. Learn More.
Most developers think JavaScript is the only way to make their web pages interactive. Not so! Learn 4 quick tips to add interactivity to your site using nothing but CSS. These approaches can make your web pages load faster, react snappier and simplify your code!
1. Magical Pure CSS Trees
The core idea of this approach relies on the fact that checkbox state is CSS targetable and that clicking labels can be used to change CSS checkbox state.
First, create a nested unordered list (UL) where each list item contains a checkbox, a label and a sub-nested list that you want to show up when the parent is clicked. At this point with just the HTML and no CSS, your page will look like the figure below.
Figure 1: Unordered List
You will notice that if you click “Item 1” it will toggle the checkbox’s state on and off. Now add some simple CSS for your tree to hide all UL tags and all checkboxes, only your parent “Item 1” will be visible and your sub-items will be hidden.
Now comes the magic: The adjacent sibling CSS selector “~” is applied to your checkbox but only when it is in checked state to display your child nodes. Presto! You have a fully interactive tree control on your web page with 3 simple CSS rules and zero lines of JavaScript!
<html>
<head>
<style type="text/css">
.CSSTree UL {
display:none;
}
.CSSTree INPUT[type="checkbox"] {
display:none;
}
.CSSTree INPUT[type="checkbox"]:checked ~ UL {
display:block;
}
</style>
</head>
<body>
<ul class="CSSTree">
<li>
<input type="checkbox" id="Item1" />
<label for="Item1">Item 1</label>
<ul><li>Sub of 1</li></ul>
</li>
</ul>
</body>
</html>
2. Presto! Styleable Inline Tooltips!
HTML title attributes are frequently used by designers to provide tooltips on their web pages. Unfortunately tooltips are inconsistent in their behavior between browsers and can’t be styled fully to match your site.
This technique combines several newer css features to enable quick, painless and fully styleable tooltips. We add an attribute that doesn’t exist typically in HTML called, “tooltip”. We then set the value of this attribute to what we want to display when the user hovers over the link.
<a href=”something.html” tooltip=”Look over here!”>Over there</a> and something else over <a href=”else.html” tooltip=”Yes it is.”>here</a>.
With this HTML in place, two simple CSS classes will provide the behavior we need. First, you target the “A” anchors to change them to position:relative. This resets the coordinate of the sub-elements so when you generate your absolutely positioned sub-elements that left:0px, top:0px will be at the top left corner of the anchor where the tooltip will be placed.
The second CSS class is a little more complex. First, it targets “A” tags when they are hovered over and uses the “:after” pseudo element. The after element is used in combination with the “content” CSS attribute to generate content on the page. The content tag is set to attr(tooltip), which will copy the value of the tooltip tag you included on the HTML A tags. The remaining attributes just provide the visuals and placement of the generated element.
a {
position:relative; left:0px; top:0px;
}
a:hover:after
{
content: attr(tooltip);
position:absolute; left:0px; top:24px;
background-color:red; color:white; white-space:nowrap;
}
3. Mystical Tabs in CSS
This work of magic works much like our first magic trick with the CSS Tree. The core difference here is we are using RADIO buttons in order to insure only one of our tabs is visible at a time.
Structurally, you need to put each hidden RADIO, clickable LABEL and content div in a seperate parent since you will be using the adjacent sibling selector again to target which tab is currently selected.
<div class="Tabs"> <div> <input type="radio" name="MyTabs" id="Tab1" checked /> <label for="Tab1">Tab 1</label> <div>This is the first tab.</div> </div> <div> <input type="radio" name="MyTabs" id="Tab2" /> <label for="Tab2">Tab 2</label> <div>This is the second tab.</div> </div> </div>
The CSS necessary to make scriptless tags work is a more complicated than the tree view. The top level tab container is set to position relative to reset the coordinate plane of the sub-elements and the DIVs contained area all set to float:left so they will automatically “Stack” on top of each other. The LABEL tags are styled to look like tabs by giving them a border on 3 sides. The radio buttons that provide the model of our tabs are hidden and the tab content is hidden by default.
The two adjacent sibling CSS rules make the selected tab content visible and make the selected tab’s LABEL tag appear selected by layering it over the tab content.
.Tabs {
position:relative; left:0px; top:0px;
}
.Tabs>DIV {
float:left;
}
.Tabs>DIV>LABEL {
border:solid 1px #000000; border-bottom:none;
display:inline-block;
padding:4px;
padding-bottom:2px;
}
.Tabs>DIV>DIV { /*Tab Content*/
display:none;
}
.Tabs>DIV>INPUT[type="radio"] {
display:none;
}
.Tabs>DIV>INPUT[type="radio"]:checked ~ DIV {
display:block;
position:absolute; left:0px; top:26px;
border:solid 1px #000000;
background-color:white;
}
.Tabs>DIV>INPUT[type="radio"]:checked ~ LABEL {
z-index:2;
position:relative; left:0px; top:0px;
background-color:white;
}
4. Shine Light on This Pure CSS Image Lightbox
It is a very common need to show the user a thumbnail image on the page then display a big image when they click it while dimming out the rest of the page so they can focus their attention on the image. Typically the approach to accomplishing this involves thousands of lines of javascript code.
The HTML for this is very similar to the HTML used on the TreeView. You are using the checkbox again to convey the display state of the item you want to toggle on/off but in addition to the label on the thumbnail image, you are also putting a label targeting the same checkbox on the big image that will be popup displayed. The reason for the second label is so when the user clicks anywhere on the big image, it will toggle the checkbox back off and make the popup image go away.
<div class="ImageThumb"> <label for="BigImage"><img src="ThumbImage.jpg"></label> <input type="checkbox" id="BigImage" /> <div><label for="BigImage"><img src="BigImage.jpg"></label></div> </div>
In the CSS, you need to hide the checkboxes and the DIV that contains the popup. In the adjacent sibling selected DIV, you toggle the image on and position it over the whole page.
.ImageThumb>INPUT[type='checkbox']
{
display:none;
}
.ImageThumb>DIV {
display:none;
}
.ImageThumb>INPUT[type='checkbox']:checked ~ DIV {
display:block;
background-color:rgba(0,0,0,0.75);
position:absolute; left:0px; top:0px; bottom:0px; right:0px;
text-align:center; padding-top:100px;
}
.ImageThumb>DIV>LABEL>IMG
{
box-shadow:0px 0px 64px #FFFFFF;
}
About the Author:
David Talbot has over 14 years of experience in the software industry with experience ranging from license plate recognition using neural networks to television set-top boxes to highly scalable web applications. His main focus is building rich user interface web applications on the .NET platform. He is also the author of Applied ADO.NET and numerous articles on technology.
