An Unusual Navigation Menu

CMS & WordPress
1

I have to code a secondary menu for a section of a WordPress site. It is to go in the left sidebar of each page in that section. (See the image below for a fake sample of what it will look like).

The box with the background image placed to the right is easy enough. The problem is that I would like the ribbon part to expand depending on the length of the text.

I can do this using spans and background images if this were a static menu. But how do I isolate the text in the list items that wp_nav_menu() produces as a dynamic menu so I can insert span tags before the text for the left-hand triangle, around the text for a repeating horizontal background image, and after the text for the two triangles at the end of the ribbon?

And in doing this, I want the whole box to be clickable, not just the text and ribbon background.

As it stands right now, I could hard code the menu and do it the static way (but prevent the client from editing his menu), or I could make the entire box (with text and ribbon) the background image for the anchor element and use a negative text-indent to hide the actual text (but prevent the client from editing his menu except for order of items).

Is there any way of preserving the dynamic nature of wp_nav_menu() and still have my expanding ribbons?

2

That should be pretty simple, really. Whatever element you use for the text (say, a span) just prepare a long ribbon image that extends a long way to the left and set it as the background image for that span. Then, as the span lengthens, there will be plenty of ribbon image to fill the span. Set the background image to align to the right, of course, so that the < shape at the end is always at the end.

The little corner arrow is a different issue, and can be done in various ways, but isn’t hard at all. Perhaps just use an image for that.

So, one option is to set the <a> (which holds the image and the span) to position: relative, and the span for the text to position: absolute within it, as well as the corner image.

3

Thanks for your quick response. That’s exactly what I would have done if this were a static site, but it is a WordPress site and I am using the wp-nav-menu() function to build the menu. I’m trying to keep things as flexible as possible for the client without giving him free rein to break the site. The wp-nav-menu() function automatically wraps the menu items in an unordered list, and I can’t figure out how to access each of the list items to insert my spans. Would javascript be my only resort?

4

Ah, yes. Could you show us the code it produces? Perhaps we can work with that.

5

Sorry I took so long to get back to you - it’s been a very hectic weekend.

Here is my sidebar code:


	<nav role="navigation">
					
		<!--<h1 class="assistive-text"><?php //_e( 'Menu', 'emmanuel' ); ?></h1>
		<div class="assistive-text skip-link">
			<a href="#content" title="<?php //esc_attr_e( 'Skip to content', '_s' ); ?>">
				<?php //_e( 'Skip to content', 'emmanuel' ); ?>
			</a>
		</div>-->
		<?php wp_nav_menu( array( 'theme_location' => 'about_us_menu' ) ); ?>
		
	</nav>

and here is what it produces -

<nav role="navigation">
					
		<!--<h1 class="assistive-text"></h1>
		<div class="assistive-text skip-link">
			<a href="#content" title="">
							</a>
		</div>-->
		<div class="menu-about-us-menu-container"><ul id="menu-about-us-menu" class="menu"><li id="menu-item-55" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-21 current_page_item menu-item-55"><a href="http://localhost/EmmanuelPraise/our-mission/">Our Mission</a></li>
<li id="menu-item-54" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-54"><a href="http://localhost/EmmanuelPraise/what-we-believe/">Our Beliefs</a></li>
<li id="menu-item-57" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-57"><a href="http://localhost/EmmanuelPraise/our-history/">Our History</a></li>
<li id="menu-item-56" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-56"><a href="http://localhost/EmmanuelPraise/our-vision/">Our Vision</a></li>
</ul></div>		
	</nav>

I am currently developing this site locally, building the theme from scratch so I can omit anything extra that the client will not need to use.

Here is the css that I have so far for it:



#aboutbar {
	width: 190px;
	float: left;
	padding: 10px 10px 0 30px;
}

#aboutbar nav {
	width: 190px;
	margin-left: 10px;
}

#aboutbar nav li {
	display: block;
	height: 100px;
	list-style: none;
	margin-left: 0;
	margin-bottom: 10px;
}
#aboutbar #menu-about-us-menu li a {
	display: block;
	text-decoration: none;
	height: 100px;
}
#aboutbar #menu-about-us-menu li:nth-child(1) a {
	background-image: url(images/youth_nav_bkgd.jpg);
	background-position: top right;
	background-repeat: no-repeat;
	background-color: #ca98c9;
}

#aboutbar #menu-about-us-menu li:nth-child(2) a {
	background-image: url(images/womens_nav_bkgd.jpg);
	background-position: top right;
	background-repeat: no-repeat;
	background-color: #33c898;
}

#aboutbar #menu-about-us-menu li:nth-child(3) a {
	background-image: url(images/missions_nav_bkgd.jpg);
	background-position: top right;
	background-repeat: no-repeat;
	background-color: #31cdfd;
}

#aboutbar #menu-about-us-menu li:nth-child(4) a {
	background-image: url(images/take_courage_nav_bkgd.jpg);
	background-position: top right;
	background-repeat: no-repeat;
	background-color: #fefeca;
}
6

Each of those list items has a unique class, you you could use that as a hook for the background image on each. So set the LI to the width and height of the background image, and then you could perhaps position the anchor absolutely within the LI just where you want it (setting the LI to position: relative of course). Then set the ribbon image as a background on the anchor. I think that should work.

7

I’ll try that (tomorrow because it is getting late). I think it will get me halfway there. If I use padding on the anchor text to make it the same size as the li so that the whole box is clickable, then position the ribbon background image to just sit behind the text (with, for example, a background-position: left 10px;), would I still be able to have the ribbon background expand to the text’s length using background-repeat: repeat-y? And then I would need to insert the left-hand ribbon edge image before the text, and the right-hand ribbon end image after the text. If I can’t add spans, I would need multiple background images, wouldn’t I?

8

I decided to put the background image on the <li> element, positioned on the right side of the coloured box, and use a background image for the ribbon on the <a> element, but give the <a> element the same dimensions as the coloured box so that it was all clickable. But I made the ribbon a fixed width image including the left and right hand shapes. I just hope the client will not change the name of any of the menu items to something too long to fit in the ribbon. I figured that, in the end, it would look better if all the ribbons were the same width. Thanks so much for your helpful suggestions.

9

It would be interesting to see an example of what you have so far. This thread gives an example of how to post code samples (including images): http://www.sitepoint.com/forums/showthread.php?1041498-Forum-Posting-Basics

10

I will definitely do that, but maybe not for a few days. I have a lot of work that needs to get done this week, and not very much time. Thank you.

11

OK, feel free to post again when you have time. :slight_smile: