Tags

, ,

Simple Example for Beginners

 

HTML CODE

<div class="text-right">
	<ul class="leftToRight">
	  <li>1</li>
	  <li>2</li>
	  <li class="active">3</li>
	  <li>4</li>
	  <li>5</li>
	</ul>
</div>

<ul class="leftToRight setToRight">
  <li>5</li>
  <li>4</li>
  <li>3</li>
  <li class="active">2</li>
  <li>1</li>
</ul>

 

CSS CODE

* {
  margin: 0;
  padding: 0;
}
.text-right{ text-align:right; }
li {
  list-style: none;
}

.leftToRight {
  font-size: 0;
  background-color: #dde2e8;
  display: inline-block;
  border-radius: 50px 0 0 0;
  overflow: hidden;
  margin-bottom: 20px;
}

.leftToRight li {
  font-size: 20px;
  float: left;
  border-radius: 50px 0 0 0;
  background-color: #dde2e8;
  padding: 10px 30px;
  position: relative;
}

.leftToRight li:hover,
.leftToRight li.active {
  background-color: red;
  color: #ffffff;
}

.leftToRight li.active:after,
.leftToRight li:hover:after {
  content: '';
  height: 100%;
  width: 100%;
  margin: 0;
  position: absolute;
  z-index: 0;
  top: 0;
  left: 100%;
  background-color: red;
}

.leftToRight.setToRight {
  border-radius: 0 50px 0 0;
}

.leftToRight.setToRight li {
  border-radius: 0 50px 0 0;
  float:right;
}

.leftToRight.setToRight li.active:after,
.leftToRight.setToRight li:hover:after {
  left: -100%;
}

 

Js Fiddle Example

Advertisements