reklame

This is quite easy:

Here’s my code of navigation.strip.php:

<ul class="nav fix">
		<li><a href="<?php echo get_settings('home'); ?>/" title="title of homepage">homepage<br /><span>homepage's description</span></a></li>
		<li><a id="triggerCatID" href="#" title="title of first element">1st element<br /><span>1st element's description</span></a></li>
		<li><a id="triggerCatID2" href="#" title="title of second element">2nd Element<br /><span>2nd element's description</span></a></li>
		<li class="last"><a href="<?php bloginfo('rss2_url'); ?>" title="RSS Feed">RSS Feed<br /><span>get RSS feed</span></a></li>
		<li id="searchBar1" class="searchField">
			<div>
				<form method="get" id="searchForm1" action="<?php bloginfo('home'); ?>/">
				<span><input type="text" value="Search website ..." onfocus="if (this.value == 'Search website ...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search website ...';}" name="s" id="s1" /></span>
				</form>
			</div>
		</li>
	</ul>

	<div id="headerStrip" class="toggleCategories fix" style="display: none;">
		<ul class="fix">
		<?php wp_list_categories('orderby=name&show_count=0&child_of=1&title_li='); ?>
		</ul>
	</div>
	<div id="headerStrip2" class="toggleCategories fix" style="display: none;">
		<ul class="fix">
		<?php wp_list_categories('orderby=name&show_count=0&child_of=12&title_li='); ?>
		</ul>
	</div>

In my case I want to list two different categories (and children of each category) within the navigation elements. you can adapt this to the original code as well.

And here is the code of the functions.js file in /grid_focus/js/functions.js:

jQuery(document).ready(function() {
	// easy toggle for categories
	jQuery('#triggerCatID').click(function() {
	//change classes of other buttons
		jQuery('#triggerCatID2').attr('class', '');
		jQuery(this).toggleClass('focus');
		jQuery('#headerStrip2').animate({ height: 'hide', opacity: '100'}, 100);
		jQuery('#headerStrip').animate({ height: 'toggle', opacity: '100'}, 100);
		return false;
	});
	jQuery('#triggerCatID2').click(function() {
	//change classes of other buttons
		jQuery('#triggerCatID').attr('class', '');
		jQuery(this).toggleClass('focus');
		jQuery('#headerStrip').animate({ height: 'hide', opacity: '100'}, 100);
		jQuery('#headerStrip2').animate({ height: 'toggle', opacity: '100'}, 100);
		return false;
	});
});

You can add as many elements as you want by copying the jQuery(‘#triggerCatID’) function. Just increase the number of the triggerCatID.