Tips dan Trik: Cara membuat Menu Vertical with Descriptions :

Vertical menu ini mampu menghadirkan deskripsi menu dengan mempunyai lebar dan tinggi ruang deskripsi yang dapat di atur. Memungkinkan kamu untuk menyampaikan beberapa hal yang diharapkan membuat pengunjung blog penasaran sehingga tergelitik untuk mengetahui isi menu tersebut.

Letakkan KODE CSS di bawah ini di bagian head di atas ]]></b:skin>, kemudian CHTML di letakkan di bagian body atau kamu bisa menggunakan :Edit HTML --> Elemen Laman -->
Tambah Gadget --> Javascript/HTML
Letakkan Kode Css/script diantara <hsad> dan </hsad>
Kode CSS

ul#bgsGRverdescript {
margin : 5px;
list-style-type : none;
font-size : 90%;
}
ul#bgsGRverdescript li {
margin-bottom : 5px;
}
ul#bgsGRverdescript a {
opacity:0.7;
-moz-opacity:0.7;
filter:alpha(opacity=70);
position : relative;
text-align:center;
width : 145px;
height : 40px;
display : block;
padding : 5px;
padding-right : 0;
border : 2px solid #669900;
background : #ddd url(http://i50.tinypic.com/25g42gg.gif) repeat-x;
color: #FFFF66;
text-decoration : none;
font-weight : bold;
cursor : pointer;
}
ul#bgsGRverdescript a span {
z-index:1; border:8px solid #3399FF;
position : absolute;
top : -9000px;
left : -9000px;
display : block;
width : 300%;
height :100px;
background : #fafafa url(http://snook.ca/technical/jquery-bg/bg3.jpg);
border: 4px solid #663300;
border-left : 0;
padding : 5px;
padding-left : 23px;
text-indent : -17px;
cursor : pointer;
color: #000;
}
ul#bgsGRverdescript a:hover, ul#bgsGRverdescript a:focus,
ul#bgsGRverdescript a:active {
background : url(http://i49.tinypic.com/1079ef7.gif);
color: #CC0000;
opacity:1.0;
-moz-opacity:1.0;
filter:alpha(opacity=100);
}
ul#bgsGRverdescript a:hover span, ul#bgsGRverdescript a:focus span,
ul#bgsGRverdescript a:active span {
top : -1px; opacity:0.9;-moz-opacity:0.9;filter:alpha(opacity=90);
left :70px;
}
letakan Kode Berikut di antara tag <body> dan </body>

Contoh Htlm Untuk Menu

<li><a href="#">Pulau Bali

→ Sebuah pulau kecil yang sangat Indah. Tempat wisata budaya terbaik di Indonesia. Masyarakat Bali berbeda dengan pada umumnya masyarakat di Indonesia .....</a></li>

<li><a href="#">Pulau Papua

→ Sebuah daerah yang kaya raya dengan sumber kekayaan alam tiada batas tetapi sangat kontradiktif dengan kondisi sosial masyarakatnya .....</a></li>

<li><a href="#">Pulau Kalimantan

→ Dari ribuan pulau yang menjadi bagian Negara Republik Indonesia, inilah pulau terbesar yang hingga saat ini ......</a></li>

</ul>

Catatan:

Tanda # pada CHTML adalah URL Link Menu.

Pulau Bali, Papua dan Kalimantan merupakan nama Menu

Background, warna, jenis font dan ukuran tinggi serta lebar bisa kamu sesuaikan sendiri

Tips dan Trik

Cara membuat Menu Vertical with Descriptions :

Related Post:

Tidak ada komentar:

Posting Komentar

Labels