Hi Everyone,
I am trying to achieve something without the usage of jQuery. Can be done with it but want to find a solution with only css pseudo classes.
So here's what I have so far. A tabbed UI which opens a dropdown menu with a click action using the :target pseudo class. So far so good. The 2nd tab opens as expected.
Here's what I am trying to solve. I want the drop down to close once the focus is taken off of it. The same behavior you would get if the UI was a hover state but still be able to keep the click css function. In short, click to open dropdown and a onmouseout type behavior to close the menu but without javascript.
The dropdown closes when a link within the dropdown is clicked or another tab is clicked and that part of the behavior is correct but don't want to have to have the user do that just to close the dropdown.
Possible? Been trying to solve this for about 1.5 weeks now and starting to think I/We will have to stick to using javascript. Here's my test code below ....
<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7 ]> <html class="no-js ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]> <html class="no-js ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]> <html class="no-js ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
Remove this if you use the .htaccess -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<!-- Mobile viewport optimized: j.mp/bplateviewport -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- All JavaScript at the bottom, except for Modernizr which enables HTML5 elements & feature detects -->
<script src="js/libs/modernizr-1.7.min.js"></script>
<style>
/*
div.items ul:not(:target) {display:none;}
div.items ul:target {display:block;}
*/
div.items ul:not(:active) {display:none;}
div.items ul:target {display:block;}
.tabs {
float:left;
clear:none;
width:200px;
height:30px;
border:solid 1px #cccccc;
padding:10px;
background:#000000;
}
a {
text-decoration:none;
}
.tabs a {
float:left;
margin:8px 5px 5px 5px;
color:#ffffff;
}
ul {
width:222px;
float:left;
clear:both;
padding:10px 0px 10px 0px;
margin:-8px 0px 0px 222px;
line-height:35px;
list-style:none;
}
li {
border-left:#cccccc solid 1px;
border-right:#cccccc solid 1px;
border-bottom:#cccccc solid 1px;
}
ul li a {
margin-left:15px;
}
</style>
</head>
<body>
<!-- Start Tabs -->
<div class="tabs">
<a href="#">Dashboard</a>
</div>
<div class="tabs">
<a href="#item2">Data & Reports</a>
</div>
<div class="tabs">
<a href="#">Data Archives</a>
</div>
<!-- End Tabs -->
<!-- Start 2nd Tabs Content -->
<div class="items">
<ul id="item2">
<li>
<a href="#">Sales By Device</a>
</li>
<li>
<a href="#">Delivery</a>
</li>
<li>
<a href="#">Revenue</a>
</li>
<li>
<a href="#">Sales By Purchase Type</a>
</li>
<li>
<a href="#">Data Archives</a>
</li>
</ul>
</div>
<!-- End 2nd Tabs Content -->
</body>
</html>