Devit!

Menus can be range from simple text to complicated visual effects.  When it comes to the most used and popular menus one of the most common things we do on our sites is add a separator character.

For example:

Home | Products | Contact Us | About Us

CSS seems like it should be the simplest solution. Add a border-left: 1px solid #000. However the first element of this menu should not have this border. CSS 2.1 has given us the first-child and last-child selectors. This would be the perfect solution other than the fact that Internet Explorer 6 does not support these selectors (CSS and browser content and compatibility). IE7 is incrementally better supporting just the first-child selector.

Until we finally can let go of IE6 support (perhaps when IE8 comes out?), we will need to find another solution. The easiest is to add the class “first” to the first element of the menu and “last” to the last element of the menu. This will allow us to target styles specifically for those menu items.

Now that we develop a number of our sites in Drupal, we have had to come up with a solution for it. If developing in Drupal 6 then the work is already done for you. Drupal 6 now includes first and last classes on all menus. Drupal 5 only includes the first and last classes on primary and secondary links and not for menus displayed in blocks.

Using theme overides you can customize your site to add first and last classes. Take a look at the following article on Have “first” and “last” classes on menu blocks.

Jeremy

Jeremy has a love hate relationship with computers , and in contemplative moments he has been known to muse on the fact that his life’s work is in reality a long string of 1’s and 0’s. When he’s not banging code into his keyboard at work, Jeremy is banging out beats for his band “Sad Skelton” that you can check out at www.sadskelton.com.

This entry was posted on Tuesday, November 18th, 2008 at 11:09 am and is filed under Devit!. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.