A Taxonomy Menu That Goes to 11

10.31.2005

Khalid Baheyeldin writes me asking:

Do you have your own version of taxonomy_menu? I used it in the past, but did not like it because it is an obscure item in the navigation menu. So, I am wondering how you configured the "browse" block on your site?

Khalid is actually the developer behind the feedback.module and the sitemap.module. Those modules are highly recommended, btw.

Preface(for kicks)

Requirements: Civicspace 8.1+, or Drupal 4.5+ with the Taxonomy_Menu Module Installed

Abstract: A super easy tutorial which merely demonstrates proper use of the taxonomy_menu module. Since its halloween, and I have no candy, I also am handing out my menu's stylesheet and icons.

Goal:At the end of this tutorial, you should be able to say with confidence: "Wow, I never realized how useful the taxonomy_menu module was!"

Episode One: Configure your Vocabs,Terms, Menus, and Blocks

Damn it, someone find me a freaking editor!

Step One: The top level term is actually a vocabulary. When picking a name for top level vocab terms, ask yourself if a newspaper would title a main section that term. If the answer is yes, than you've made a good pick. In otherwords, go for names like "technology" instead of "Internet".

Step Two: Re-arrange your terms under their proper vocab. Do not rearrange your menu items. I'll say it again. You set your taxonomies hierarchies in the admin/taxonomy section, NOT the admin/menu section.

Step Three: Now that your terms are all in their proper vocabularies, and you've worked out the child/parent relationships, you may go to Level 3. Also known by the path admin/menu. Now, create a new menu called "browse". On my installation, the path is "admin/menu/menu/add"; however, that might be an error specific to my site.

Once you have a new menu named "browse", its time to move your vocabs away from the main menu, and into your shinny, but lonely new menu. This can be accomplished rather painlessly by clicking the vocab menu item's "edit" button. Look for the "parent item" dropdown menu, and file it under "browse". Repeat this step for every vocabulary you'd like in your "browse" block.

Step Four: Theoretically, if you are running drupal 4.5+, you can now go to admin/block. Shimmering, like a golden lamb, you will see a disable block named "browse". Do enable it. Look at it, and laugh. You just figured out something that many drupal "vendors" still haven't figured out.

Note: Don't even think about messing with any aspect of your browse block via the admin/menu module. However, feel free to go taxonomy-loony in the admin/taxonomy. New terms, or changes to the hierarchy will automatically update in that menu. Just remember, keep your changes to the admin/taxonomy section.

Episode Two: Fugly Drupal Menu Style Emergency

But wait, there is a problem. You're menu is -- average, and gives away your site's drupalness. However, I give you this site's CSS to start you down the path of de-drupalification of your theme. Copy and paste this code into a text editor that has a "find replace" function.

#block-menu-386 li.collapsed a:link,#block-menu-386 li.collapsed a:visited, #block-menu-386 li.expanded li.collapsed a:link,#block-menu-386 li.expanded li.collapsed a:visited{background-image:url(img/bluecollapsearrow.gif);}#block-menu-386 li.expanded a:link,#block-menu-386 li.expanded a:visited, #block-menu-386 li.collapsed a:hover,#block-menu-386 li.expanded li.collapsed a:hover {background-image:url(img/blueexpandedarrow.gif);}.menu li.leaf a,#block-menu-386 li.leaf a,#block-menu-386 li.expanded li.leaf a {background-image:url(img/blue4box.gif);}#block-menu-386 li a.active, .block-user li a:hover{color:#333333;}#block-menu-362 li.collapsed a:link,#block-menu-362 li.collapsed a:visited, #block-menu-362 li.expanded li.collapsed a:link,#block-menu-362 li.expanded li.collapsed a:visited {background-image:url(img/bluecollapsearrow.gif);}#block-menu-362 li.expanded a:link,#block-menu-362 li.expanded a:visited, #block-menu-362 li.collapsed a:hover,#block-menu-362 li.expanded li.collapsed a:hover{background-image:url(img/blueexpandedarrow.gif);}.menu li.leaf a,#block-menu-362 li.leaf a,#block-menu-362 li.expanded li.leaf a{background-image:url(img/blue4box.gif);}#block-menu-362 li a.active, .block-user li a:hover {color:#333333;}

You must change the number for #block-menu to reflect your site. Otherwise, this code doesn't really work. The reason being that #block-menu-362 is the ID of the "browse" block at Nick Lewis the Blog. However, at your site it is undoubtably a different number. #block-menu-362 actually comes from that being the 362nd block born from this site's womb of pain. Most drupal user's are not insane, like me, and thus can expect their block to be in the 20's -- maybe. But I digress...

To find your block's ID, simply "view source code" [ctrl-U in firefox] from your site. I found my #block-menu's id in this tangled mess

Browse

And yes, it's true; the "#" before "#block-menu {.." signifies that it's an ID. If "block-menu" was a class, it would be written in CSS as ".block {..." Good lord, I can sense many blank faces who've via google pretending they understand this. It's alright, I literally learned the difference between classes and IDs 8 months ago. For those of you who are good to go, I've left links to my menu's pretty icons below. Note that you must put them within a folder named "img" within your theme's directory. (e.g. themes/box_grey/img/iconhere.example)

