Cara Membuat Menu Sliding Vertikal Dengan CSS ~ Ada Nggak

Menu sliding vertical sangat cocok buat left sidebar, tapi jika ingin membuatnya di right sidebar juga sama bagusnya. Menu ini bekerja dengan cara menyembunyikan beberapa sub menu dan saat yang sama menunjukkan satu menu dan sub menu yang sedang aktif. Karena itu menu ini menghemat tempat di sidebar anda. Jika kursor berada tepat di menu sesudahnya maka sum menu secara otomatis akan terbuka dan kita bisa melihat apa isi sub menu yang sedang kita perhatikan itu.

Menu sliding vertical ini dilengkapi dengan background foto untuk mempercantik menu tampilan blog. Tetapi jika anda ingin menggantinya atau menghilangkan background ini sama sekali, tidak cukup sulit. Menu ini bekerja di browser utama seperti: E7, IE8, IE9, Fireox, Opera, Safari, Chrome, Flock dan juga SeaMonkey

Inilah Menu yang sedang kita bicarakan:

Landscapes

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Quisque tincidunt
Donec tempor

Sed placerat leo vel
Curabitur ac bibendum
Duis nec diam
Sed quis massa

Portraits

Vestibulum scelerisque quam a dui interdum semper.

Quisque tincidunt
Donec tempor
Curabitur aliquet
Curabitur

Class aptent
Vestibulum

Flowers

Mauris pellentesque, ligula eget molestie suscipit.

Nunc accumsan
Sed varius
Vestibulum
Phasellus quis
Maecenas
Nullam ligula

Abstracts

Cum sociis natoque penatibus et magnis dis parturient montes.

Duis nec diam
Ut sagittis

Sed a lorem
Mauris id mi
Donec sit amet
Aliquam placerat

Seascapes

Aenean quis lacus id eros lobortis dapibus sed non nisi.

Donec fringilla
Quisque vel
Duis at magna
Maecenas rutrum

Ut iaculis tristique
Suspendisse

Jika ingin menampilkannya ke dalam blog, berikut adalah langkah-langkahnya.

Cara Membuat Menu Drop Ke Dalam Blog

PertamaKopi paste kode CSS kedalam template anda. Jadi anda harus lebih dulu login ke blogger, lalu >>> klik elemen halaman >>> Lalu klik Edit HTML. Tapi untuk lebih aman, save dulu template anda.

KeduaKopi paste kode di bawah ini kedalam kelompok CSS yang ada di template anda. Tempatkan sebelum tag /skin. Inilah kodenya:

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(http://2.bp.blogspot.com/-miHkTIgetDk/TdcNnSyvXfI/AAAAAAAAA-o/el20vcENJLE/s400/pic1.jpg);}

.slideOuter .slide li.p2

{background:url(http://1.bp.blogspot.com/-B-pzDrGyreM/TdcNnq2BH3I/AAAAAAAAA-w/t5MHC2dUgtA/s400/pic2.jpg);}

.slideOuter .slide li.p3

{background:url(http://4.bp.blogspot.com/-1o0D6F-BHrc/TdcNnsd4QmI/AAAAAAAAA-4/VFuT5z9Xv5A/s400/pic3.jpg);}

.slideOuter .slide li.p4

{background:url(http://2.bp.blogspot.com/-SDzvI-nnYww/TdcNnxKhZmI/AAAAAAAAA_A/j-KAYg_hM1U/s400/pic4.jpg);}

.slideOuter .slide li.p5

{background:url(http://2.bp.blogspot.com/-dT8FS43YKOw/TdcNn_qpzcI/AAAAAAAAA_I/dKupQ-yi9pc/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;}

Kemudian klik preview. Jika tidak ada pesan eror terpampang, maka segera save template anda.

Ketiga Kopi paste kode di bawah ini ke dalam sidebar. Caranya.. Klik Elemen Halaman >>> Add Widget dan segera paste kode ini:

<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>

Kini save html anda dan lihat hasilnya. Jika masih ada yang perlu di rubah mungkin hanyalah ukuran lebar, background, dan link. Jadi ganti semua sesuai kebutuhan anda, saya yakin tidak cukup sulit untuk anda.

Selamat mencoba...

Post title : Cara Membuat Menu Sliding Vertikal Dengan CSS
URL post : https://adanggak.blogspot.com/2011/09/cara-membuat-menu-sliding-vertikal.html