Improved navigation for 2theadvocate.com

By Adrian Holovaty, April 3, 2003 | See related blog entry and discussion


<style type="text/css">
#nav {
	margin: 0; padding: 0;
	width: 130px;
}
#nav p {
	background: #930209;
	color: #fff;
	font: bold 12px verdana, arial, sans-serif;
	letter-spacing: -1;
	padding: 2px 2px 2px 3px;
	margin: 0;
	border-bottom: 1px solid #fff;
}
#nav p.extend {
	background: #930209 no-repeat url(arrow.gif) 100% 100%
}
#nav p a {
	text-decoration: none; color: #fff; display: block; width: 128px;
}
#nav p a:hover {
	color: #ccc;
}
#nav ul {
	display: none;
	list-style: none;
	margin: 0; padding: 0;
	background: #fff8e1;
}
#nav ul li {
	background: #fff8e1;
	color: #362f29;
	font: 11px verdana, arial, sans-serif;
	letter-spacing: -0.333;
	margin: 0 0 0 10px;
	padding: 1px;
	border-bottom: 1px solid #fff;
}
#nav ul li a {
	text-decoration: none; color: #362f29; display: block;
}
#nav ul li a:hover {
	text-decoration: underline; color: #930209;
}
#nav ul li ul {
	display: none;
	list-style: none;
	margin: 0; padding: 0;
}
#nav ul li ul li {
	border: none;
}
</style>
<script language="javascript">
var majors = new Array('class', 'enter', 'food', 'news', 'sports', 'advocate', 'wbrz');
function toggle(a, b) {
	if (!document.getElementById) return true;
	if (b==1) for (var i=majors.length-1; i>=0; i--) if (majors[i] != a) document.getElementById(majors[i]).style.display='none';
	a=document.getElementById(a);
	a.style.display=(a.style.display=='block')?'none':'block';
	return false;
}
</script>

