Solved

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

Posted on 2008-10-17
5
333 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
Comment Utility
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
Comment Utility
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
Comment Utility
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.
Comment Utility
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
Comment Utility
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

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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 customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…

763 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

12 Experts available now in Live!

Get 1:1 Help Now