On the following page, I created a quick mock up of what I've been looking for. Here's the issue with my example:
1) It needs to be inline so it can be part of a sentence. Like.. Welcome to my blog, check out some of the [Categories]. Some more text after.
2) When the box examples, it should overlap the content below rather than push it down.
http://kyleetilley.name/examples/catbox/
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Blog Design</title>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".catbox ul").hide();
$(".catbox_toggle a").click(function()
{
$(this).parent().toggleClass("catbox_active");
$(".catbox ul").slideToggle();
});
});
</script>
<style>
.catbox
{
width: 250px;
border: 1px solid #000;
padding: 5px;
position: relative;
float: left;
}
.catbox ul
{
margin: 0;
padding: 0;
list-style: none;
}
</style>
</head>
<body id="">
<h1></h1>
<div class="catbox">
<div class="catbox_toggle"><a href="#">Categories</a></div>
<ul>
<li><a href="#1">Link 1</a></li>
<li><a href="#2">Link 2</a></li>
<li><a href="#3">Link 3</a></li>
<li><a href="#4">Link 4</a></li>
</ul>
</div>
</body>
<html>
Optionally, if you tell me how to acomplish what I want to do with the code I have, that would be helpful too.