Creating a Navigation Menu using CSS Image Sprite

CSSWeb DevelopmentFront End Technology

Image sprite is used to reduce the number of http requests that makes our site’s load time faster.

Following is the code for creating a navigation menu using CSS image sprite −

Example

 Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
body {
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   margin: 0px;
}
span {
   width: 200px;
   height: 300px;
   background-color: black;
}
nav {
   background-color: black;
   height: 50px;
   padding-top: 15px;
   padding-left: 10px;
}
nav a {
   font-size: 20px;
   color: white;
   text-decoration: none;
   margin-right: 10px;
}
.home {
   width: 32px;
   height: 32px;
   background: url("css_sprites.png") -62px -62px;
}
.search {
   width: 32px;
   height: 32px;
   background: url("css_sprites.png") -10px -62px;
}
.phone {
   width: 32px;
   height: 32px;
   background: url("css_sprites.png") -62px -10px;
}
.user {
   width: 32px;
   height: 32px;
   background: url("css_sprites.png") -10px -10px;
}
</style>
</head>
<body>
<nav>
<img class="home" />
<a href="">HOME</a>
<img class="phone" />
<a href="">Call Us</a>
<img class="user" />
<a href="">Our Team</a>
<img class="search" />
<a href="">Search</a>
</nav>
<h1>
Main content here
</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi, non! Numquam
reprehenderit alias, nisi eos corrupti repudiandae deleniti illo officiis!</p>
</body>
</html>

Output

The above code will produce the following output −

raja
Published on 11-May-2020 12:54:32
Advertisements