Cool Sprites – Free overlapped CSS menu using CSS Sprites

It is said that 70 to 80 percentage of the end-user response time is spent on the front-end. A major portion of this time is exhausted on downloading all the external components in a web page including, stylesheet, images, scripts, flash etc. An extra HTTP request adds 200+ milliseconds to a page (worldwide average).

Since most of today’s browsers limit about 3 or 4 parallel requests at a time, a page with so many external references can cause the requests to get queued up. This may eventually cause the page loading time to increase. In short, the fewer files the web browser has to fetch that much faster the site loads. It’s as simple as that.

What is CSS sprite?

CSS sprites can be termed as a method for reducing the number of image requests to a web page by combining multiple images into a single image, and display the desired segment using CSS background-image and background-position properites. Now that almost all major browsers started supporting CSS background-image and background-position properties, CSS sprites are getting more significance.

Cool Sprites – Free Pure CSS menu for download

Here I am presenting a cool overlapped pure CSS menu created using CSS sprites. This is an initial draft version, so far I have checked it only in Firefox 3.5, IE 7, Chrome 3.0 & Opera 9.02 and it looks fine. If anyone of you finds any issues in any other browsers, please lemme know. Cool sprites is a pack of four different versions of the same menu. The photoshop source is also available for download, so that you can customize it as per your need. Since this menu is largely dependent on the background image, you need to customize the image to alter the link label, color, size etc.

Cool Sprites – LIVE PREVIEW

Sample HTML Code

1
2
3
4
5
6
7
8
9

<div class="navi1">
  <ul>
    <li class="sm1"><a href="#"></a></li>
    <li class="sm2"><a href="#"></a></li>
    <li class="sm3"><a href="#"></a></li>
    <li class="sm4"><a href="#"></a></li>
    <li class="sm5"><a href="#"></a></li>
  </ul>
</div>

Sample CSS Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

.navi1 {
    display:block;
    height:72px;
    margin:0 auto;
    position:relative;
    width:525px; }
.navi1 ul {
    float:none;
    list-style-image:none;
    list-style-type:none;
    margin:3px 0; }
.navi1 ul li {
    background-image:url(tab-1.png);
    background-repeat:no-repeat;
    float:left;
    height:72px;
    margin:0px;
    padding-top:5px;
    position:absolute; }
.navi1 ul li a {
    display:block;
    height:100%;
    width:100%; }
.navi1 ul li.sm1 {
    background-position:0 0;
    left:0px;
    width:125px; }
.navi1 ul li.sm2 {
    background-position:-125px 0;
    left:100px;
    width:124px; }
.navi1 ul li.sm3 {
    background-position:-249px 0;
    left:200px;
    width:124px; }
.navi1 ul li.sm4 {
    background-position:-373px 0;
    left:300px;
    width:125px; }
.navi1 ul li.sm5 {
    background-position:-498px 0;
    left:400px;
    width:126px; }
.navi1 ul li:hover {
    z-index:1000; }
.navi1 ul li.sm1:hover {
    background-position:0 -75px; }
.navi1 ul li.sm2:hover {
    background-position:-125px -75px; }
.navi1 ul li.sm3:hover {
    background-position:-249px -75px; }
.navi1 ul li.sm4:hover {
    background-position:-373px -75px; }
.navi1 ul li.sm5:hover {
    background-position:-498px -75px; }

Sample CSS Sprite Image

Download Cool Sprite

Dovwnload HTML, CSS, PNG files

[download id=”3″]

[ad#ad-3]

Download Photoshop PSD

[download id=”4″]

You can use these menus for personal and commercial projects at free of charge. What I only expect in return is your comments and backlinks, if you like it. You are not allowed to sell or redistribute these menus anywhere else. If you like to share cool sprites please link to this article.
Do not provide the direct download link nor upload these menus onto other servers for your own share, without my permission. If you want to spread the words, just link to this article.

Cool Sprites – Free overlapped CSS menu using CSS Sprite by Deepu Balan is licensed under a Creative Commons Attribution 2.5 India License. Based on a work at deepubalan.com.

About The Author

Deepu Balan

Hi there! I’m a web UI/UX architect. This is my online playground, my beautiful space to share my passions, my work and what I find inspiring.

See author's posts