How to best setup an image rollover state for site navigation
I have a site that must be rebuilt to be responsive. The new design will be close to the current design, and will use images in two different states for a vertical navigation menu. I can either use two larger images or 7 smaller images. In each case I would use css to reposition the image in the different stacked divs depending on which state is displayed. Rollover, active and clicked are the same.
Option 1: one larger image of all rollover states and one large image for all link state, using css to reposition the image in each of 7 divs.
Option 2: create a link and rollover state for each of 7 divs using 7 different images. Each image will have two states and be repositioned using css.
Which option would be the most efficient for site performance or would it matter? Here's a link to the current site: http://themaidplace.com
Option 1: one larger image of all rollover states and one large image for all link state, using css to reposition the image in each of 7 divs.
Option 2: create a link and rollover state for each of 7 divs using 7 different images. Each image will have two states and be repositioned using css.
Which option would be the most efficient for site performance or would it matter? Here's a link to the current site: http://themaidplace.com
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
greetings weknowjack, I looked at your site on my android phone in the default browser, and I could see it, an use the "menu" there (on the right in the home page), to go to the the Five other pages as "packages", "about us", "our rates" etc.
But this question about the two options as - "one larger image" and the other as - "each of 7 divs using 7 different images", , , makes no sense regarding using CSS and repositioning for a newer "responsive" web site design.
The CSS for a new site design to be responsive, means you change the entire site, not just the menu, for different "size" width and height views in a "phone", a tablet, and a laptop. You say nothing about the "New Design" site arrangement changing when the "Phone" narrow vertical view (portrait view) and the repositioning of ALL the elements in the site, including the menu in the Phone view.
But this question about the two options as - "one larger image" and the other as - "each of 7 divs using 7 different images", , , makes no sense regarding using CSS and repositioning for a newer "responsive" web site design.
The CSS for a new site design to be responsive, means you change the entire site, not just the menu, for different "size" width and height views in a "phone", a tablet, and a laptop. You say nothing about the "New Design" site arrangement changing when the "Phone" narrow vertical view (portrait view) and the repositioning of ALL the elements in the site, including the menu in the Phone view.
ASKER
julianH answered my original question. There are differing opinions on whether or not to use images in mobile navigation. In this case, the preservation of the design is more important than the simplified functionality for mobile users. Thanks.
You are welcome - good luck with your project.
http://jsfiddle.net/jfh2sdxm/