Solved

What am I doing wrong with this menu?

Posted on 2013-05-23
4
151 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
[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
  • 2
4 Comments
 
LVL 34

Expert Comment

by:Paul MacDonald
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 34

Expert Comment

by:Paul MacDonald
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

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

Suggested Solutions

Title # Comments Views Activity
styling bootstrap grid system with CSS 2 58
Bootstrap list items overlap 3 52
Incorrect css styling in footer 3 23
iframe stay to the left of page 5 26
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
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…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

738 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