cara mambuat Menu Sliding Vertikal Dengan CSS

Menu Sliding Vertikal Dengan CSS. Langsung saja masuk ke pembahasan :

Langkah 1
Masuk ke akun Blogger anda
Langkah 2
Masuk Ke Menu Rancangan atau Design
Langkah 3
Masuk ke EDIT HTML
Langkah 4
Silahkan Copy Paste kode dibawah ini tepat diatas kode ]]></b:skin>
  h2.slideInfoa {normal font:18px/25px georgia, serif; color:#000;} h2.slideInfoa span {padding:0 80px;} .slideHolder {height:498px; width:250px; margin:0 40px; padding:2px; font-family:georgia, serif; border:1px solid #888; float:left;} .slideOuter {height:498px; width:250px; overflow:hidden; margin:0;} .slideOuter .slide {padding:0; margin:0; list-style:none; height:800px; width:250px; overflow:hidden;} .slideOuter .slide li {display:block; float:left; height:98px; border-bottom:2px solid #fff; width:250px; overflow:hidden; background:red; -webkit-transition: 0.75s; -moz-transition: 0.75s; -o-transition: 0.75s; transition: 0.75s; } .slideOuter .slide li.p5 {height:318px;} .slideOuter .slide.current li {height:43px;} .slideOuter .slide.current li.current {height:318px;} .slideOuter .slide.current li.p5 {height:318px;} .slideOuter .slide li.p1 {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie19yrUpwm7EJRtKcggn28KNOwftwiEF4WlNIPtON9YS3euVfqeHVwdi13QrcwegdoYVkus-w7QMYiph749WgSm3PqzZ7cSyfLxbuLd_n_uHA2u_wat5DlOvpBeVp_tUL5x2RPUPpAHsY/s400/pic1.jpg);} .slideOuter .slide li.p2 {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibGeEa6L9JiN3IXaFKPB-8lwW7CrPlT9NNIGly2wA5zoWt9dg3U-uv1qSvPC_rKMHYVjcxCn78e7kNmoyxNppwsyGK4evMyeXW4q0TFVrbb0LI4xsFQrr6l6JfHh_wXyYpzdEzJm2PmIQ/s400/pic2.jpg);} .slideOuter .slide li.p3 {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXf0K6X3bJDfw0WOADmoa-xvdBd0u-pl2uh4wQlWZvS-fh_zpiQ9Oz8A8dp0n0jRh_PW1DVeEOGmFVRff0qlu30IaoVpU5UG16LA8x7UoPqDz58MYJcOTFx4xnouHiFvjRfotJgaq5Ylc/s400/pic3.jpg);} .slideOuter .slide li.p4 {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJKkXD7LKcqvRHXxQ9fSSG5dTpbT3QjIcLmGPIV18KVQDCkwkOGg5JPTuSoyCygSPdfCyM8e6SEDglN3C_CcN0vOaHrYXP2U6XSQdpZWc-DT-ReSgXo5F4OxO_jzs8xwQuoE1NFESYAaw/s400/pic4.jpg);} .slideOuter .slide li.p5 {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikFST8CvLBLyOViCy9SAhiWSWVI9FrVfEhT0frucCuqSIBhqstmeTeDsgo0f8hs1gagOQdNBTyCls4LhF5kbK1c-dOHXljfkFuvbsPb1xd3gn5QtxcboxrsO21sB9CpJdtTegFA4QqDFY/s400/pic5.jpg);} .slideOuter .slide:hover li.p1, .slideOuter .slide:hover li.p2, .slideOuter .slide:hover li.p3, .slideOuter .slide:hover li.p4 {height:43px;} .slideOuter .slide:hover li.p1:hover, .slideOuter .slide:hover li.p2:hover, .slideOuter .slide:hover li.p3:hover, .slideOuter .slide:hover li.p4:hover {height:318px;} .slideOuter .slide li h1 {padding:0 15px; margin:0; font-size:24px; line-height:43px; text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.6);} .slideOuter .slide li {color:#fff;} .slideOuter .slide li.p2 h1 {color:#c60;} .slideOuter .slide li.p3 h1 {color:#040;} .slideOuter .slide li.p4 h1 {color:#400;} .slideOuter .slide li.p5 h1 {color:#000;} .slideOuter .slide li p {font-weight:bold; padding:0 5px 20px 15px; margin:0; font-size:12px; line-height:17px; text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.6);} .slideOuter .slide li a {display:block; color:#fff; padding:0 15px; margin:0; font-size:14px; line-height:25px; width:230px; font-weight:bold; text-decoration:none;} .slideOuter .slide li a:hover {text-decoration:underline;} .clear {clear:left;}
Langkah 5
Setelah anda selesai memasukkan kode diatas. Sekarang memasukkan kode dibawah ini dengan cara menambahkan Gadget HTML/JavaScript.
<div id="infoa"> <div class="slideHolder"> <div class="slideOuter"> <ul class="slide current"> <li class="p1"> <div> <h1> Landscapes</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <a href="#url">Quisque tincidunt</a> <a href="#url">Donec tempor</a> <a href="#url">Sed placerat leo vel</a> <a href="#url">Curabitur ac bibendum</a> <a href="#url">Duis nec diam</a> <a href="#url">Sed quis massa</a> </div> </li> <li class="p2 current"> <div> <h1> Portraits</h1> <p> Vestibulum scelerisque quam a dui interdum semper.</p> <a href="#url">Quisque tincidunt</a> <a href="#url">Donec tempor</a> <a href="#url">Curabitur aliquet</a> <a href="#url">Curabitur</a> <a href="#url">Class aptent</a> <a href="#url">Vestibulum</a> </div> </li> <li class="p3"> <div> <h1> Flowers</h1> <p> Mauris pellentesque, ligula eget molestie suscipit.</p> <a href="#url">Nunc accumsan</a> <a href="#url">Sed varius</a> <a href="#url">Vestibulum</a> <a href="#url">Phasellus quis</a> <a href="#url">Maecenas</a> <a href="#url">Nullam ligula</a> </div> </li> <li class="p4"> <div> <h1> Abstracts</h1> <p> Cum sociis natoque penatibus et magnis dis parturient montes.</p> <a href="#url">Duis nec diam</a> <a href="#url">Ut sagittis</a> <a href="#url">Sed a lorem</a> <a href="#url">Mauris id mi</a> <a href="#url">Donec sit amet</a> <a href="#url">Aliquam placerat</a> </div> </li> <li class="p5"> <div> <h1> Seascapes</h1> <p> Aenean quis lacus id eros lobortis dapibus sed non nisi.</p> <a href="#url">Donec fringilla</a> <a href="#url">Quisque vel</a> <a href="#url">Duis at magna</a> <a href="#url">Maecenas rutrum</a> <a href="#url">Ut iaculis tristique</a> <a href="#url">Suspendisse</a> </div> </li> </ul> </div> </div> </div> <!-- end of infoa -->
Langkah 6
Simpan template anda dan lihat hasilnya. Sekian terima kasih trik kali ini.