bump. any info on this would be helpful 🙂
To do this, I know I will have to modify navigation-strip.php, which currently looks like this on my website (www.zeidel.ca):
<?php
/**
* @package WordPress
* @subpackage Grid_Focus
*/
?>
<div class="navStripWrapper">
<ul class="nav fix">
<li><a href="http://www.zeidel.ca/?page_id=59" title="About Naked">about<br /><span>who we are</span></a></li>
<li><a href="http://www.zeidel.ca/?page_id=61" title="Our Services">services<br /><span>what we do</span </a></li>
<li><a href="http://www.zeidel.ca/?page_id=63" title="Inside Naked Labs">naked labs<br /><span>our projects</span></a></li>
<li><a id="triggerCatID" href="#" title="Show categories">browse<br /><span>by topic</span></a></li>
<li><a href="http://www.zeidel.ca/?page_id=65" title="Contact Us">contact us<br /><span>get naked</span </a></li>
<li id="searchBar1" class="searchField">
<div>
<form method="get" id="searchForm1" action="<?php bloginfo('home'); ?>/">
<span><input type="text" value="Search the archives..." onfocus="if (this.value == 'Search the archives...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search the archives...';}" name="s" id="s1" /></span>
</form>
</div>
</li>
</ul>
<div id="headerStrip" class="toggleCategories fix" style="display: none;">
<ul class="fix">
<?php wp_list_cats('sort_column=name&optioncount=0'); ?>
</ul>
</div>
</div>
The pages that will need a new sub-nav are services and about.
Anyone can give me a direction of what code to add/modify, because I am not quite sure…
Thanks!
Yep. I’d love to know how to do this too!
Please, please, please, please can someone help with this?!
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.