The rest of you aren't going anywhere. That's right, we're doing this.

me and my blazing arrows me and my blazing arrows me and my blazing arrows

The Lost Episode

A CSS Remedial Workshop for the Gifted: Classes vs. IDs

Get ready, we're going to shoot through this concept in a paragraph. [drumroll].

CLASS IS TO BE USED FOR REOCCURING PAGE ELEMENTS. Use classes when you are setting a style that repeats itself through out the page. For example, every drupal block can be edited by changing the CSS for the .block class. Thus, if I were to write .block {background-color:#000000;}, every single block on my site would turn black.

ID IS USED ONLY ONCE ON A PAGE. Makes sense don't it? Yet people insist on using multiple divs with the same ID on a single page. You may think its okay to do this. Well, you are wrong, and stop it!

Police ask for your ID because it is unique to you... If two people have the same ID, then someone is breaking the law. The same applies for CSS. So, to nail this into the ground, once and for all, My Browse menu selects #block-menu-362, and not .block because I only want to apply this CSS to that single block alone. And you guessed it, if I were to write #block-menu-362 {background-color:#000000;} my browse block would go black. In much the same way as a lone black sheep.

And you are now among the few and proud who understand this simple concept. Don't let it go to your head.

Comments

A different approach, for

A different approach, for Drupal 6, that produces a nicer display but requires modifying a line in core: http://industriousone.com/almost-perfect-taxonomy-menu

Drupal 6?

Can anyone provide a guide to taxonomy menu for Drupal 6? it seems somewhat different...

Taxonomy_menu RIP?

Sigh, why did you have to kill off the t_m generated menu block from your site just when I decided to use it? Or is it one of your frequent experiments? You seem to have even aliased your paths using pathauto. Is it some lack in the t_menu module that made you change your mind?

How do you add text to the top level items

Hiyas,

Helpful site - although I couldn't get the CSS working (drupal 4.6.x) because the images overwrote the browse menu text for some reason.

Anyways - my question is - how do I add text to the 'top level' taxonomies (in my case q=taxonomy_menu/3). It displays 'There are currently no posts in this category' - but there's no 'Create Content' which allows me to target this level of menu :p

I hope that makes some sense - I've just started out with drupal, and it's quite confusing :p

You don't add text to that

You don't add text to that section, rather when you create a new story, blogpost, page (or what have you) use the taxonomy selection menu to file it under that page. (if that makes any sense...)

I can't select an option for that ...

When I create a page, I have the option of selecting the hierarchical items, but not the main root item.

So if I had:

Heading1
- Subheading1a
Heading2
- Subheading2a
Heading3

I can fit stories into any of the subheadings, but the main Headings are greyed out for assigning taxonomies... Is that normal?

Related to that :p ... if I wanted to refer to a script I'd written, can I reference it (so Subheading2a for example) to run when a user clicks on the appropriate menu item?

I can see where I could put it all as 'PHP', but are there other options?

Thanks =)

Is it possible to make top level vocabs simply open

Just getting started with my first drupal site and discovered this tutorial which has helped greatly in my understanding of taxonomies [even though they now seem to be called categories :) ]

I have created a simple vocab like this

About Us taxonomy_menu/7
History taxonomy_menu/7/9
Background taxonomy_menu/7/8
Committee taxonomy_menu/7/11

which works really well with the idea of the browse menu you give here,

but is it possible that when About Us is clicked it simply opens itself up to show the lower terms, rather than displaying all the stuff in the lower terms in the main area ?

I'm using your clean slate theme along side drupal 4.7 from cvs about 2 nights ago and taxonomy_menu hand edited from a patch in the bug list as I can't work out how patch works on an xp system if it makes any difference

thanks for any help

tkgafs

oh! All, top level links

oh! All, top level links need to be their own vocabI see from your URLs that all vocabs are of ID 7. However... stepping back from this particular problem, you might want to rely on the menu system for a lot of those links. Typically, I use the menu, and not taxonomy for "About Us", as it tends to be relatively static marketese content.

taxonomy_context.module

Does this have any impact on the taxonomy_context.module or can taxonomy_menu.module and context live together happily. My guess is that they are unrelated, but I have to ask.

Some questions

Great tutorial. I have some questions. 1.) Is 'Anthology' a parent term of a vocabulary or the vocab name itself? 2.) For the anthology page, are you combining the term ids (taxonomy/term/1+2+3) to get all the nodes tagged with the child terms (Great writings etc.) or does taxonomy_menu help in building this automatically? Thanks, Ramdak

1. Anthology is the vocab

1. Anthology is the vocab name

2. I think its probably weirdness that I accidently caused when I attempted to reorder the items using menus instead of category. 

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • You may post code using <code>...</code> (generic) or <?php ... ?> (highlighted PHP) tags.
  • Lines and paragraphs break automatically.
  • Web page addresses and e-mail addresses turn into links automatically.

More information about formatting options

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.