Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.
If the asker does not get an answer then they have 10 days to request a refund.
$10
Add text to WordPress menu
Here's an example of the navigation:
Home | About | Dresses | Shoes | Hair
If, for example, I hover over dresses, the navigation becomes:
Home | About | Dresses | Shoes | Hair
Designers: Designer 1 | Designer 2 | Designer 3
And if I hover over hair, the navigation becomes:
Home | About | Dresses | Shoes | Hair
Stylists: Stylist 1 | Stylist 2 | Stylist 3
Ideally I'd like to continue using WP menus, for ease of use. Using :before {content isn't really an option due to browser compatibility, but I welcome your suggestions.
Thanks!
This question has been answered.
Dan Davies | 09/06/10 at 1:03pm
Edit
(7) Possible Answers Submitted...
See a chronological view of answers?
Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.
-

Last edited:
09/07/10
4:53pmTobias Nyholm says:I can think of two possible solutions:
1) Use templates.
Define a different template for each "subpage-type"
2) Specify custom fields.
Add a custom field to the pages that should have that peace of text.
$meta=get_post_custom($post->ID);
if(isset($meta['menu_text'])){
echo $meta['menu_text'];
}
I think the second solution is more preferable.
Just email me if you want more information of these.Previous versions of this answer: 09/07/10 at 4:53pm
-

Last edited:
09/07/10
5:59pmPippin Williamson says:This is easy.
Use subpages to create the menu items, then use a CSS hover menu to display the submenus when hovering over the top level menu.
You could use the link below as a template for your menus:
http://pippinspages.com/css/freebie-css-3-drop-down-menus/
You will need to modify the CSS a little in order to achieve the exact effect you want, but it's a good starting point.Previous versions of this answer: 09/07/10 at 5:59pm
-

Last edited:
09/07/10
6:33pmenodekciw says:As I get it, you only have problem getting that 'Designer: ', 'Stylist: ' etc to show up?
If so, one (probably, the easiest) way to do it would be JavaScript. Just add some new list items into your children ul's and style them the way you like. This should be easily achieved with jQuery, for example. Tho', I'm going to sleep now, so won't provide with exact code right now. But I guess you'll find the way to use my idea (i agree, it's not the best one.. ;))
If not, I'll code it up for you tommorow. -

Last edited:
09/07/10
10:56pmNilesh shiragave says:Yes go with using the wp-menu
and just follow this tutorial to create the horizontal navigation
http://www.catswhocode.com/blog/wordpress-magazine-style-horizontal-dropdown-menu
Just replace the php code with this code to display menu using wp menu
<?php wp_nav_menu( array('menu' => 'Your menu name','menu_id'=>'nav2','menu_class'=>'nav2' )); ?>
-

Last edited:
09/10/10
3:05amDenzel Chia says:Hi,
Use WordPress 3.0 menu system. You can setup the menu with a parent category with child categories as the list.
Follow this tutorial http://justintadlock.com/archives/2010/06/01/goodbye-headaches-hello-menus to code your menu in your theme.
Then use jQuery Superfish to style your menu http://users.tpg.com.au/j_birch/plugins/superfish/#sample4
You will be able to get what you want.
Thanks.Previous versions of this answer: 09/10/10 at 3:05am
-

Last edited:
09/18/10
9:28amIvaylo Draganov says:Hello,
I assume that you have to knowledge to create a WP nav menu and style it for horizontal dropdown. And your desire is to print custom text in front of each submenu. Since that is more or less a design enhancement using CSS and JavaScript to achieve it would be the best solution.
I suggest using :before { content: 'text'; } for able browsers and a JavaScript fallback for older browsers. Something along the lines of:
CSS - adjust you selectors accordingly
#menu-item-3 > ul.sub-menu > li:first-child:before {
content: 'Designers: ';
}
#menu-item-4 > ul.sub-menu > li:first-child:before {
content: 'Stylists: ';
}
load jQuery - put this line inside theme's functions.php
wp_enqueue_script( 'jquery' );
JavaScript fallback - put this code inside header.php after wp_head() hook
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#menu-item-3 > ul.sub-menu > li:first-child').before('Designers: ');
jQuery('#menu-item-4 > ul.sub-menu > li:first-child').before('Stylists: ');
});
</script>
In this example #menu-item-3 and #menu-item-4 are the top level navigation elements. Adjust the code to match your selectors or even better - add custom classes to top level WP nav menu items. That will make the code more future proof and more human-readable. For example .designers and .stylists.Previous versions of this answer: 09/11/10 at 5:49am | 09/11/10 at 5:50am
-

Last edited:
09/18/10
9:28amMichelle Dancer says:Note: There are Javascript solutions here that are fine but I know some people don't like to use JS if it can be avoided so just in case that includes you...
Ok as others have said, step 1 = custom menus. It sounds like your theme is already using these, if it isn't there are a few tutorials linked here already to show you how to make that change so I won't repeat everyone else.
Step 2 is to get the "stylist:" etc text showing up. When I read this question it reminded me of a tutorial I saw to add descriptive text underneath each menu item. It strikes me that all you need is to add descriptive text to the left of the FIRST menu item.
Here is the tutorial in question, it explains everything quite well. http://www.kriesi.at/archives/improve-your-wordpress-navigation-menu-output
From a quick glance at Kriesi's code there it seems it does check whether there actually is a description or not before echoing it, so all you'd need to do in theory is enter "Stylists:" in the description field for "Stylist 1" and make sure the other stylist links have no description. Your menu layout will be different to his so the CSS at the end of the tutorial probably isn't much help but the general gist is there.Previous versions of this answer: 09/11/10 at 6:07am
This question has expired.
Current status of this question: Completed
Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.
If the asker does not get an answer then they have 10 days to request a refund.
