Solved

What am I doing wrong with this menu?

Posted on 2013-05-23
4
145 Views
Last Modified: 2013-05-30
Head out to http://www.brucegust.com/campaign/index.php

When you mouse over the nav bar, you'll see how I've got a little image swap going on, but the image takes a second to load. So, instead of the user being treated to an experience where the link immediately changes over their mouseover, it takes a second for the mouseover image to appear.

What can I do differently or what I doing wrong that I can improve on so I get an immediate change rather than one that appears sluggish?

My stylesheet is at http://www.brucegust.com/campaign/stylesheet.css
0
Comment
Question by:brucegust
  • 2
4 Comments
 
LVL 33

Expert Comment

by:paulmacd
ID: 39190797
Use a single image for the static and mouseover image.  Make it so that the new single image is comprised of the static image above the mouseover image.  Use the top half of the image for the static display, and the bottom half of the image for the mouseover display.
0
 
LVL 5

Accepted Solution

by:
Eikroman earned 500 total points
ID: 39190841
paumacd's solution is valid.

Another way is to use javascript for preloading.
Like this one.
<script>
var images = ["/image1path.jpg","/image2path.jpg"];
for (i = 0; i < preload.length; i++) {
    images[i] = new Image();
    images[i].src = preload[i];
}
</script>

Open in new window

http://stackoverflow.com/questions/761263/what-is-the-best-way-to-preload-multiple-images-in-javascript
0
 
LVL 33

Expert Comment

by:paulmacd
ID: 39190897
This is an excellent example of what I was talking about in my initial post.  Look at the bottom of the page, in the section marked "Image Sprites - Hover Effect":
http://www.w3schools.com/css/css_image_sprites.asp
0
 
LVL 8

Expert Comment

by:soupBoy
ID: 39190972
Maybe I read paulmacd's response incorrectly, but I believe he is talking about using sprites, which would work because the navigation menu images are background images.  Not that Eikroman's solution wouldn't work, as I have used something similar.

The real issue here however is the fact that images are being used for simple display changes and text.  Why not use CSS?  It would be better for search engines and would load faster....plus no need for sprites (for the menu at least) or javascript to cache the 'hover' images.

Take a look at this little jsFiddle I created: Menu using lists and CSS

Here is the HTML:
<div id="links_container">
    <!-- Old HTML 
	<div id="links_background">
		<a href="index.php" class="home">Home</a>
		<a href="about.php" class="about">About</a>
		<a href="portfolio.php" class="portfolio">Portfolio</a>
		<a href="testimonials.php" class="testimonials">Testimonials</a>
		<a href="special_offer.php" class="special_offer">Special Offer</a>
		<a href="contact.php" class="contact">Contact</a>
	</div>
    End of Old -->
    <nav>
        <ul>
            <li><a href="#" class="home">Home</a></li>
            <li><a href="#" class="about">About</a></li>
            <li><a href="#" class="portfolio">Portfolio</a></li>
            <li><a href="#" class="testimonials">Testimonials</a></li>
            <li><a href="#" class="special_offer">Special Offer</a></li>
            <li><a href="#" class="contact">Contact</a></li>
        </ul>
   </nav>
</div>

Open in new window

Here is the CSS:
/* My little CSS reset */
*, *:before, *:after{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
/* End reset */

nav{
    /* background gradient from http://www.colorzilla.com/gradient-editor/ */
    background: #4c4c4c; /* Old browsers */
background: -moz-linear-gradient(top,  #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #000000 51%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4c4c4c), color-stop(12%,#595959), color-stop(25%,#666666), color-stop(39%,#474747), color-stop(50%,#2c2c2c), color-stop(51%,#000000), color-stop(60%,#111111), color-stop(76%,#2b2b2b), color-stop(91%,#1c1c1c), color-stop(100%,#131313)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* IE10+ */
background: linear-gradient(to bottom,  #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 ); /* IE6-9 */
zoom: 1;
}

nav ul{
    list-style-type: none;   
}
nav ul:after{
    content: "";
    display: table;
    clear: both;
}
nav li {
    float: left;
    line-height: 2em;
    width: 16.66666%;
}

nav a{
    display: block;
    text-decoration: none;
    color: #FFF;
    text-align: center;
}
nav a:hover{
    background: #ccc;
    background: rgba(222, 222, 222, .2);

}

Open in new window

0

Featured Post

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
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…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

757 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

21 Experts available now in Live!

Get 1:1 Help Now