Forums

eskrimador

Hi there,

Was wondering if anyone had a solution with what I am trying to achieve if at all possible. I've been playing with a drop down that opens onclick with pure css. What I am trying to accomplish to have the dropdown close automatically when pointer is not on the dropdown menu. I know this is possible with jQuery but get this, I am trying to accomplish this in pure css.

My code is below which is pure css which again works onclick to open the 2nd tab. Again, I am trying to achieve an automatic close behavior such as with a hover but not by using the hover class or javascript.

<!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;} 

	.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 &amp; 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>

Eric

I have a demo of this. Unless there is some css3 thing that I am unaware of this is not possible. In mine, as well as any others you'll find, there is an X you have to click to break the target/focus.

eskrimador

Thanks Eric for the confirmation. I've been trying to figure this out for almost 2 weeks now. Looked into all the CSS3 Transitions to see if possible but was unsuccessful. Like you, unless there was some type of CSS trick I was unaware of, I thought I'd find someone here that would know. Thanks and guess it's back to using jQuery which isn't bad. Just though maybe I'd get lucky and find something new : )

treehouse : what would you like to learn today?

Forums

Hide/Show Div