Membuat Sliding Vertical Tab Menu With CSS3

Vertical Sliding Tab Menu Use CSS3, Maksud judul saya adalah, membuat Menu dengan menggunakan CSS3, tidak menggunakan JavaScript, jadi tidak membuat blog anda menjadi berat. silahkan lihat contohnya dibawah ini !!

Pertama login ke akun blogger.com
Tata Letak, setelah itu pilih Tambah Gadget , HTML/JavaScript,
Masukin kode dibawah ini tepat di kolom HTLM/JavaScript

<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
.Vertical {
font-family: Helvetica, Arial, sans-serif;
line-height: 1.5;
margin:1px auto; /*for display only*/
-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}
.menu-item {
background: #fff;
width: 300px;
}
/*Menu Header Styles 1*/
.menu-item h4 {
color: #fff;
font-size: 15px;
font-weight: 500;
padding: 7px 12px;
background: ##0000ff;
}
.menu-item h4 a {
color: white;
display: block;
text-decoration: none;
width: 300px;
}
/*Menu Header Styles 2*/
.menu-item h4 {
border-bottom: 1px solid rgba(0,0,0,0.3);
border-top: 1px solid rgba(255,255,255,0.2);
color: #fff;
font-size: 15px;
font-weight: 500;
padding: 7px 12px;
background: #a90329; /* Old browsers */
background: -moz-linear-gradient(top, #a90329 0%, #8f0222 44%, #00ff00 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a90329), color-stop(44%,#8f0222), color-stop(100%,#00ff00)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #a90329 0%,#8f0222 44%,#00ff00 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #a90329 0%,#8f0222 44%,#00ff00 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #a90329 0%,#8f0222 44%,#00ff00 100%); /* IE10+ */
background: linear-gradient(top, #a90329 0%,#8f0222 44%,#00ff00 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#00ff00',GradientType=0 ); /* IE6-9 */
}
.menu-item h4:hover {
background: #0000ff; /* Old browsers */
background: -moz-linear-gradient(top, #0000ff 0%, #00ff00 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0000ff), color-stop(100%,#00ff00)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #0000ff 0%,#00ff00 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #0000ff 0%,#00ff00 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #0000ff 0%,#00ff00 100%); /* IE10+ */
background: linear-gradient(top, #0000ff 0%,#00ff00 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0000ff', endColorstr='#00ff00',GradientType=0 ); /* IE6-9 */
}
.alpha p {
font-size: 13px;
padding: 8px 12px;
color: #aaa;
}
/*ul Styles*/
.menu-item ul {
background: #fff;
font-size: 13px;
line-height: 30px;
list-style-type: none;
overflow: hidden;
padding: 0px;
}
.menu-item ul a {
margin-left: 20px;
text-decoration: none;
color: #0A0A0A;
display: block;
width: 250px;
}
/*li Styles*/
.menu-item li {
border-bottom: 1px solid #eee;
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlAerKFzti_uQ6Os65dHVRwtaXqiLmThBpZYVFltok1gqVn__LcQJbeVeeyimkiXRrB02euIkGLcPCK397-Ca7dVVbEWDFC5-7KZi_oXG9CKbrdvN5t_SB4lpToCfhiKoaZt8d2Qt66CY/s1600/libg300.png) no-repeat scroll left -1px;
line-height:1.5em;
margin:0;
padding:0 0 0.25em 15px;
text-decoration: none !important;
}
.menu-item li:hover {
background: #eee;
}
/*ul Styles*/
.menu-item ul {
background: #B2D8E0;
font-size: 13px;
line-height: 30px;
height: 0px; /*Collapses the menu*/
list-style-type: none;
overflow: hidden;
padding: 0px;
}
/*ul Styles*/
.menu-item ul {
background: #fff;
font-size: 13px;
line-height: 30px;
height: 0px;
list-style-type: none;
overflow: hidden;
padding: 0px;
/*Animation*/
-webkit-transition: height 1s ease;
-moz-transition: height 1s ease;
-o-transition: height 1s ease;
-ms-transition: height 1s ease;
transition: height 1s ease;
}
.menu-item:hover ul {
height: 115px;
}
</style>
<div class="Vertical">
<div class="menu-item">
<h4>
<a href="">Menu Navigation 1</a></h4>
<ul>
<li><a href="http://www.blogger.com/URL-HERE" target="_blank">Ganti Sesuai SELERA</a></li>
<li><a href="http://www.blogger.com/URL-HERE" target="_blank">Ganti Sesuai SELERA</a></li>
<li><a href="http://www.blogger.com/URL-HERE" target="_blank">Ganti Sesuai SELERA</a></li>
<li><a href="http://www.blogger.com/URL-HERE" target="_blank">Ganti Sesuai SELERA</a></li>
<li><a href="http://www.blogger.com/URL-HERE" target="_blank">Ganti Sesuai SELERA</a></li>
</ul>
</div>
<div class="menu-item">
<h4>
<a href="">Menu Navigation 2</a></h4>
<ul>
<li><a href="http://www.blogger.com/URL-HERE" target="_blank">Ganti Sesuai SELERA</a></li>
<li><a href="http://www.blogger.com/URL-HERE" target="_blank">Ganti Sesuai SELERA</a></li>
<li><a href="http://www.blogger.com/URL-HERE" target="_blank">Ganti Sesuai SELERA</a></li>
<li><a href="http://www.blogger.com/URL-HERE" target="_blank">Ganti Sesuai SELERA</a></li>
<li><a href="http://www.blogger.com/URL-HERE" target="_blank">Ganti Sesuai SELERA</a></li>
</ul>
</div>
<div class="menu-item">
<h4>
<a href="">Menu Navigation 3</a></h4>
<ul>
<li><a href="http://www.blogger.com/URL-HERE" target="_blank">Ganti Sesuai SELERA</a></li>
<li><a href="http://www.blogger.com/URL-HERE" target="_blank">Ganti Sesuai SELERA</a></li>
<li><a href="http://www.blogger.com/URL-HERE" target="_blank">Ganti Sesuai SELERA</a></li>
<li><a href="http://www.blogger.com/URL-HERE" target="_blank">Ganti Sesuai SELERA</a></li>
<li><a href="http://www.blogger.com/URL-HERE" target="_blank">Ganti Sesuai SELERA</a></li>
</ul>
</div>
<div class="menu-item">
<h4>
<a href="">Menu Navigation 4</a></h4>
<ul>
<li><a href="http://www.blogger.com/URL-HERE" target="_blank">Ganti Sesuai SELERA</a></li>
<li><a href="http://www.blogger.com/URL-HERE" target="_blank">Ganti Sesuai SELERA</a></li>
<li><a href="http://www.blogger.com/URL-HERE" target="_blank">Ganti Sesuai SELERA</a></li>
<li><a href="http://www.blogger.com/URL-HERE" target="_blank">Ganti Sesuai SELERA</a></li>
<li><a href="http://www.blogger.com/URL-HERE" target="_blank">Ganti Sesuai SELERA</a></li>
</ul>
</div>
<div class="menu-item">
<h4>
<a href="">Menu Navigation 5</a></h4>
<ul>
<li><a href="http://www.blogger.com/URL-HERE" target="_blank">Ganti Sesuai SELERA</a></li>
<li><a href="http://www.blogger.com/URL-HERE" target="_blank">Ganti Sesuai SELERA</a></li>
<li><a href="http://www.blogger.com/URL-HERE" target="_blank">Ganti Sesuai SELERA</a></li>
<li><a href="http://www.blogger.com/URL-HERE" target="_blank">Ganti Sesuai SELERA</a></li>
<li><a href="http://www.blogger.com/URL-HERE" target="_blank">Ganti Sesuai SELERA</a></li>
</ul>
</div>
</div>
<div class="clear">
</div>

Save kode !

Apabila anda ingin mengcopy paste artikel saya, jangan lupa untuk memberikan link sumbernya !!

Terima Kasih ^_^

Tidak ada komentar untuk " Membuat Sliding Vertical Tab Menu With CSS3 "

Prohibited from using harsh words and the words of the SARA, the words that indicate the Flame against someone that I would quarrel delete and block from this blogspot!!
--------------------------------------------
Dilarang menggunakan kata-kata kasar dan kata-kata yang mengandung SARA, kata-kata yang mengindikasikan Flame terhadap seseorang sehingga terjadi pertengkaran akan saya hapus dan blok dari blogspot ini !!

Tricky & Tipsy Friend

Membuat Sliding Vertical Tab Menu With CSS3

Menu Navigation 1

Menu Navigation 2

Menu Navigation 3

Menu Navigation 4

Menu Navigation 5

Tidak ada komentar untuk " Membuat Sliding Vertical Tab Menu With CSS3 "

2014 Tricky Tipsy Friend | Live Stream | Tukar Link | Live Score Top Comment | Partner Us | Template by de5ain Custom by 404Website