WordPress.org

Ready to get started?Download WordPress

Forums

Another nav element in Grid Focus theme? (7 posts)

  1. stew278
    Member
    Posted 5 years ago #

    I'm using Grid Focus, and would like another primary navigational element, with a secondary navigation, just like the "Browse by Topic" nav button. Been trying multiple things, but have had no success getting a secondary nav to show up underneath the primary nav bar.

    Any help?

  2. stew278
    Member
    Posted 5 years ago #

    anyone?

  3. Joey Kudish
    Member
    Posted 5 years ago #

    bump. any info on this would be helpful :)

  4. Joey Kudish
    Member
    Posted 5 years ago #

    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!

  5. beetroute
    Member
    Posted 4 years ago #

    Yep. I'd love to know how to do this too!

  6. beetroute
    Member
    Posted 4 years ago #

    Please, please, please, please can someone help with this?!

  7. reklame
    Member
    Posted 4 years ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Topic