Solved

Step-by-Step:  How to design similar to overlapping Veer.com navigation?

Posted on 2008-10-17
5
341 Views
Last Modified: 2012-05-05
Can you please provide the HTML, CSS. and any JS so that I can get this up.  It looks like there are some PNG files for the drop shadow, but I'm not sure.

Site:  http:///www.veer.com

Thanks,
Robert
0
Comment
Question by:jazzviolin
  • 3
  • 2
5 Comments
 

Author Comment

by:jazzviolin
ID: 22743017
I turned off JS with Firefox, and the rollover state does not activate.  So I guess this is a JS question.

0
 
LVL 42

Accepted Solution

by:
David S. earned 500 total points
ID: 22743190
Ew. It uses inline JavaScript to swap images onmousover and onmouseout.

Here are the images for the Photography link:
http://www.veer.com/images/en-US/nav/fudgenav-phot-xdd.gif
http://www.veer.com/images/en-US/nav/fudgenav-phot-xod.gif

For something so simple I'd use CSS Sprites. Check this out: http://www.dynamicsitesolutions.com/css/background-image-switching-2/
0
 

Author Comment

by:jazzviolin
ID: 22743330
It's a bit more complicated than a box rollover -- how does it fill into the navigation to the left, to make the overlap feel?  Roll over a tab, then you can see that the navigation immediately to the left has a piece that highlights.
0
 
LVL 42

Expert Comment

by:David S.
ID: 22744986
After looking at it a bit closer, it seems you're right. It is a bit more complicated than that. It also changes the image of the neighbor on its left side.  So it's not feasible to do this without JS because of the double switching.

Here's the third image for the Photography link:
http://www.veer.com/images/en-US/nav/fudgenav-phot-xdo.gif
0
 

Author Comment

by:jazzviolin
ID: 22745365
Yeah I'm going to need step-by-step instructions.  I have already previewed the image files, but I do not know how to implement the JS.
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
This article discusses four methods for overlaying images in a container on a web page
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

749 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question