<div id="nav">
	<p class="extend"><a href="/classifieds/" onclick="return toggle('class', 1);">Classifieds</a></p>
	<ul id="class">
	<li><a href="/classifieds/">Classifieds</a></li>
	<li><a href="/mediakit/classifieds/">Place an Ad</a></li>
	<li><a href="http://classifieds.theadvocate.com/classifieds-bin/classifieds?classification=rentals&temp_type=search">Rentals</a></li>
	<li><a href="http://classifieds.theadvocate.com/classifieds-bin/classifieds?classification=REAL+ESTATE+FOR+SALE&temp_type=search">Real Estate</a></li>
	<li><a href="http://classifieds.theadvocate.com/classifieds-bin/classifieds?classification=EMPLOYMENT&temp_type=search">Employment</a></li>
	<li><a href="http://classifieds.theadvocate.com/classifieds-bin/classifieds?classification=TRANSPORTATION&temp_type=search">Automotive</a></li>
	<li><a href="http://classifieds.theadvocate.com/classifieds-bin/classifieds?classification=RECREATIONal+vehicles&temp_type=search">RVs</a></li>
	<li><a href="http://classifieds.theadvocate.com/classifieds-bin/classifieds?classification=livestock+and+pets&temp_type=search">Livestock & Pets</a></li>
	<li><a href="http://classifieds.theadvocate.com/classifieds-bin/classifieds?classification=instructions&temp_type=search">Instructions</a></li>
	<li><a href="http://classifieds.theadvocate.com/classifieds-bin/classifieds?classification=ANNOUNCEMENTS&temp_type=search">Announcements</a></li>
	<li><a href="http://classifieds.theadvocate.com/classifieds-bin/classifieds?classification=MERCHANDISE&temp_type=search">Merchandise</a></li>
	<li><a href="http://classifieds.theadvocate.com/classifieds-bin/classifieds?classification=business+SERVICES&temp_type=search">Business Services</a></li>
	<li><a href="http://classifieds.theadvocate.com/classifieds-bin/classifieds?classification=public+notices&temp_type=search">Public Notices</a></li>
	<li><a href="http://classifieds.theadvocate.com/classifieds-bin/classifieds?classification=financial&temp_type=search">Financial</a></li>
	<li><a href="http://classifieds.theadvocate.com/classifieds-bin/classifieds?classification=garage+sales&temp_type=search">Garage Sales</a></li>
	<li><a href="http://classifieds.theadvocate.com/classifieds-bin/classifieds?classification=weekend+bargains&temp_type=search">Weekend Bargains</a></li>
	</ul>

	<p class="extend"><a href="/entertainment/" onclick="return toggle('enter', 1);">Entertainment</a></p>
	<ul id="enter">
	<li><a href="/entertainment/">Arts</a></li>
	<li><a href="/entertainment/">Books</a></li>
	<li><a href="/calendar/">Calendar</a></li>
	<li><a href="http://staging.theadvocate.com/comics">Comics</a></li>
	<li><a href="/dining/">Dining</a></li>
	<li><a href="/games/">Games</a></li>
	<li><a href="http://staging.theadvocate.com/enter/horoscope/">Horoscopes</a></li>
	<li><a href="/movies/" onclick="return toggle('movies', 0);">Movies   <b>»</b></a>
		<ul id="movies">
		<li><a href="/movies/movie_listings.shtml">Movie Listings</a></li>
		<li><a href="/movies/">Movie Reviews</a></li>
		</ul>
	</li>
	</ul>

	<p><a href="http://2theadvocate.publishmail.com/">Get Email Alerts</a></p>

	<p class="extend"><a href="/food/" onclick="return toggle('food', 1);">Food</a></p>
	<ul id="food">
	<li><a href="/food/">Food News</a></li>
	<li><a href="/food/recipes.shtml">Recipes</a></li>
	<li><a href="http://www.uclick.com/client/adv/mu/">7-Day Menu Planner</a></li>
	</ul>

	<p class="extend"><a href="/news/" onclick="return toggle('news', 1);">News</a></p>
	<ul id="news">
	<li><a href="/news/">News</a></li>
	<li><a href="http://customwire.ap.org/dynamic/fronts/HOME?SITE=LABAT&SECTION=HOME">AP headlines</a></li>
	<li><a href="/news/" onclick="return toggle('bureaus', 0);">Bureaus   <b>»</b></a>
		<ul id="bureaus">
		<li><a href="/acadiana/">Acadiana</a></li>
		<li><a href="/baker/">Baker/Zach.</a></li>
		<li><a href="/florida/">Florida</a></li>
		<li><a href="/river/">River</a></li>
		<li><a href="/westside/">Westside</a></li>
		</ul>
	</li>
	<li><a href="/business/">Business</a></li>
	<li><a href="http://staging.theadvocate.com/motleyfool/">Motley Fool</a></li>
	<li><a href="/columnists/columnists_page.shtml/">Columnists</a></li>
	<li><a href="/elections/">Elections</a></li>
	<li><a href="/legislature/">Legislature</a></li>
	<li><a href="/iraqwar/">Military</a></li>
	<li><a href="/obituaries/">Obituaries</a></li>
	<li><a href="/people/">People</a></li>
	<li><a href="/opinion/">Opinion</a></li>
	<li><a href="/police">Police/Fire</a></li>
	<li><a href="/religion/">Religion</a></li>
	<li><a href="/schools/">Schools</a></li>
	</ul>

	<p class="extend"><a href="/sports/" onclick="return toggle('sports', 1);">Sports</a></p>
	<ul id="sports">
	<li><a href="/sports/">Sports</a></li>
	<li><a href="/lsu/">LSU Sports</a>
	<li><a href="/southern/">Southern Sports</a>
	<li><a href="/outdoors/">Outdoors</a>
	<li><a href="/preps/">Prep Sports</a>
	<li><a href="/sports/scoreboard/">Scoreboard</a>
	<li><a href="/sports/" onclick="return toggle('teams', 0);">Team Pages   <b>»</b></a>
		<ul id="teams">
		<li><a href="/preps/">Preps</a></li>
		<li><a href="/hornets/">Hornets</a></li>
		<li><a href="/saints/">Saints</a></li>
		<li><a href="/hockey/">Hockey</a></li>
		</ul>
	</li>
	</ul>

	<p class="extend"><a href="/mediakit/" onclick="return toggle('advocate', 1);">The Advocate</a></p>
	<ul id="advocate">
	<li><a href="/mediakit/">Advertising</a></li>
	<li><a href="/ask/index.shtml">Ask the Advocate</a></li>
	<li><a href="/help/history/">History</a></li>
	</ul>

	<p><a href="/traffic">Traffic</a></p>

	<p><a href="/weather">Weather</a></p>

	<p class="extend"><a href="/livepages5/3.shtml" onclick="return toggle('wbrz', 1);">WBRZ</a></p>
	<ul id="wbrz">
	<li><a href="/livepages5/3.shtml">2uneIn</a></li>
	<li><a href="/livepages5/33.shtml">Safe Family</a></li>
	<li><a href="/livepages5/30.shtml">Road Patrol</a></li>
	<li><a href="/livepages5/29.shtml">On Your Side</a></li>
	<li><a href="/livepages5/16.shtml">You 2 TV</a></li>
	<li><a href="/livepages5/51.shtml">Press Releases</a></li>
	<li><a href="http://titantvguide.titantv.com/apg/loadinfo.asp?siteid=49748">Programming Schedule</a></li>
	<li><a href="/livepages5/7.shtml" onclick="return toggle('aboutwbrz', 0);">About WBRZ   <b>»</b></a>
		<ul id="aboutwbrz">
		<li><a href="/livepages5/7.shtml">About Us</a></li>
		<li><a href="/livepages5/9.shtml">Contact Us</a></li>
		<li><a href="/livepages5/17.shtml">Employment</a></li>
		<li><a href="/livepages5/19.shtml">Internships</a></li>
		<li><a href="/livepages5/8.shtml">HDTV</a></li>
		<li><a href="/livepages5/20.shtml">Production</a></li>
		</ul>
	</li>
	<li><a href="/livepages5/2.shtml">Scripts</a></li>
	</ul>
</div>