Today I was given the task of designing a menu on the left of a page that would load the content into an area on the right.
"Like an inline frame?" asked someone.
I interrupted. I don't like inline frames. I've used them and they work and that's fine but they're not good homepage material for search engine reasons. I also have no idea how screen readers tackle them. I'm sure they cope, but when in doubt, try an alternative.
I proposed that we hide the content in an overflow:hidden div and anchor in the links.
it works like this:
<html>
<head>
<title>iframes without the iframe</title>
<style>
<!--
div {width:40%; height:200px; background-color:#CCCCCC; border:1px solid black; margin-right:10px; float:left}
.changingContent {overflow:hidden}
.contentPages {height:200px}
-->
</style>
</head>
<body>
<div>
<a href="#kfi">KFI Thing</a><br />
<a href="#app">Application Thing</a><br />
<a href="#track">Track a Case</a>
</div>
<div class="changingContent">
<div class="contentPages">
<a name="kfi">
Content page 1
</div>
<div class="contentPages">
<a name="app">
Content page 2
</div>
<div class="contentPages">
<a name="track">
Content page 3
</div>
</div>
</body>
</html>
All you need to do is make sure the content for each anchor fills the height of the div. The best way to do this would be to have a div inside set to the right height and have them all sit on top of eachother.When I'm done with the site, I'll post the link here, but for the moment, here's the example.
bon appetit!
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment