Tag Archives: Contextual Menu

Hot Keys, and Content is Still King

Been really busy here in the Nichols Nuthouse, writing articles and code, and cleaning up various little odds and ends. My main thrust is to flesh out my beginning content so that there will be something here when I start advertising the site. So it’s hot-and-heavy on the keyboard for me!

Here’s what I’ve done so far since yesterday. Much of it wasn’t on my to-do list:

  • Wrote the Tutorial for Contextual Submenus.
  • Wrote the Tutorial on the Image Button Bar Menu/Submenu. I finally settled on a name for it, but I prefer to call it the Button Bar.
  • Set up the contact form with cformsII and changed field color.
  • Wrote the pages for the remaining dummy menu buttons: Tricks, Tips, Newbies, Resources, and Info.
  • Coded four different post announcement boxes for different purposes.
  • Updated the Sociable plugin’s opacity. I like it to be 70% rather than the stock 40%.
  • Researched other Related Posts plugins. Trouble is, most of them won’t work with pages, which is what this site will have the most of. Right now I’m sticking with Simple Tags just because it does pages, too.
  • Worked out an in-page call-to-action. These will actually be part of the page text, since I’ve yet to find a way to append them on selected pages only.
  • Worked on articles about how to set up Google Custom Search, Google Analytics, and Google Webmaster Tools while setting all three up for Thesis Theme Tools. Took screen shots, too.
  • Put Google Search into the sidebar, since I don’t know where else to put it right now. Also set up a search results page.
  • Found a way to display tags on the blog front page and on pages. Just check the box to display them on Archives in Thesis Options. Easy but unintuitive.

My to-do list hasn’t changed much since yesterday, since it has open-ended projects that will take a while to accomplish. Here ’tis:

  • Finish the articles on setting up Google Custom Search, Google Analytics, and Google Webmaster Tools. Includes preparing screenshots in PhotoShop.
  • Continue writing content, focusing on material I already have.
  • Continue more detailed planning of the menu tree.

And as I have time and opportunity (and need a break):

  • Continue thinking and research what it would take to do video tutorials. Find out about post-processing and pro-con of storing on server or with a service like Vimeo.
  • Contact HostGator about some necessary server setting changes for enabling teaser images.
  • Bring into DEVONthink Thesis-related bookmarks from Safari.

That’s all, folks!

Two New Menu System Tutorials for You!

I‘m proud to say that new articles on two different kinds of menus/submenus are up! They’re

I use the Button Bar for the main navigation of Thesis Themes Tools, with the Contextual Menu right under it. Right now, the best places to see them in action are under the “About” or “Tricks” buttons.

The Button Bar is composed entirely of images, with both a selected and an unselected state. You can have any kind of document in the Button Bar in any order you choose, unlike the Thesis nav menu. It can be used either as a main menu substitute for the Thesis navigation bar, or as a submenu.

The Contextual Submenu displays as a strip below the main menu, and changes according to the current menu item. Both of these menuing systems are easy to use and implement, and offer many possibilities for user-friendly navigation.

Take a look at these interesting and functional menuing systems! I’m sure they can enhance your site!

Tutorial: Contextual Submenus

Many Thesis users have requested an enhanced navigation menu with multiple selections per tab. Most people think first of drop-down menus, but there is another kind of enhanced menu: a contextual submenu. It displays as a horizontal strip, usually under the nav bar, with the submenu links shown for the selected nav bar tab or document. In many ways, the contextual submenu is more flexible than a drop-down menu, since it can show any links you choose in the submenu, and can also work with documents not on the nav menu. The contextual menu on this site is right below the Image Button Bar Menu.

The contextual submenu described in this tutorial can handle both blog and static front pages, posts, pages, parent pages with any number of children, category pages, and tag pages. You can also have submenus for all these kinds of documents even if they are not in the nav bar. For example, see the “Surviving the Recession” series of posts on my Anxiety, Panic & Health site, which has a contextual submenu linking to the other parts of the series.

