Solved

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

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Trouble inserting a variable  in javascript 7 42
WordPress Themes 10 34
Recordset containing single quotes 8 23
How can I increase the size of this logo 5 22
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…
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…

895 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

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now