Search here

Type a word related to the post, then click the search button !

Memuat...
English
Bru masuk angin!

Arsip...

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!
Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

Cara Membuat CSS Drop Down Menu

Untuk membuat CSS Drop Down Menu, silahkan sampeyan baca dulu posting tentang "Cara Membuat Horizontal Tabs Menu, karena cara pembuatannya sama persis. KLIK link di bawah ini untuk melihat langkah yang diperlukan :

Kode CSS dan Kode HTML CSS Drop Down Menu

<style type="text/css">
.bgsGR_NavHor-1{ 
background: url(http://i1107.photobucket.com/albums/h397/GRbaru/Horizontal_Menu/bgBlackGrayGradTopV51H1.gif) bottom repeat-x;
position:absolute;
left:34px;
height:42px;
font-size:.9em;z-index:200;
border-right:8px solid #000;border-left:8px solid #000;
border-top-left-radius:8px;border-top-right-radius:8px;
-moz-border-radius-topleft:8px;-moz-border-radius-topright:8px;
-webkit-border-top-left-radius:8px;-webkit-border-top-right-radius:8px;
-goog-ms-border-top-left-radius:8px;-goog-ms-border-top-right-radius:8px;
}
.bgsGR_NavHor-1 a{
font-family:Arial Narrow;
font-weight:700;
color:#fff;
text-decoration:none;
}
.bgsGR_NavHor-1 ul{
padding:0px;
margin:0px;
list-style:none;
}
.bgsGR_NavHor-1 li{
float:left;
position:relative;
padding:11px 10px 12px;
text-align:center;
background-image:url(http://i1107.photobucket.com/albums/h397/GRbaru/Horizontal_Menu/bgGradRedBlackV41H8.gif);
background-repeat:no-repeat;
background-position:top right;
}
.bgsGR_NavHor-1 li a:hover{ 
color:red;
}
.bgsGR_NavHor-1 li.last{
background-image:none;
border-bottom:2px solid red;
}
.bgsGR_NavHor-1 li ul{
display:none;
position:absolute;
top:37px;
left:0px;
padding:0 0 2px 0;
background-color:#333;
}
.bgsGR_NavHor-1 li:hover,.bgsGR_NavHor-1 li.over{
border-top:2px solid red;
background-image:url(http://i1107.photobucket.com/albums/h397/GRbaru/Horizontal_Menu/bgVertBlueGradV40H30.png);
background-repeat:repeat-x;
}
.bgsGR_NavHor-1 li li:hover,.bgsGR_NavHor-1 li li.over{
background-image:none;
}
.bgsGR_NavHor-1 li.tab_active{
background:url(http://i1107.photobucket.com/albums/h397/GRbaru/Horizontal_Menu/bgGradRedBlackV41H8.gif) top repeat-x;
background-position:0 -10px;
font-weight:bold;
}
.bgsGR_NavHor-1 li.tab_active ul{
font-weight:normal;
}
.bgsGR_NavHor-1 li:hover ul,.bgsGR_NavHor-1 li.over ul{
display:block;
}
.bgsGR_NavHor-1 li.tab_active:hover ul,.bgsGR_NavHor-1 li.tab_active:hover ul{
background-color:#1E71C4;
}
.bgsGR_NavHor-1 li ul li,.bgsGR_NavHor-1 li ul li:hover{
width:180px;
padding:0;
background-image:url(http://i1107.photobucket.com/albums/h397/GRbaru/Horizontal_Menu/bgRasterV42H16.jpg);
background-repeat:repeat-x;
background-position:bottom left;
margin:0px;text-align:left;
}
.bgsGR_NavHor-1 li.tab_active ul li,.bgsGR_NavHor-1 li.tab_active ul li:hover{
background-image:url(http://i1107.photobucket.com/albums/h397/GRbaru/Horizontal_Menu/bgBlackRedOldH11V34.gif);
}
.bgsGR_NavHor-1 li ul li.last{
background-image:none;
}
.bgsGR_NavHor-1 li.tab_active ul li.last{
background-image:none;
}
.bgsGR_NavHor-1 li ul li div a{
display:block;
padding:6px 12px 8px 12px;
}
.bgsGR_NavHor-1 li.tab_active ul li div a{}.bgsGR_NavHor-1 li ul li div a:hover{
background-color:#2A2A2A;
}
.bgsGR_NavHor-1 li.tab_active ul li div a:hover{
background-color:#468FD7;
}
</style>


<div class="bgsGR_NavHor-1" style="top:-30px;left:10px;margin:0px 10px 20px 0px;">
<ul>
<li class="tab_active"><div><a href="Link-1">Nama Link-1</a></div>
<ul>
<li><div><a href="Link-1a">Nama Link-1a</a></div></li>
<li><div><a href="Link-1b">Nama Link-1b</a></div></li>
<li><div><a href="Link-1c">Nama Link-1c</a></div></li>
</ul> 
</li>
<li class="last"><div><a href="Link-2">Nama Link-2</a></div>
<ul>
<li><div><a href="Link-2a">Nama Link-2a</a></div></li>
<li><div><a href="Link-2b">Nama Link-2b</a></div></li>
<li><div><a href="Link-2c">Nama Link-2c</a></div></li>
<li><div><a href="Link-2d">Nama Link-2d</a></div></li>
<li><div><a href="Link-2e">Nama Link-2e</a></div></li>
<li><div><a href="Link-2f">Nama Link-2f</a></div></li>
</ul>
</li>

<li><div><a href="Link-3">Nama Link-3</a></div>
<ul>
<li><div><a href="Link-3a">Nama Link-3a</a></div></li>
<li><div><a href="Link-3b">Nama Link-3b</a></div></li>
<li><div><a href="Link-3c">Nama Link-3c</a></div></li>
<li><div><a href="Link-3d">Nama Link-3d</a></div></li>
</ul>
</li>

<li><div><a href="Link-4">Nama Link-4</a></div>
<ul>
<li><div><a href="Link-4a">Nama Link-4a</a></div></li>
<li><div><a href="Link-4b">Nama Link-4b</a></div></li>
<li><div><a href="Link-4c">Nama Link-4c</a></div></li>
</ul>
</li>

<li><div><a href="Link-5">Nama Link-5</a></div>
<ul>
<li><div><a href="Link-5a">Nama Link-5a</a></div></li>
<li><div><a href="Link-5b">Nama Link-5b</a></div></li>
<li><div><a href="Link-5c">Nama Link-5c</a></div></li>
<li><div><a href="Link-5d">Nama Link-5d</a></div></li>
<li><div><a href="Link-5e">Nama Link-5e</a></div></li>
</ul>
</li>

<li><div><a href="Link-6">Nama Link-6</a></div>
<ul>
<li><div><a href="Link-6a">Nama Link-6a</a></div></li>
<li><div><a href="Link-6b">Nama Link-6b</a></div></li>
<li><div><a href="Link-6c">Nama Link-6c</a></div></li>
<li><div><a href="Link-6d">Nama Link-6d</a></div></li>
<li><div><a href="Link-6e">Nama Link-6e</a></div></li>
<li><div><a href="Link-6f">Nama Link-6f</a></div></li>
<li><div><a href="Link-6g">Nama Link-6g</a></div></li>
<li><div><a href="Link-6h">Nama Link-6h</a></div></li>
<li><div><a href="Link-6i">Nama Link-6i</a></div></li>  
</ul>
</li>

<li><div><a href="Link-7">Nama Link-7</a></div>
<ul>
<li><div><a href="Link-7a">Nama Link-7a</a></div></li>
<li><div><a href="Link-7b">Nama Link-7b</a></div></li>
<li><div><a href="Link-7c">Nama Link-7c</a></div></li>
<li><div><a href="Link-7d">Nama Link-7d</a></div></li>
<li><div><a href="Link-7e">Nama Link-7e</a></div></li>
<li><div><a href="Link-7f">Nama Link-7f</a></div></li>
<li><div><a href="Link-7g">Nama Link-7g</a></div></li>
<li><div><a href="Link-7h">Nama Link-7h</a></div></li>
<li><div><a href="Link-7i">Nama Link-7i</a></div></li>
<li><div><a href="Link-7j">Nama Link-7j</a></div></li>
<li><div><a href="Link-7k">Nama Link-7k</a></div></li>
<li><div><a href="Link-7l">Nama Link-7l</a></div></li>
<li><div><a href="Link-7m">Nama Link-7m</a></div></li>
<li><div><a href="Link-7n">Nama Link-7n</a></div></li>  
</ul>
</li>

<li><div><a href="Link-8">Nama Link-8</a></div>
<ul>
<li><div><a href="Link-8a">Nama Link-8a</a></div></li>
<li><div><a href="Link-8b">Nama Link-8b</a></div></li>
<li><div><a href="Link-8c">Nama Link-8c</a></div></li>
<li><div><a href="Link-8d">Nama Link-8d</a></div></li>
<li><div><a href="Link-8e">Nama Link-8e</a></div></li>
<li><div><a href="Link-8f">Nama Link-8f</a></div></li>
<li><div><a href="Link-8g">Nama Link-8g</a></div></li>
<li><div><a href="Link-8h">Nama Link-8h</a></div></li>
<li><div><a href="Link-8i">Nama Link-8i</a></div></li>  
</ul>
</li>

</ul>
</div>
Atur margin pada kode :

<div class="bgsGR_NavHor-1" style="top:-30px;left:10px;margin: -0px 10px 20px 0px;">

- top:-30px; digunakan untuk mengator jarak dari ujung atas blog (navbar). Nilai bisa diperbesar atau diperkecil, dimana minus semakin besar maka akan semakin naik.
- left:10px; merupakan jarak dari sebelah kiri.
- pengaturan lanjutan dilakukan melalui margin:0px 10px 20px 0px; dimana 0 = jarak atas, 10px = dari kanan, 20px = dari bawah dan 0px = dari kiri.
Untuk pemasangan di bawah header blog juga dilakukan dengan mengatur variabel di atas. Untuk jumlah menu silahkan di atur hingga tidak lebih lebar dari halaman blog.

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :


» Happy Blogging - gubhugreyot «

5 komentar:

  1. wah keren banget blognya nih,,masa pasang banner dan link saya disini donk,,dan tentunya saling follow juga ya bang,,,
    http://pariwisatadanteknologi.blogspot.com/

    BalasHapus
  2. Wah. . Mas ini uda expert banget kayanya. .

    Jago banget main kodenya. . !!

    Jadi pengen bLajar juga. . Hehe. . :P

    Bdw, info tentang drop down menunya bagus banged. . simple N' mudah di aplikasikan. . :)

    Buat masnya kaLo tertarik ngrubah visi & misi hidupnya jadi Lebih baik lagi bisa berkunjung ke Blog saya di : http://www.thesecret-indonesia.co.cc/

    Salam Damai & sukses selalu buat Gubhug Reyot. .

    BalasHapus
  3. koq gak bisa ke bawah mas...piye iki

    BalasHapus
  4. makasi gan
    bnr" expert dach

    mampir k blog ancur pny wa y ::http://trickserver.blogspot.com

    BalasHapus
  5. wach nih gmna kok ada tlisan this is on vidio di blakang link tlong pncerahnya

    BalasHapus

 
GR | Edited by | gubhug reyot