Custom Navigation Elements

  • Hi, I’m pretty new to WordPress. I’m about to start a project and wonder if the following is possible.

    Can dynamic navigation links be designed so they are rollover images instead of text links? Basically I’m thinking of a design that is based on squares in a grid. Each square will be a link to a page or post.

    When the mouse hovers over the link will run a jquery script to animate it in some way (probably something like this – https://atticacreate.com/index.php) If you scroll down to the Recent Projects section you will see an example I created on a static website.

    Many thanks.

    Alex

Viewing 3 replies - 1 through 3 (of 3 total)

  • That can definitely be done. It’s really not much different then having the same effect on a static website. You can see a site I built here, that is all WordPress based. The images on the home page go from black and white to color on rollover, which isn’t exactly the same as what you want but similar.

    Thread Starter SEO Sheikh

    (@webfeetdesign)

    Ah that’s great, how does this work dynamically then? Is it possible for my client who won’t have very much coding knowledge, to add a page, then make the new link an image rollover?

    Cheers dkotter

    It just depends on how you set it up. On the page you linked, it’s basically just one big image, with the top part being the image and the bottom half being the rollover text. And so between the CSS and jQuery, it will hide the bottom half until hovered over, which it then shows that bottom half by sliding it in.

    So if you went with something similar, it would be a little harder to implement unless all images are the same size. It could still work if they weren’t, you’d just have to write some code to get the height of the images. And your client would just have to create the ‘double’ images and upload those as regular and then the code takes care of the rest.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Custom Navigation Elements’ is closed to new replies.