Skip to main content

Sliding navigation with single image

Simplicity is the best tool and we know it. So this tutorial is all about a simple and very effective navigation bar. This tutorial is all about CSS. There is no jquery or javascript and still it has very great effects.
For proffesional users who want simplicity and give more prefrence to their content rather than effects can go with that one.
We all know more effects take more time to load the page. Here is the solution. This tutorial contains a single image which slides as you move your mouse cursor. Simple lines of html code and small amount of css code is required to do this. Here we go......

Download Code


Html Code:

<ul class="green">
 <li><a href="#" title="home" class="current"><span>home</span></a></li>
    <li><a href="#" title="products"><span>products</span></a></li>
    <li><a href="#" title="blog"><span>blog</span></a></li>
    <li><a href="#" title="contact"><span>contact</span></a></li>
</ul>

<ul class="blue">
 <li><a href="#" title="home" class="current"><span>home</span></a></li>
    <li><a href="#" title="products"><span>products</span></a></li>
    <li><a href="#" title="blog"><span>blog</span></a></li>
    <li><a href="#" title="contact"><span>contact</span></a></li>
</ul>

Screen Shot:



Css Code:

Css for unordered list and its position is:
ul {
 padding: 5px;
 margin: 10px 0;
 list-style: none;
 background-color: #fff;
 border-bottom: 1px solid #e7e7e7;
 float: left;
 clear: left;
}

ul li {
 float: left;
 display: inline; /*For ignore double margin in IE6*/
 margin: 0 10px;
}

ul li a {
 text-decoration: none;
 float:left;
 color: #999;
 cursor: pointer;
 font: 900 14px/22px "Arial", Helvetica, sans-serif;
}

ul li a span {
 margin: 0 10px 0 -10px;
 padding: 1px 8px 5px 18px;
 position: relative; /*To fix IE6 problem (not displaying)*/
 float:left;
}

Css for navigation and its hover effects are here :

ul.red li a:hover {
  color: #fff;
 background: url(images/red.png) no-repeat top right;
}

ul.red li a:hover span {
 background: url(images/red.png) no-repeat top left;
}

ul.red li a.current {
 background: url(images/red.png) no-repeat top right;
  color: #fff;
}

ul.red li a.current span {
 background: url(images/red.png) no-repeat top left;
}
Hope you will like this post.

Labels:

Comments

Post a Comment

your Comment is sent for moderation, Thankyou

Popular posts from this blog

Network Topologies (Tutorial-4)

Topology refers to the way in which the network of computers is connected. The choice of topology is dependent upon--- Type and number of equipment being used  Planned applications and rate of data transfers  Required response times  Cost Types of Network Topologies Physical Topology: Physical topology defines how devices are connected to the network through the actual cables that transmit data(physical structure of the network)  Logical Topology: Logical Topology (also referred to as Signal Topology) is a network computing term used to describe the arrangement of devices on a network and how they communicate with one another.
Post a Comment
Read more

Networking (Tutorial-8) IEEE Standards

IEEE INTRODUCTION Institute of Electrical And Electronics professional organization for the advancement of technology related to electricity.  Formed in 1963 by the merger of IRE( Institute of Radio Engineers ) and AIEE(American Institute of Electrical Engineering)  IEEE is one of the leading standards-making organizations in the world. IEEE performs its standards making and maintaining functions through the IEEE Standards Association(IEEE-SA).  IEEE Standards The Institute of Electrical and Electronics Engineers Standards Association (IEEE-SA) is a leading developer of global industry standards in a broad-range of industries, including:  Power and Energy  Biomedical and Healthcare  Information Technology  Telecommunications  Transportation  Nanotechnology  Information Assurance  Development of IEEE Standards The IEEE standards development process can be broken down into seven basic steps, as follows: ...
Post a Comment
Read more

Cisco Hierarchical Model

Cisco Hierarchical Model Defined by Cisco to simplify the design, implementation, and maintenance of responsive, scalable, reliable, and cost-effective networks. The 3 layers are logical and not physical – there may be many devices in a single layer, or a single device may perform the functions of 2 layers, eg: core and distribution. The Cisco Hierarchical Model
Post a Comment
Read more