You may create as many submenus and submenu items as you wish, and for as many tabs or documents as you wish. The contextual submenu displays a blank submenu line when you have not defined a submenu for the nav tab or document displayed (such as the landing page of this site). Everything about the contextual submenu is configurable, from colors and fonts to height and where you want it to appear.

New! Added July 20, 2009. I added an enhancement that keeps the parent nav bar tab selected while viewing its child submenu items. It’s in the functions code, below. Also, I added at the end of this article an example of the setup of Contextual Submenus for two Thesis nav tabs, each with two submenu items, and each of those with a submenu of its own. The example will show you how easy and quick it is to set up the Contextual Submenus.

The functions for custom_functions.php

The following code should be placed in your custom_functions.php file. Be sure to read the code’s comments for instructions and descriptions. A description of the code is below.

/* CONTEXTUAL SUBMENU FUNCTIONS - PUT THIS IN YOUR CUSTOM_FUNCTIONS.PHP FILE */

/* SAMPLE SUBMENU FUNCTION FOR NAV BAR TABS
This is the list of submenu items to appear in the contextual submenu for nav bar tabs.
It is the same for home or front pages, posts, pages, categories, tags, and documents. 
The description is what will appear in the submenu.*/
function contextual_submenu_sample_navbar() {
?>
    <ul id="context_submenu">
        <li><a href="URL FOR SUBMENU ITEM 1">DESCRIPTION FOR SUBMENU ITEM 1</a></li>
        <li><a href="URL FOR SUBMENU ITEM 2">DESCRIPTION FOR SUBMENU ITEM 2</a></li>
    </ul>
<?php
}

/* SAMPLE SUBMENU FUNCTION FOR CHILDREN WITHIN CONTEXTUAL SUBMENU
This is the list of submenu items to appear in the contextual submenu for children.
It is the same for posts, pages, categories, tags, and other documents. 
The description is what will appear in the submenu.
The style-type code keeps the parent nav bar tab selected when using the child submenus.
Use one of the style-type statements only! If the selected parent tab is the home/front
page, use the home-item code block, for all others use the page-item code block.
*/
function contextual_submenu_sample_child() {
?>
	<!--for home or front page parent tab -->
	<style type = "text/css">
	.custom ul#tabs li.home-item a {background: #FFFFFF; color:#000000;}
	</style>

	<!--for non-home page parent tabs -->
	<style type = "text/css">
	.custom ul#tabs li.page-item-1 a {background: #FFFFFF; color:#000000;}
	</style>

    <ul id="context_submenu">
        <li><a href="URL FOR SUBMENU ITEM 1">DESCRIPTION FOR SUBMENU ITEM 1</a></li>
        <li><a href="URL FOR SUBMENU ITEM 2">DESCRIPTION FOR SUBMENU ITEM 2</a></li>
    </ul>
<?php
}

/* BLANK SUBMENU FUNCTION
Do not change this unless you want to rename it or the id. */
function contextual_submenu_blank() {
?>
	<ul id="context_submenu_blank">
		<li><a href="">&nbsp;</a></li>
	</ul>
<?php
}

/* CONTEXTUAL MENU BASED ON PARENT-CHILD RELATIONSHIPS */
/* Do not rename or change this function. */
function contextual_submenu_parent () {
	global $wp_query;
	if( empty($wp_query->post->post_parent) ) {
		$parent = $wp_query->post->ID;
	} 
	else {
		$parent = $wp_query->post->post_parent;
	}
?>
	<ul id="context_submenu">
		<?php wp_list_pages("title_li=&child_of=$parent");?>
	</ul>
<?php
}

