Solved

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

Posted on 2008-10-17
5
338 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

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

829 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