Cara membuat menu ini sama sekali tidak menggunakan kode javascript, tapi asli merekayasa CSS dan html. Jadi tidak perlu khawatir jika menu ini akan berat untuk dijalankan. Anda boleh coba sendiri betapa ringan aplikasi ini untuk diloading.
Menu yang sedang kita bicarakan adalah seperti menu berikut ini:
Sliding Tab Menu Vertical Drop Down
Paul Cézanne
(1839-1906)
The French painter who exhibited little in his lifetime and pursued
his interests increasingly in artistic isolation, is regarded today
as one of the great forerunners of modern painting.
Henri Matisse
(1869-1954)
Initially planned a career as a lawyer. However, he began to paint
after an acute attack of appendicitis and then proceeded to become
a leader in many art circles.
William Turner
(1775-1851)
This English painter was one of the greatest romantic interpreters
of nature in the history of Western art and is still unrivaled in
the virtuosity of his painting of light.
John Constable
(1776-1837)
Tried to capture informally the effects of changing light and the
patterns of clouds moving across the country sky. He loved the
countryside, and his best work was of outdoor scenes in his native
Suffolk.
Claude Monet
(1840-1926)
Monet's concern was to reflect the influence of light on a subject.
He never abandoned his Impressionist painting style until his death
in 1926 when Fauvism and Cubism were en vogue and when abstract
painting came into existence.
Jika tertarik dan ingin membuat menu sliding drop down ini ke blog, caranya sangat mudah.
Pertama Login ke blogger lalu klik >> Layout >> Edit HTML. Untuk lebih aman, save dulu template anda. Kemudian kopy paste kode di bawah ini kedalam kelompok CSS, yaitu kode yang berada sebelum tag /skin.
<div class="curved">
<b class="b1 c1"></b>
<b class="b2 c2"></b>
<b class="b3 c3"></b>
<b class="b4 c4"></b>
<div class="boxcontent">
<ul id="menu">
<li>
<a class="m5 five" href="#nogo">
<b class="h2">Paul Cézanne</b><br />
<b class="h3">(1839-1906)</b>
<span>
<img src="http://4.bp.blogspot.com/-UufFm4tw43Y/TdZ-L0mMbeI/ "AAAAAAAAA9Q/hPzvDnfVR-U/s400/ cezanne.jpg
alt="painting" title="painting" />
The French painter who exhibited little in his lifetime and pursued
his interests increasingly in artistic isolation, is regarded today
as one of the great forerunners of modern painting.
</span>
</a>
</li>
<li>
<a href="#nogo">
<b class="b1"></b>
<b class="b2"></b>
<b class="b3"></b>
<b class="b4"></b>
<b class="h2">Henri Matisse</b><br />
<b class="h3">(1869-1954)</b>
<span>
<img src="http://3.bp.blogspot.com/-q3huVXE-PiE/TdZ-MYZ5E2I/ "AAAAAAAAA9g/IUnV3qHSC7I/s400/ matisse.jpg
alt="painting" title="painting" />
Initially planned a career as a lawyer. However, he began to paint
after an acute attack of appendicitis and then proceeded to become
a leader in many art circles.
</span>
</a>
</li>
<li>
<a href="#nogo">
<b class="b1"></b>
<b class="b2"></b>
<b class="b3"></b>
<b class="b4"></b>
<b class="h2">William Turner</b><br />
<b class="h3">(1775-1851)</b>
<span>
<img src="http://2.bp.blogspot.com/-6-Sd8fkBvpQ/TdZ-MlpbzvI/ "AAAAAAAAA9w/Q2Ji8_Sxj0g/s400/ turner.jpg
alt="painting" title="painting" />
This English painter was one of the greatest romantic interpreters
of nature in the history of Western art and is still unrivaled in
the virtuosity of his painting of light.
</span>
</a>
</li>
<li>
<a href="#nogo">
<b class="b1"></b>
<b class="b2"></b>
<b class="b3"></b>
<b class="b4"></b>
<b class="h2">John Constable</b><br />
<b class="h3">(1776-1837)</b>
<span>
<img src="http://1.bp.blogspot.com/-unuxItIQW3I/TdZ-MJv0XQI/ "AAAAAAAAA9Y/DqCsQHnUCqM/s400/ constable.jpg
alt="painting" title="painting" />
Tried to capture informally the effects of changing light and the
patterns of clouds moving across the country sky. He loved the
countryside, and his best work was of outdoor scenes in his native
Suffolk.
</span>
</a>
</li>
<li>
<a class="one" href="#nogo">
<b class="b1"></b>
<b class="b2"></b>
<b class="b3"></b>
<b class="b4"></b>
<b class="h2">Claude Monet</b><br />
<b class="h3">(1840-1926)</b>
<span>
<img src="http://2.bp.blogspot.com/-cFv0VGmJbPs/TdZ-MlF31ZI/ "AAAAAAAAA9o/U278-wenwuQ/s400/ monet.jpg
alt="painting" title="painting" />
Monet's concern was to reflect the influence of light on a subject.
He never abandoned his Impressionist painting style until his death
in 1926 when Fauvism and Cubism were en vogue and when abstract
painting came into existence.
</span>
</a>
</li>
</ul>
</div>
<b class="b4 c4"></b>
<b class="b3 c3"></b>
<b class="b2 c2"></b>
<b class="b1 c1"></b>
</div>
</div> <!-- end of info -->
Kemudian klik preview. Jika tidak ada pesan error yang muncul segera save template anda.
Langkah berikutnya adalah membuat html menu ke sidebar, atau ke posisi mana yang diinginkan. Caranya, klik Elemen Halaman >> Lalu klik Add Widget HTML/Javascript. Lalu Paste Kode di bawah ini:
#kompeni {font-family:font-family:"trebuchet ms", trebuchet, arial,
sans-serif; font-size:1em; height:450px;}
#menu {
margin:0;
padding:0;
height:32.5em;
overflow:hidden;
background:#f0f0f0;
}
#menu li {
list-style-type:none;
float:left;
display:block;
width:100%;
}
#menu li a {
display:block;
text-decoration:none;
color:#00b;
margin:0;
width:100%;
}
#menu li a span {
display:none;
color:#000;
font-family:verdana, arial, sans-serif;
line-height:1.3em;
}
#menu li a.one span {
display:block;
height:15em;
margin:0 10px;
}
#menu li a:hover {
background:#f1f1f1;
}
#menu li a:hover span {
display:block;
height:15em;
margin:0 10px;
cursor:pointer;
}
#menu .h2 {
margin:0 5px;
padding:0;
color:#808;
font-variant:small-caps;
font-size:1.5em;
border:0;
}
#menu .h3 {
margin:0 5px;
padding:0;
font-size:1.1em;
color:#00b;
}
#menu img {
margin:5px 5px 5px 0;
border:1px solid #000;
float:left;
}
.curved {
width:21em;
margin:0 auto;
}
.curved .b1, .curved .b2, .curved .b3, .curved .b4 {
font-size:1px;
display:block;
background:#88c;
/* hide overflow:hidden from IE5/Mac */
/* \*/
overflow: hidden;
/* */
}
.curved .b1, .curved .b2, .curved .b3 {
height:1px;
}
.curved .b2, .curved .b3, .curved .b4 {
background:#f0f0f0;
border-left:1px solid #88c;
border-right:1px solid #88c;
}
.curved .b1 {
margin:0 4px;
background:#88c;
}
.curved .b2 {
margin:0 2px;
border-width:0 2px;
}
.curved .b3 {
margin:0 1px;
}
.curved .b4 {
height:2px;
margin:0;
}
.curved .c1 {
margin:0 5px;
background:#88c;
}
.curved .c2 {
margin:0 3px;
border-width:0 2px;
}
.curved .c3 {
margin:0 2px;
}
.curved .c4 {
height:2px;
margin: 0 1px;
}
.curved .boxcontent {
display:block;
background:transparent;
border-left:1px solid #88c;
border-right:1px solid #88c;
font-size:0.9em;
text-align:justify;
}
Kemudian save html anda. Lalu lihat hasilnya. Yang perlu di rubah kemudian hanyalah thumbnail photo dan link. Ganti segera foto dan link dengan milik anda sendiri, dan tentu saja, ganti semua kalimat di atas dengan kalimat anda sendiri..
Semoga berhasil..
Post title : Cara Membuat Sliding Tab Menu Vertical
URL post : https://adanggak.blogspot.com/2011/05/cara-membuat-sliding-tab-menu-vertical.html
URL post : https://adanggak.blogspot.com/2011/05/cara-membuat-sliding-tab-menu-vertical.html
0 komentar:
Show Emoticons
Posting Komentar