/* CONTEXTUAL MENU CONDITIONAL SELECTION FUNCTION
If your nav menu is below the header, you do not have to do anything.  
If your nav menu is above the header, change all instances of "thesis_hook_after_header" to
"thesis_hook_before_header" and remove every instance of ",'90'" at the end of the line. It will 
look like this when you are finished:
		add_action('thesis_hook_before_header', 'HOME-SUBMENU-FUNCTION-NAME');
*/
function contextual_submenus() {
	/* Works for both blog home pages and static front pages */
	if (is_front_page())
		add_action('thesis_hook_after_header', 'HOME-SUBMENU-FUNCTION-NAME', '90');
	/* For pages only */
	elseif (is_page('PAGE-NAME'))
		add_action('thesis_hook_after_header', 'PAGE-SUBMENU-FUNCTION-NAME', '90');
	/* For parent pages only - do not change function name */
	elseif (is_page('PARENT-PAGE-NAME'))
		add_action('thesis_hook_after_header', 'contextual_submenu_parent', '90');
	/* For posts only */
	elseif (is_single('POST-NAME'))
		add_action('thesis_hook_after_header', 'POST-SUBMENU-FUNCTION-NAME', '90');
	/* For category pages */
	elseif (is_category('CATEGORY-NAME'))
		add_action('thesis_hook_after_header', 'CATEGORY-SUBMENU-FUNCTION-NAME', '90');
	/* For tag pages */
	elseif (is_tag('TAG-NAME'))
		add_action('thesis_hook_after_header', 'TAG-SUBMENU-FUNCTION-NAME', '90');
	/* Defaults to a blank line */
	else
		add_action('thesis_hook_after_header', 'contextual_submenu_blank', '90');
}
add_action('thesis_hook_before_header', 'contextual_submenus');

1. The first function is a sample contextual submenu for your nav bar tabs. You will need to create one for each nav bar submenu you want except for parent/child relationship tabs and submenus, which are handled automatically. The format is the same for every function you create, whether it’s for a home/front page, a page, a post, a category, a tag, or a document.

2. The second function is a sample of a child contextual submenu. If you want the children of the nav tab parents to have their own individual submenus, use this sample as a template for creating them.

There are two style statements. Their purpose is to keep the parent nav bar tab selected while viewing the child submenus. Use only one of the two style statements provided and delete the other. If the parent tab is the home nav tab, use the “home-item” group of code. For any other parent nav tab, use the “page-item” group of code. In the latter, change “page-item-1” to the appropriate tab number: the first tab to the right of the home tab is 1, the next is 2, and so on. Also change the tab color and font color to match the colors you have set for them in custom.css.

3. The third function is for the blank line and shouldn’t be changed, unless you want to rename it or the id.

4. The fourth function generates a contextual submenu based on the parent/child page relationship. A parent page in the nav bar will have its children listed in the contextual submenu. You do not have to make a separate function for parent/child pages as you do for other kinds of documents. This function should not be changed. (Thanks to bigbigdesign for this idea.)

5. The fifth function determines if the selected nav tab or document has a contextual submenu or not and displays it if it does. It defaults to a blank submenu line when a nav tab, page, post, category, tag, or document has no code for it (for example, the landing page on this blog). Included is a conditional statement for each kind of tab that can be placed in the nav bar, as well as other post/page/category/tag documents (remember that documents not in the nav bar can have submenus, too). Add as many tab/document statements as you need, and delete the ones you don’t.

If your contextual menu is below the header

The ’90’ at the end of the “add_action” statement places the submenu line at the end of items included in the “thesis_hook_after_header” hook. You may change it or remove it as desired. Note that the example is set up for the contextual menu being below the header, so you don’t have to make any changes to the example code.

If your contextual menu is above the header

You will need to change each instance of “thesis_hook_after_header” in the function to “thesis_hook_before_header.” You will also need to remove each instance of “’90′” at the end of the “add_action” statements. The statements will look like this after you are finished:

		add_action('thesis_hook_before_header', 'HOME-SUBMENU-FUNCTION-NAME');

If you want to know more about the conditional tags used in this function, read “Conditional Tags” in the WordPress codex.

The code for custom.css

The following code should be placed in your custom.css file. Be sure to read the code’s comments to determine where and how to make changes. A description of the code is below.

/* CONTEXTUAL SUBMENUS STYLING - PUT THIS IN YOUR CUSTOM.CSS FILE
These css selectors are split out to make it easy to change values.
Change the border width, colors and other styles to suit. 
Do not change the list-style, width, and float settings.*/

