CSS Sprite-based Navigation

We encourage users to post events happening in the community to the community events group on https://www.drupal.org.
commonmind's picture

I'm working on a theme for a client who's requested a navigation menu which would be best handled with sprite-based rollovers. I've deployed several Drupal sites and have built many sprite-based navigation menus, but I haven't yet brought these two particular skills together; it seems as if it would be an arduous and difficult process (for me, at least) to do this in Drupal, considering how it creates and populates its menus.

Unfortunately, I have no development chops, so any attempt at writing a piece of code to assign tags for CSS manipulation is pretty much outside of my comfort zone.

My logical assessment here is to insert the HTML code into the page.tpl file and then style it accordingly. This is going to be a (mostly) static, corporate site, so hard-coding the menu as an unordered list into the page.tpl file doesn't seem like a bad idea.

Any suggestions? Words of wisdom? Vote of confidence...? A simple "go for it sport" would suffice. I'll take anything, really.

Comments

Once you analyze the markup

kthull's picture

Once you analyze the markup Drupal puts out, you should have all the classes you need to implement your css sprites. It may not be the most logical markup, but there's usually no shortage of class and id selectors from Drupal.

I'll try to answer anything more specific if I can. I've not implemented sprites with the menus, but have moved them around (which is harder than it should be) and have never needed anything more than core for style purposes.

I build websites, push pixels, move type, make media, plan camps, tap mana, roll for initiative, eat like a boss, chase food trucks and like an #eggoneverything. Sponsor my travel and I will record and post your camp sessions!

What I really should have

commonmind's picture

What I really should have said was I am trying to stay away from targeting something like "ul#main-menu.links li.menu-987" and instead wanted to build something which was more semantically logical to me. I guess, because I've been so used to building static pages, I'm a little afraid of Drupal's dynamic output -- we haven't had time to build up a trusting relationship just yet.

One of the methods I employ for creating these sprite-based menus involves targeting spans. Is there a simple but effective way to generate spans on every menu item, to give me an even deeper level of control over my styling? I know this is not necessary, but having the information at hand would be helpful for future projects.

Thanks for the response and the candor, I do appreciate it.

I couldn't agree more about

kthull's picture

I couldn't agree more about semantic markup. And unfortunately I don't know of a solution for what you are looking for.

I build websites, push pixels, move type, make media, plan camps, tap mana, roll for initiative, eat like a boss, chase food trucks and like an #eggoneverything. Sponsor my travel and I will record and post your camp sessions!

That's not a problem. Thanks

commonmind's picture

That's not a problem. Thanks so much for the replies. I'll try this using Drupal's output and see where it gets me first. I guess there's no better time then the present to learn to do it the right way.

I haven't tried this module

jerseycheese's picture

I haven't tried this module out, but it claims to give you what you need (let me know how it goes):
http://drupal.org/project/menu_attributes

If you want to home-bake your own solution, you need to override theme_links so that it produces more logical classes. A quick googling gives me this:
http://blogthingee.com/blog/unique-class-cool-drupal-menu-items

Which explains how to get unique classes on list items, but his example is for overridding phptemplate_menu_item().

You want follow the same principle, but override theme_links() instead:
http://api.drupal.org/api/function/theme_links

You can even pop some spans on the inside of the list items if you want to add more markup and they are not already provided for you.

Thanks for the references,

commonmind's picture

Thanks for the references, Jersey. What I ended up doing was modifying the way in which I wrote my CSS in order to sidestep the problem (this is probably a poor way of putting it, as it insinuates there was a problem with Drupal, when in actuality the problem was in my inability to look at my styling in a different way). I will check out the module, however, as it sounds as if it would help with future projects (at least until I learn a little more PHP and feel comfortable modifying template files).

Thanks again. I do greatly appreciate the help.

Theme development

Group organizers

Group notifications

This group offers an RSS feed. Or subscribe to these personalized, sitewide feeds:

Hot content this week