Cara membuat menu slider accordian CSS3

Hallo selamat pagi sehabat blogging semua,, kali ini saya akan coba share Cara membuat menu slider accordian CSS  sebelumnya saya share Template Ijonkz Responsive Magazine .. nah baiklah shobat pada kesempatan kali ini saya Admin akan coba mengupas secara tajam setajam silet, sekarang anda tidak usah khawatir lagi menggunakan scripts yang bisa memberatkan blog anda, untuk kalian shobat yang suka ngutak atik blognya langsung aja nehh kita menuju ke TKP==>

Membuat Menu Slider Accordian 

HTML + CSS

<div class="accordian">
  <ul>
    <li>
      <div class="image_title">
        <a href="http://www.bulshitman.blogspot.com/" target="_blank">KungFu Panda</a>
      </div>
      <a href="http://www.bulshitman.blogspot.com/" target="_blank">
        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDQtHfnovm7uAHV8wEOVDSlF0PfOud873b3S8ig7slA8Xdfqr_SMEYoCzm5qFybPX31pQ_DeroClrxYp_Zk3TEpB71n2QfdYmy0us0PuspqOVtmlAud8o8_6k20CvgPwQ66-Im_ZwOZbw/s1600/seocips1.jpg" />
      </a>
    </li>
    <li>
      <div class="image_title">
        <a href="http://www.bulshitman.blogspot.com/" target="_blank">Toy Story 2</a>
      </div>
      <a href="http://www.bulshitman.blogspot.com/" target="_blank">
        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXLxtYigLkO0veo_vRWSTjD9_hXPXQVIp3-ecQSjqOjXWelOc14NLSKE1xlQgm0sDfhXxbZWKy8BOLPDvWbm9p8wOzxmivGGkF1zM5w3cCFQpXBlvFEqHNP6VAK1brMRJ7esHUaSsvAQ8/s1600/seocips2.jpg" />
      </a>
    </li>
    <li>
      <div class="image_title">
        <a href="http://www.bulshitman.blogspot.com/" target="_blank">Wall-E</a>
      </div>
      <a href="http://www.bulshitman.blogspot.com/" target="_blank">
        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfwA7iNpAI88EZ7ojCnOIyVtLIlo5-VQ1XrbVKGgO7B5mxTgXo6dan-jdQvbkii4BdjL_tdkM7ehLbVjyLhc0HVvAfuwPT5IfPN__eV4__MR-AZJsFot9sHzyygD1ziwEmtuJaCvE1zjI/s1600/seocips3.jpg" />
      </a>
    </li>
    <li>
      <div class="image_title">
        <a href="http://www.bulshitman.blogspot.com/" target="_blank">Up</a>
      </div>
      <a href="#">
        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcYWe-UsRa3M9X7X-RA_euTvb5i3EfP8oie62VWuicu5aOsY-PYtJoI7kqMokEuFvFGLih7eBdzI07iBes9nk3oLq8pTxBE5j2Io972Z3Xa16Iix1sIne5ooi-TjU-CM1kUx-ihJ-1ZRU/s1600/seocips4.jpg" />
      </a>
    </li>
    <li>
      <div class="image_title">
        <a href="http://www.bulshitman.blogspot.com/" target="_blank">Cars 2</a>
      </div>
      <a href="http://www.bulshitman.blogspot.com/" target="_blank">
        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtwNWkEVK-21WzXHHjQKRQBb6VAYKqJnFKwzSeeqeDl2ut-N-_lNkWPtnwP3NQwc7RMtNbJJsw0IOBW4noVwmxTeT_SHLUjrv0RukvQKNVTtJ3j2NAdRXEb7WeftOmGULesvex80uFTcc/s1600/seocips5.jpg" />
      </a>
    </li>
  </ul>
</div>
<style>
/*Now the styles*/
.accordian {
  width: 805px;
  height: 320px;
  overflow: hidden;
  /*Time for some styling*/

  margin: 20px auto;
  box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
  -webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
  -moz-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
}
/*A small hack to prevent flickering on some browsers*/
.accordian ul {
  width: 2000px;
  /*This will give ample space to the last item to move
instead of falling down/flickering during hovers.*/
}
.accordian li {
  position: relative;
  display: block;
  width: 160px;
  float: left;
  border-left: 1px solid #888;
  box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
  /*Transitions to give animation effect*/

  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  /*If you hover on the images now you should be able to
see the basic accordian*/
}
/*Reduce with of un-hovered elements*/
.accordian ul:hover li {
  width: 40px;
}
/*Lets apply hover effects now*/
/*The LI hover style should override the UL hover style*/
.accordian ul li:hover {
  width: 640px;
}
.accordian li img {
  display: block;
}
/*Image title styles*/
.image_title {
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  left: 0;
  bottom: 0;
  width: 640px;
}
.image_title a {
  display: block;
  color: #fff;
  text-decoration: none;
  padding: 20px;
  font-size: 16px;
}
</style>