A Taxonomy Menu That Goes to 11

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.

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.