CSS only goodness
Recently I've given myself the challenge of NOT using javascript for interface interactions, unless absolutely necessary. I've come across and developed some great css only solutions to some really common interactions, that traditionally required javascript.
Here are a couple that I use all the time:
1. CSS only drop down menus
<style>
/* the visuals */
#ex1 a
{
color: inherit;
text-decoration: none;
}
#ex1 ul
{
border: 0 solid rgba(0,0,0,.2);
border-width: 1px;
padding: 0;
margin: 0;
box-shadow: 5px 5px 5px rgba(0,0,0,.2);
list-style: none outside none;
background: #fff;
border-radius: 0 0 10px 10px;
}
#ex1 li
{
color: #000;
}
#ex1 li:first-child
{
border-radius: 0 0 0 10px;
}
#ex1 li:last-child
{
border-radius: 0 0 10px 0;
}
#ex1 li li:first-child
{
border-radius: 0;
}
#ex1 li li:last-child
{
border-radius: 0 0 10px 10px;
}
#ex1 li li li:first-child
{
border-radius: 0 10px 0 0;
}
#ex1 li li li:last-child
{
border-radius: 0 0 10px;
}
#ex1 li li ul
{
border-radius: 0 10px 10px 0;
}
#ex1 > ul
{
display: table;
white-space: nowrap;
}
#ex1 > ul > li
{
display: table-cell;
}
#ex1 ul li a
{
padding: 10px;
display: block;
}
#ex1 ul > li:hover
{
background: #009ed8;
color: #fff;
}
#ex1 ul > li:hover > ul
{
display: block;
}
#ex1 ul ul ul
{
margin: -1px 0 0;
}
/* the good stuff */
#ex1 > ul > li
{
position: relative;
}
#ex1 ul ul
{
display: none;
position: absolute;
top: 100%;
left: 0;
z-index: 1;
}
#ex1 ul > li:hover
{
background: #009ed8; color: #fff;
}
#ex1 ul > li:hover > ul
{
display: block;
}
#ex1 ul ul ul
{
position: absolute;
top: auto;
left: 100%;
z-index: 1;
}
</style>
<div id="ex1">
<ul>
<li><a href="#">Menu 1</a></li>
<li>
<a href="#">Menu 2</a>
<ul>
<li><a href="#">Sub Menu item</a></li>
<li><a href="#">Sub Menu item</a></li>
<li><a href="#">Sub Menu item</a></li>
</ul>
</li>
<li>
<a href="#">Menu 3</a>
<ul>
<li><a href="#">Sub Menu item</a></li>
<li>
<ul>
<li><a href="#">Sub Menu item</a></li>
<li><a href="#">Sub Menu item</a></li>
<li><a href="#">Sub Menu item</a></li>
</ul>
<a href="#">Sub Menu item</a>
</li>
<li><a href="#">Sub Menu item</a></li>
</ul>
</li>
<li>
<a href="#">Menu 4</a>
<ul>
<li><a href="#">Sub Menu item</a></li>
<li><a href="#">Sub Menu item</a></li>
<li><a href="#">Sub Menu item</a></li>
</ul>
</li>
<li><a href="#">Menu 5</a></li>
</ul>
</div>
2. CSS only check boxes and radio buttons
<style>
/* the visuals */
#ex2 label
{
display: inline-block;
margin: 0 20px 0 0;
}
/* the good stuff */
#ex2 label
{
position: relative;
overflow: hidden;
}
#ex2 input[type=checkbox]:not(old),
#ex2 input[type=radio]:not(old)
{
position: absolute;
left: -100%;
}
#ex2 input[type=checkbox]:not(old) + .label:before,
#ex2 input[type=radio]:not(old) + .label:before
{
content: '';
width: 29px;
height: 29px;
vertical-align: bottom;
background: url('cb-sprite.png') no-repeat 0 0 transparent;
display: inline-block;
margin: 0 5px 0 0;
}
#ex2 input[type=radio]:not(old) + .label:before
{
background-image: url('rb-sprite.png');
}
#ex2 input[type=checkbox]:checked:not(old) + .label:before,
#ex2 input[type=radio]:checked:not(old) + .label:before
{
background-position: 0 100%;
}
#ex2 input[disabled=disabled]:not(old) + .label:before
{
background-position: 0 50%;
}
</style>
