Sliding menu using CSS?

Question

I'm trying to create a sliding menu like the image bellow:

I need to slide the black border/line to left and right i fthe menu is clicked.

I did search on Google and so far I came up with the following:

@import url(https://fonts.googleapis.com/css?family=Montserrat);

ul{
  position: absolute;
  width: 100%; height: 50px;
  top: 50%; 
  left: 0;
  padding: 0px;
  list-style: none;
  text-align: center;
  
}

li{
  position: relative;
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  display: inline-block;
  padding: 0px 15px;
  color: #000;
  width:48%;
  box-sizing:border-box;
    height: 50px;
}

a{
  text-decoration: none;
  color: #000;
}

.link{
  position: relative;
}

.link:after{
  content: '';
  position: absolute;
  width: 0; height: 3px;
  display: block;
  margin-top: 5px;
  right: 0;
  background: #000;
  transition: width .2s ease;
  -webkit-transition: width .2s ease;
}
 
.link:hover:after{
  width: 100%;
  left: 0;
  background: #fff;
}


/*END OF CODE*/

<ul>
  <li><a class="link" href="#">Home</a></li>
  <li><a class="link" href="#">Work</a></li></li>
</ul>

But it is not what I am looking for. Can someone please advice on this?

Thanks in advance.

Answer 1

Here you have an example of a slide nav bar, in the example you will see 4 items, add or remove items that you need but remember to change the css, because the animation and the bar will not look the same if you change the items.

Hope you understand all the CSS code and then you can change what ever you want of the example.

Hope it helps you!!!

@import url(https://fonts.googleapis.com/css?family=Montserrat);

*{
  margin: 0;
  padding: 0;
}

.clear{
  clear: both;
}


.slide-toggle{
  display: none;
}

.slidemenu{
  font-family: 'Montserrat', sans-serif;
  max-width: 400px;
  margin: 50px auto;
  overflow: hidden;
}

.slidemenu label{
  width: 25%;
  text-align: center;
  display: block;
  float: left;
  color: #333;
  opacity: 0.2;

}

.slidemenu label:hover{
  cursor: pointer;
  color: #666;
}

.slidemenu label span{
  display: block;
  padding: 10px;    
}

.slidemenu label .icon{
  font-size: 20px;
  border: solid 2px #333;
  text-align: center;
  height: 50px;
  width: 50px;
  display: block;
  margin: 0 auto;
  line-height: 50px;
  border-radius: 50%;
}

/*Bar Style*/

.slider{
  width: 100%;
  height: 5px;
  display: block;
  background: #ccc;
  margin-top: 100px;
  border-radius: 5px;
}

.slider .bar{
  width: 25%;
  height: 5px;
  background: #333;
  border-radius: 5px;
}

/*Animations*/
.slidemenu label, .slider .bar {
  transition: all 500ms ease-in-out;
  -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
}

/*Toggle*/

.slidemenu .slide-toggle:checked + label{
  opacity: 1;
}



.slidemenu #slide-item-1:checked ~ .slider .bar{ margin-left: 0; }
.slidemenu #slide-item-2:checked ~ .slider .bar{ margin-left: 25%; }
.slidemenu #slide-item-3:checked ~ .slider .bar{ margin-left: 50%; }
.slidemenu #slide-item-4:checked ~ .slider .bar{ margin-left: 75%; }


/*END OF CODE*/

<nav class="slidemenu">
  
  <!-- Menú Item 1 -->
  <input type="radio" name="slideItem" id="slide-item-1" class="slide-toggle" checked/>
  <label for="slide-item-1"><p class="icon">1</p><span>Item1</span></label>
  
  <!-- Menú Item 2 -->
  <input type="radio" name="slideItem" id="slide-item-2" class="slide-toggle"/>
  <label for="slide-item-2"><p class="icon">2</p><span>Item2</span></label>
  
  <!-- Menú Item 3 -->
  <input type="radio" name="slideItem" id="slide-item-3" class="slide-toggle"/>
  <label for="slide-item-3"><p class="icon">3</p><span>Item3</span></label>
  
  <!-- Menú Item 4 -->
  <input type="radio" name="slideItem" id="slide-item-4" class="slide-toggle"/>
  <label for="slide-item-4"><p class="icon">4</p><span>Item4</span></label>
  
  <!-- Bar of the bottom -->
  <div class="slider">
    <div class="bar"></div>
  </div>
  
</nav>