Masih dalam pembahasan Cara Membuat Menu, sekarang Menu Sliding Vertikal Dengan CSS. Langsung saja masuk ke pembahasan :
- Masuk ke akun Blogger anda.
- Masuk Ke Menu Rancangan atau Design.
- Masuk ke EDIT HTML.
- 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/AVvXsEhiFVILDpxH4ZCTIc1iPC0jm_v2f5ttQK6YUQIroZ-RahqyR7adpn6NSVI_FueW0B-WXP8fP21Xv0Gh5caO4xSXlb6o_KexUUq0bQi3CaLb_lrbZGkjeXPxH_zn5f35BzwHh3xiR_jOPzI/s400/pic1.jpg);}
.slideOuter .slide li.p2
{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiSWysI8KL8FG48acbCjKQGAMBJIkonzhcAT1RlCqwusiAM_RymnAIQhfmYQpN8jaqdma6kPco0XJHY6AUukxXgB-AaP_sU990PScQ3WQqfHK-543d4T4PttDD1OwGulveYPZGPUthQjA/s400/pic2.jpg);}
.slideOuter .slide li.p3
{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGGuhL6uAvfTw8YhMR-nDGLcjy4kXIYD8h_MceLPD2V1pIL_bl4bLYPxNyDeSK25vl_LNNUnyMcOF8asWivCp3CBFypPuYQYa4GXA-iL3eEIHOOCe9_-fMSfp7TWGtYaP7QRB50iD6m88/s400/pic3.jpg);}
.slideOuter .slide li.p4
{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwhEhpYNe-S7mRxj0K_moO0keNzCg1ZJen3Ue9lEIilJlCl0o940lXs2ZbAQOqzbjEJaRpkDvAXyAaRbw09LEhfTvZRC6_D6C3npv7Le03-aexCtvhmPg1353XqosQc0sEwzJPCpfaFos/s400/pic4.jpg);}
.slideOuter .slide li.p5
{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKBWIsFMeOIbCYyqDVBB65TgR_LMGLwBhgi-d3HzfjDVINzz3mmCQKAd3NW5ENsjhqLmfKCJdbATEa6DWyAhouYVVviHPnxz2h_qlISaUredcbbR3r2oXE3pKGDEDwbqEQNqoaYwI71b4/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;}
- 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 -->
- Simpan template anda dan lihat hasilnya.
Sekian terima kasih trik kali ini.
Sumber : http://lora-malunk.blogspot.com/2012/05/menu-sliding-vertikal-dengan-css.html
Author : coxelgokil | ACI BUDAYA
Anda telah membaca
artikel tentang : Cara Membuat Menu Sliding Vertikal Dengan CSS Bag. 1. Oleh Admin, Anda diperbolehkan mengcopy-paste atau menyebarluaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya. Terimakasih...
