Solved

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

Posted on 2008-10-17
5
344 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Technology Partners: 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

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…

717 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