Image based navigation, need help…

  • Heya,
    So I’m familiar with the traditional CSS and Javascript methods of doing image based navigations that have three states (active, hover and current item) but I haven’t seen a good solution that works well with WordPress in my opinion.

    On this site I’m working on the navigation breaks into four areas:

    • The top, which is my focus today, that is image based and has three states.
    • The left top, which has a top part that is image based but only has one state and a bottom part that is text based and is currently being populated by the list_pages function.
    • The bottom which is also list_pages.

    So I’m wondering if anyone knows an incredibly efficient way to code/create/manage these, ideally, using WordPress?

    Thanks!

Viewing 1 replies (of 1 total)

  • It would be a lot more efficient and easier to maintain if you used text links instead of images. With text, you could use the standard WordPress template tags to leave the menu dynamic.

    You could set a font that would match that using CSS, and with CSS3 you could add dropshadows if you want them. With CSS you could have anchor, hover, and active styles, so that shouldn’t be a problem.

    For the icons, make just those into graphics, and add them as background images to the different links. And if you do this with CSS, you can ditch the JavaScript, that just isn’t need for something like rollovers anymore.

    Each link in your navigation has a unique ID, so you could style each with a different icon and setup a default icon for if you add new pages.

    Check out this article on using sprites, if you want to add icons with hover and active states.

Viewing 1 replies (of 1 total)
  • The topic ‘Image based navigation, need help…’ is closed to new replies.