web design: Menu Vertikal Slider

Menu dengan Tampilan Vertikal Slider

Pada kali saya akan memberikan posting menu dengan tampilan vertikal slider. dalam menu ini kita dapat menampilkan menu kita dengan gambar seperti slider gambar. baiklah untuk lebih jelasnya kamu dapat melihat hasilnya atau dapat diunduh langsung.

Tag CSS nya

.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/AVvXsEgVTP5y9GbzzZeEYMlAb7IFp21jSmE84D0dm_xcozjAGgmBnPFLqG2dPqu2nNtLw86Ttr83xnKZFmB4KAfE5qBpB0oohO1WQkBHdO85U6wWWfI1zotoM7CNBq2fKC_Am4TLAo9vDnn-mKk/s400/pic1.jpg);}
.slideOuter .slide li.p2
{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIrc9Zdmrj64Nzk5TbD9Cr9N6oT6O8VYnAAIBUrjTz_tUfNkiDEozBoljTEO4QvRqiahH5TbMR0hfp4BTiaJ2sbCcpB_Y5H5bHAnNh8X3SiCuPwvm1nD13-wesRvFy3oQViyR_Hn2_57Q/s400/pic2.jpg);}
.slideOuter .slide li.p3
{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn46QGHLDfC2YZe9DewrN6JOPgtg8CXJz9zm_ksg4LnEKmaGlobm5Ub8xfk7V5WZ2cvL2Fcywf3lz1O_pa0qHI0v7SF_03ntCNVMlZZf3Y-KmhRszg6xCCeD7KA8iKiBSSjFzqHec7ddw/s400/pic3.jpg);}
.slideOuter .slide li.p4
{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmqWQD66bnV5Fsqj1cS6tCGi_WcmjuGidecezv_b13QZiZW9igIsxNPkZALNYbxB-_DH_UyYsHoBY1R5zGaeBG9v49gcMObQlnbDWzuW0xA3ywobPEKVPecyKKoR_hEadHaXgIgAzdiRk/s400/pic4.jpg);}
.slideOuter .slide li.p5
{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBS-Mw9oUkX2ko6CBhZa7E6FB0cl2X0_60KHA7KWRJganioibdln-6YE5RsX_nGUtS1ALQygwldiEvYA3hK5aB5bOpnsEqUDarGs5nuGU88NpMxuw6nZ07Aa8I67AYkTeFTjyke37KJtg/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;}
</style>

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

File nya dapat dilihat hasilnya dan dapat diunduh berikut ini :