JSFiddle - React, Tailwind, and code Playground

by Kocsten

HTML

<body>

<div class="main"> 

<h1>CSS SlideMenu</h1>
<p>100% CSS Menu</p>

  <section class="grey">
    <p class="section-title">Menu with icon</p>
    
    <div class="slidemenu">
      
      <!--Item 1-->
      <input type="radio" name="menu" id="one" class="menu-one" checked>
      <label for="one"><i><img src="https://raw.githubusercontent.com/abenjamin765/slidemenu/gh-pages/img/home.gif" alt=""/></i><span>Home</span></label>
      
      <!--Item 2-->
      <input type="radio" name="menu" id="two" class="menu-two">
      <label for="two"><i><img src="https://raw.githubusercontent.com/abenjamin765/slidemenu/gh-pages/img/about.gif" alt=""/></i><span>About</span></label>
      
      <!--Item 3-->
      <input type="radio" name="menu" id="three" class="menu-three">
      <label for="three"><i><img src="https://raw.githubusercontent.com/abenjamin765/slidemenu/gh-pages/img/folio.gif" alt=""/></i><span>Folio</span></label>
      
      <!--Item 4-->
      <input type="radio" name="menu" id="four" class="menu-four">
      <label for="four"><i><img src="https://raw.githubusercontent.com/abenjamin765/slidemenu/gh-pages/img/blog.gif" alt=""/></i><span>Blog</span></label>   
      
      <!--Item 5-->
      <input type="radio" name="menu" id="five" class="menu-five">
      <label for="five"><i><img src="https://raw.githubusercontent.com/abenjamin765/slidemenu/gh-pages/img/contact.gif" alt=""/></i><span>Contact</span></label>
      
      <!--Slider Bar-->
      <div class="slider">
        <div class="bar"></div>
      </div>
      <!--Slider Bar End-->

    </div>
  </section>


  <section class="grey">
    <p class="section-title">Menu without icon</p>
    
    <div class="slidemenu">
      
      <!--Item 1-->
      <input type="radio" name="menu1" id="one1" class="menu-one" checked>
      <label for="one1"><span>Home</span></label>
      
      <!--Item 2-->
      <input type="radio" name="menu1" id="two1" class="menu-two">
      <label...

CSS

/*slidemenu */
.slidemenu {
    width:50%;
    margin:0 auto
}

.slidemenu:after {
    content:"";
    display:table;
    clear:both
}

.slidemenu label {
    width:20%;
    float:left;
    box-sizing:border-box;
    text-align:center;
    padding:15px;
    opacity:.5;
    -webkit-transition:all .15s ease-out;
    -moz-transition:all .15s ease-out;
    transition:all .15s ease-out;
    font-size:12px;
    font-weight:600
}

.slidemenu label i {
    height:35px;
    width:35px;
    display:block;
    margin:0 auto 10px
}

.slidemenu label:hover {
    cursor:pointer;
    opacity:.9
}

.slidemenu .slider {
    background:#ccc;
    height:5px;
    border-radius:5px;
    clear:both
}

.slidemenu .slider .bar {
    background:#333;
    height:5px;
    width:20%;
    border-radius:5px;
    margin-left:0;
    -webkit-transition:all .15s ease-in-out;
    -moz-transition:all .15s ease-in-out;
    transition:all .15s ease-in-out
}

.slidemenu input[type="radio"] {
    display:none
}

.slidemenu .menu-one:checked ~ .slider .bar {
    margin-left:0
}

.slidemenu .menu-two:checked ~ .slider .bar {
    margin-left:20%
}

.slidemenu .menu-three:checked ~ .slider .bar {
    margin-left:40%
}

.slidemenu .menu-four:checked ~ .slider .bar {
    margin-left:60%
}

.slidemenu .menu-five:checked ~ .slider .bar {
    margin-left:80%
}

.slidemenu .menu-one:checked + label {
    opacity:1
}

.slidemenu .menu-two:checked + label {
    opacity:1
}

.slidemenu .menu-three:checked + label {
    opacity:1
}

.slidemenu .menu-four:checked + label {
    opacity:1
}

.slidemenu .menu-five:checked + label {
    opacity:1
}

@media screen and (max-width: 780px) {
.slidemenu {
    width:90%
}
}

@media screen and (max-width: 780px) and (max-width: 500px) {
.slidemenu label span {
    display:none
}
}

@media screen and (max-width: 780px) and (max-width: 500px) {
.slidemenu label {
    padding-bottom:0
}
}

/*Colors*/

.blue label span{
  color: #0090da;
}

.blue .slider .bar{
  background:...