CSS Slider on active Link


#1

Hi Community,

i want to code a Navigation Slider with pure CSS. The slider works on a.hover but not on a.active.
How can i mark the active link?

			  <ul>
  <li><a href="index2.html">Nav1</a></li>
  <li><a href="about.html">Navigation2</a></li>
  <li><a href="contact.html">Navigation3</a></li>
  <li></li>

</ul>
body {
  background: #292929;
  color: #ffcc00;
  text-shadow: 0 1px 2px rgba(0, 182, 255, 0.4);
  font-family: sans-serif;
}

ul {
  position: relative;
  width: 500px;
  
}
ul:hover > li:last-child {
  background: #00b6ff;
}
ul:after {
  content: '';
  display: block;
  clear: both;
}

li {
	list-style-type: none;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

li:not(:last-child) {
  width: 33.3333333%;
  float: left;
  padding: 7px 0;
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
}
li:not(:last-child):hover {
  color: #ffcc00;
}
li:active {
  color: #ffcc00;
}
li:not(:last-child):nth-child(2):hover ~ li:last-child {
  left: 33.3333333%;
}
li:not(:last-child):nth-child(3):hover ~ li:last-child {
  left: 66.6%;
}

li:last-child {
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  width: 33.3333333%;
  height: 2px;
  background: #d7d7d7;

}
li a.current{
left: 66.6%;
background: #292929;
}

Thanks for help!!


#2

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.