/* If your nav menu is below the header, leave this commented out.
If your nav menu is above the header, uncomment it to adjust the header spacing.*/
/*.custom #header { margin-top: 0em; }*/

/* Contextual Submenu borders and submenu strip color  */
ul#context_submenu {
	/* border styling */
	border-top-style: none;
	border-right-style: single;
	border-right-color: #ddd;
	border-right-width: 3px;
	border-bottom-style: double;
	border-bottom-color: #ddd;
	border-bottom-width: 3px;
	border-left-style: single;
	border-left-color: #ddd;
	border-left-width: 3px;
	/* submenu strip color */
	background:#D8E5F2 none repeat scroll 0 0;
	/* Do not change the values below! */
	list-style-image: none;
	list-style-position: outside;
	list-style-type: none;
	width: 100%;
	float: left;
}

/* Vertical size of Contextual Submenu and space between submenu items */
ul#context_submenu li { 
	/* determines space from top of letters to top edge of strip */
	padding-top: .2em; 
	/* determines space to right of submenu items -- use padding-left instead */
	padding-right: 0em; 
	/* determines space from bottom of letters to bottom edge of strip */
	padding-bottom: .2em; 
	/* determines space between submenu items */
	padding-left: 2.5em; 
	/* Do not change the value below! */
	float: left; 
}

/* Font properties for items in the Contextual Submenu */
ul#context_submenu li a { 
	/* font size */
	font-size: 1.05em; 
	/* font color */
	color: #000000; 
	/* font weight -- bold, normal, etc. */
	font-weight: bold;
	/* word spacing is tightened up to make submenu items easier to distinguish */
	word-spacing: .03em;
}

/* Behavior of a Submenu item when the cursor hovers over it */
ul#context_submenu li a:hover { text-decoration: underline; }

/* CONTEXTUAL SUBMENU - BLANK
Use the same values as defined in the Contextual Submenu above */
ul#context_submenu_blank {
	/* border styling */
	border-top-style: none;
	border-right-style: single;
	border-right-color: #ddd;
	border-right-width: 3px;
	border-bottom-style: double;
	border-bottom-color: #ddd;
	border-bottom-width: 3px;
	border-left-style: single;
	border-left-color: #ddd;
	border-left-width: 3px;
	/* submenu strip color */
	background:#D8E5F2 none repeat scroll 0 0;
	/* Do not change the values below! */
	list-style-image: none;
	list-style-position: outside;
	list-style-type: none;
	width: 100%;
	float: left;
}

/* Height of the blank Contextual Submenu strip
These settings make the blank bar the same height as the regular one. 
It should be roughly the sum of the contextual submenu font's padding and font-size.*/
ul#context_submenu_blank li { 
	padding-top: .2em; 
	padding-bottom: 1.3em; 
	/* Do not change the value below! */
	float: left; 
}

Note that the properties are broken out for your convenience. You may compact them if you wish.

1. The first group of code creates an id named “context_submenu” for all non-blank submenu styling. The properties and values in the various selectors are those I use on my blog, so you’ll want to change them. I didn’t change the default font, etc. in the “ul#context_submenu li a” selector, but you may make any changes you wish. Consult the w3schools.com page on “CSS Text” for what’s available.

2. If your contextual menu is above the header, uncomment the first statement: the one starting “.custom #header.” It will allow you to nudge the header down if the contextual menu is overlapping it.

3. The second group of code, “context_submenu_blank” creates an id for the blank submenu line. Its values should match those of “context_submenu” for the most part. You will want to change the values in the “ul#context_submenu_blank li” section to make the blank line the same height as the non-blank line so the page contents don’t jump around when you select another tab.

An example of the Contextual Submenu in use

Below is the custom_functions.php code for two nav tabs, each with two Contextual Submenu child items. All of the child items have their own submenu, too. Note that in each pair of child items, the submenu only displays the other child item, not both. The blank submenu function and the parent/child relationship function have been omitted to simplify the example.

