Hi again

 

I have designed a website which has an arrowhead as part of the (vertical) navigation links to indicate which page a user is on. I would like to code this so that the arrow moves next to the page name that the user is hovering over / clicks on.

 

Would I be better to use CSS3 for this or Java/Jquery? The header area which contains the navigation already has 3 horizontal divs, 1 for the logo, 1 for the social icons & slogan and 1 for the navigation links. Will I need a fourth div for the navigation slider? If so, I'm not sure which order I would put them in as with having three they are in the order of logo, nav and then the social div.

 

It might help to have a link to the design it's a rather large png file as it is only in approval phase so I have uploaded it for my client to view. Link is http://penvoxtravel.co.uk/homepage2.html

 

As part of the homepage, I have also designed an area with a group of polaroid snaps (the images in the design are just placeholders for now). I want to find of way of having these move as though someone is looking through them if that makes sense? Can anyone advise me as to where I could find a tutorial for this or some basic advice on where to start?

 

Phank you

The nav can be done with CSS - a hover/active state.

 

Something like:

 

.yournav ul li a:hover, .yournav ul li a.active {
 background: url(yourimage) no-repeat top right;
 padding-right: 20px;
}

 

The polaroid stuff - now that is a *lot* more tricky.

It depends entirely how you want it to animate.

 

The way I imagine it would work, is a next/previous button that cycles through the photo's - the problem is getting them to be ordered in the way your design shows them.

 

It would be a *very* bespoke solution that would require some serious Javascript skills or probably Flash.

 

Doing a quick google search, I can't find any examples that would work with your design.

 

One thing you *could* do is not to animate them with a next/previous button, but rather, to change the z-index (layer) to bring a photo to the front of the stack. That would be the easiest way to handle the design.

 

One example:

 

http://demos.usejquery.com/03_z-index_gallery/

The nav can be done with CSS - a hover/active state.

 

Something like:

 

.yournav ul li a:hover, .yournav ul li a.active {
 background: url(yourimage) no-repeat top right;
 padding-right: 20px;
}

 

Perfect thank you

 

The polaroid stuff - now that is a *lot* more tricky.

It depends entirely how you want it to animate.

 

The way I imagine it would work, is a next/previous button that cycles through the photo's - the problem is getting them to be ordered in the way your design shows them.

 

It would be a *very* bespoke solution that would require some serious Javascript skills or probably Flash.

 

Doing a quick google search, I can't find any examples that would work with your design.

 

Ah ok thanks, I was hoping not to need a next/previous button but rather for the images to move automagically

 

One thing you *could* do is not to animate them with a next/previous button, but rather, to change the z-index (layer) to bring a photo to the front of the stack. That would be the easiest way to handle the design.

 

One example:

 

http://demos.usejquery.com/03_z-index_gallery/

 

Just had a quick look and I think I can make this work... Thanks, you're a star

You could just make the middle Polaroid change, and fade in and out? Just the picture inside the Polaroid, usually happens with people that use iPad images, etc.

You could just make the middle Polaroid change, and fade in and out? Just the picture inside the Polaroid, usually happens with people that use iPad images, etc.

 

Another great idea, thanks :-)