CSS Pop-overs with Animation & Semantics

Originally Posted on April 26, 2013 Last Updated on December 31, 2013

I’ve seen, and indeed learned form, a plethora of tutorials out there that learn you how to do a little CSS pop-over magic. Drawing from those, we’re going to cover how to make elegant CSS3 Pop-over Menus that fade in when triggered.

First, we need our HTML. Something like this will do nicely:

<div class="container">

	<p><a href="#" >Show Content</a>

	<div id="content">

		<h1>Peekaboo!</h1>

		<p>I have, indeed, seen you.</p>

	</div>

</div>

We have a link which will be used as our trigger, and a div which holds our content.

Next up, our laconic code to hide the content div by default.

#content {display:none;}

Thirdly, we’ll use a little Javascript to trigger the pop-over.

function toggleLayer( whichLayer ) {

     var elem, vis;

     if( document.getElementById ) elem = document.getElementById( whichLayer );

     vis = elem.style;

     if(vis.display==''&&elem.offsetWidth!=undefined&&elem.offsetHeight!=undefined) vis.display = (elem.offsetWidth!=0&&elem.offsetHeight!=0)?'block':'none'; vis.display = (vis.display==''||vis.display=='block')?'none':'block';

}

Now we can apply that Javascript to our anchor tag like so:

<div class="container">

	<p><a href="#" onclick="toggleLayer('content'); return false;">Show Content</a>

	<div id="content">

		<h1>Peekaboo!</h1>

		<p>I have, indeed, seen you.</p>

	</div>

</div>

Why not just use `href="javascript:toggleLayer('content');"`?

Well, primarily because it is considered bad practice to mix your Javascript and HTML in such a way. If Javascript was turned off, nothing would happen. Though in reality, nothing will happen if Javascript is turned off anyway, as the # link doesn’t point anywhere in particular.

In fact, that # will actually cause the page to jump when clicking the link, which is likely not desired functionality anyway. Which is precisely why we add the return false;, which prevents the default behavior of the link.

Even Better?

Some would additionally argue for using jQuery in situations like this. Perhaps if you’re already loading jQuery that might be fine, but if you aren’t using jQuery for other situations, then you’re loading an entire library for some very simple functionality.

One other method I’ve seen used, which would require significantly more effort to maintain, is something like this:

<p><a href="content.html" onclick="toggleLayer('content'); return false;">Show Content</a>

In this case, if Javascript is turned off we send the user off to the content.html page, which would theoretically contain the same content.

Maintaining content in two separate locations would be a pain, and could end up getting you stuck with a penalty by Google. Assuming the latter wasn’t that big of a deal (you could always robots.txt the content.html page) and you’re working with WordPress, this is actually not too difficult to do.

First, you’ll need this function to get the content of a specific page. Add the following to your functions.php file:

function cn_include_content($pid) {

	$thepageinquestion = get_post($pid);

	$content = $thepageinquestion->post_content;

	$content = apply_filters('the_content', $content);

	$content = str_replace(']]>', ']]>', $content);

	echo $content;

}

Next, let’s modify our HTML to then pull the content dynamically. In this case we’re assuming the content we want is from a Page with an ID of 4.

<div class="container">

	<p><a href="/?p=4" onclick="toggleLayer('content'); return false;">Show Content</a>

	<div id="content">

		<h1></h1>

		<?php cn_include_content(4); ?>

	</div>

</div>

Our link is now pointing to /?p=4, which in WordPress terms means “go to the Page with the ID of 4”. If you’re using pretty permalinks, which you should be, you can adjust as necessary. Another handy method, if page slugs will change and you don’t want to link to the parameter as above:

<?php echo get_permalink( '4' ); ?>

Our content div is also pulling in the content and title of the page, so they’ll always remain in sync.

If you don’t want to fiddle around with maintaining duplicate content like that, though, you could always do something like this:

<p><a href="nojavascript.html" onclick="toggleLayer('content'); return false;">Show Content</a>

Where the nojavascript.html page would have a message stating something like, “Since you’ve turned Javascript off, this website, and most of the Internet, doesn’t work well. You’re probably aware of this as just about every page you browse to on the web is half baked. You are likely a paranoid smoking gun type who’s more concerned about security than living this one, short life you have. Best of luck!”

…or something.

Hey but What About that Fade in?

Okay, now for some fun with CSS3 Animations. Try adding this to your CSS and seeing how much fun results!

@keyframes fadein

{ from {display:none; opacity:0;}

  to {display:block; opacity:1;}

}

#content {animation:fadein 2s; animation-fill-mode:forwards;}

You can add browser prefixes as necessary, fiddle with how long the animation lasts and whatever else you’d like.

Check out the Demo

Up Next: WordPress wp_dropdown_categories for Custom Taxonomies with No Submit Button