/* HOME NAV TAB */
function contextual_submenu_home() {
?>
    <ul id="context_submenu">
        <li><a href="#">Welcome to Rock City</a></li>
        <li><a href="#">Sites to Visit</a></li>
    </ul>
<?php
}
/* HOME: WELCOME TO ROCK CITY CHILD */
function contextual_submenu_welcome() {
?>
	<!--for home or front page parent tab -->
	<style type = "text/css">
	.custom ul#tabs li.home-item a {background: #FFFFFF; color:#000000;}
	</style>

    <ul id="context_submenu">
        <li><a href="#">Welcome to Rock City!</a></li>
    </ul>
<?php
}
/* HOME: SITES TO VISIT CHILD */
function contextual_submenu_sites() {
?>
	<!--for home or front page parent tab -->
	<style type = "text/css">
	.custom ul#tabs li.home-item a {background: #FFFFFF; color:#000000;}
	</style>

    <ul id="context_submenu">
        <li><a href="#">Sites to Visit</a></li>
    </ul>
<?php
}

/* ROCKS NAV TAB */
function contextual_submenu_rocks() {
?>
    <ul id="context_submenu">
        <li><a href="#">Basalt</a></li>
        <li><a href="#">Shale</a></li>
    </ul>
<?php
}
/* ROCKS: BASALT CHILD */
function contextual_submenu_basalt() {
?>
	<!--for non-home page parent tabs -->
	<style type = "text/css">
	.custom ul#tabs li.page-item-1 a {background: #FFFFFF; color:#000000;}
	</style>

    <ul id="context_submenu">
        <li><a href="#">Shale</a></li>
    </ul>
<?php
}
/* ROCKS: SHALE CHILD */
function contextual_submenu_shale() {
?>
	<!--for non-home page parent tabs -->
	<style type = "text/css">
	.custom ul#tabs li.page-item-1 a {background: #FFFFFF; color:#000000;}
	</style>

    <ul id="context_submenu">
        <li><a href="#">Basalt</a></li>
    </ul>
<?php
}
/* CONTEXTUAL MENU CONDITIONAL SELECTION FUNCTION*/
function contextual_submenus() {
	/* HOME PAGE */
	if (is_front_page())
		add_action('thesis_hook_after_header', 'contextual_submenu_home', '90');
	elseif (is_page('Welcome to Rock City'))
		add_action('thesis_hook_after_header', 'contextual_submenu_welcome', '90');
	elseif (is_page('Sites to Visit'))
		add_action('thesis_hook_after_header', 'contextual_submenu_sites', '90');
	/* ROCKS */
	elseif (is_page('Rocks'))
		add_action('thesis_hook_after_header', 'contextual_submenu_rocks', '90');
	elseif (is_page('Basalt'))
		add_action('thesis_hook_after_header', 'contextual_submenu_basalt', '90');
	elseif (is_page('Shale'))
		add_action('thesis_hook_after_header', 'contextual_submenu_shale', '90');
	/* Defaults to a blank line */
	else
		add_action('thesis_hook_after_header', 'contextual_submenu_blank', '90');
}
add_action('thesis_hook_before_header', 'contextual_submenus');

I hope you found this tutorial useful and clear. If you have any questions or comments, please feel free to comment or send me an email with the “Contact” tab!

©2009 Michael L Nichols. All rights reserved.

What next?

Your comments are always welcome, and are important to this blog’s community! Leave a comment now, or read the comments.

You can find several related articles in the “Related Articles” list below. In the footer you will find a lists of Popular Posts, Recent Posts, and you may browse by Categories, or tags. There’s also a Google Custom Search box to help you find just what you want.

Get free updates by RSS or email!

If you have enjoyed this article, please consider subscribing to article updates, using an RSS reader, or by email. It’s free and is a great way to make sure you don’t miss a single article! I also invite you to follow me on Twitter!

Why not share this article with others!

Share this article with your friends using your favorite social media service, such as StumbleUpon, or Digg. Check out the icons below under “Share This Article With Others” for other social media, including del.icio.us, Technorati, Sphinn, Friendfeed, FaceBook, MySpace andLinkedIn! You can also email or print the article, and even tweet it using Twitter!