Soesantie: testing

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 :

Click here! Horizontal Tabs Menu

Kode CSS dan Kode HTML CSS Drop Down Menu

<style type="text/css">
.bgsGR_NavHor-1{ 
    background: url(http://i28.tinypic.com/34ta55k/gubhugreyot/images/bgNavHor.jpg) 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://i26.tinypic.com/a09wyb/gubhugreyot/images/bgli.jpg);
    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://i32.tinypic.com/6icfmr/gubhugreyot/images/bgNavAnima.jpg);
    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://i29.tinypic.com/vzihpj/gubhugreyot/images/bgNavROld.jpg) 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://i29.tinypic.com/vzihpj/gubhugreyot/images/bgNavROld.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://i31.tinypic.com/vhwykh/gubhugreyot/images/bgnavHblue.jpg);
    }
.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 «

kadek setzer mengatakan... ....: wah keren banget blognya nih,,masa pasang banner dan link saya disini donk,,dan tentunya saling follow juga ya bang,,, http://pariwisatadanteknologi.blogspot.com/; 20 Juli 2010 07:48
Dicky mengatakan... ....: Wah. . Mas ini uda expert banget kayanya. . Jago banget main kodenya. . !! Jadi pengen bLajar juga. . Hehe. . 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/

| Free Bussines? |

Pages

Soesantie

Ads 468x60px

Labels

Selasa, 31 Mei 2011

testing

0 komentar:

Posting Komentar

kmm

film komplit

Popular Posts

Blog Archive

About Me

Sample text

Followers

cont0oh