Home » » Menu Sliding Vertikal Dengan CSS

Menu Sliding Vertikal Dengan CSS

Masih dalam pembahasan Cara Membuat Menu, sekarang 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/AVvXsEilp1fpgKvrfuzLmKgkD1ng_PczGZasmNmzxfpbNoRi_f5fSqXwBNRuK8UMPI23ckJO9D2uTEVpBLkCVAc_CdMTDavfsBRMpzcR2-V6KCQtJdZf2SEygc6hvYoYLtrQxEr8DQMYIs8Mj-8/s400/pic1.jpg);}
.slideOuter .slide li.p2
{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJyybTZFJRdjPT3H6Rp-6caaB6oGRa1pbEJP4JD9_1Q4wzTDzuYbWoBFZsyg0F-yhiegVJfnKpmRAuDIABDUwKO0_BlPIWz-NrKYTlRlnLYLZ0nCSlWyDmHZTSYYFvV95nWa627W2hoZ8/s400/pic2.jpg);}
.slideOuter .slide li.p3
{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9CnObP-LthosO-bhi8ZBC-M8NsxuaW5W7-PAKWRWfBv3-EHuLWIWb-PMTqVeLguVQeDCU9Ce3RK5uJFmcIULBQvzm3LRtsCS6HbZsihqlO1cuYFcGdwHyUODqyr4KazxFmv9xYHLkM1o/s400/pic3.jpg);}
.slideOuter .slide li.p4
{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlxtHPxXnAI16iYI5ruGyec26z1Ceppgs6ba-xxr9odKc4RgUcFzz7l9fpCFI5jVWTfUScyEU0muk6zoX9opAE38WrN29MfD8B1-J8yZn13gd6W5J5d4sbpBUynUOxcFNHvFRKIWHmooE/s400/pic4.jpg);}
.slideOuter .slide li.p5
{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-4qsJnd9Ejy84fkNMUeTmHMN04fccV3Gou766CpHFsi0fVWjY9QDB5i9Z5KpODGJt07TWrG2prNJE96MSyguqwUqMsAvjvsujVht4QSOZu7d3hgYkO7wAG-7ekjPRhXxADlDaUIEBflg/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.
Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Lora Malunk Blog
tutorial blog up to date
Loading...

Posting Komentar

Kebijakan berkomentar akan dihapus, jika tidak sesuai dengan aturan dibawah ini, Demi kenyamanan kita bersama :

» Menggunakan bahasa yang tidak sopan (Sara, Pornografi, Menyinggung)
» Duplikat komentar
» Komentar menautkan link secara langsung
» Komentar tidak berkaitan dengan artikel
» Judul Komentar Berupa Promosi

Terima Kasih .... Lora Malunk Blog

 

Configurasi

Alexa :
Stats :
Page Rank : Free PageRank Checker
DMCA :
Amung :
Bloggers : Bloggers - Meet Millions of Bloggers
Extreme :
eXTReMe Tracker
Support : Lora Malunk Blog | Songong Template | Tutorial Blog
Copyright © 2011. Lora Malunk Blog - All Rights Reserved
Template Modify by Lora Malunk Blog
Proudly powered by Blogger