loading...

Dropdown Menu (Navigasi Horizontal) dengan CSS3

Salam persahabatan”,
mungkin seperti itulah salam pembuka atau salam penutup dari sang empu tutorial ini. Anda mungkin kenal, bahkan mungkin juga telah menjadi salah satu sahabatnya dalam GFC.

Dropdown Menu CSS3

Gambar 1. Screenshot dropdown menu horizontal dengan CSS3.

Trik blogger ini mungkin agak berbeda dengan posting aslinya1 (sama caranya), karena menu horizontal di sini tidak menggunakan image & ditambahkan form pencarian — mempercantik search button dengan CSS3 oleh Rudy — di kanannya.

Letakkan kode CSS3 berikut di atas ]></b:skin>.

/*-- NAV --*/
nav {
width:100%;
background:#585858;
font:14px Sans-Serif;
letter-spacing:0.03em;
position:relatif;
overflow:hidden;
border-radius: 2em;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
-webkit-box-shadow: 0 2px 4px rgba(0,0,0, .4);
-moz-box-shadow: 0 2px 4px rgba(0,0,0, .4);
}
/* main level */
#menu-nav{
width:500px;
float:left;
margin:0;
padding: 7px 6px 0;
position:absolute;
}
#menu-nav li {
line-height:1.5em;
float:left;
list-style:none;
margin:0 auto;
padding:0 5px 8px;
position:relatif;
}
#menu-nav a, #menu-nav a:visited {
color:#e7e5e5;
text-decoration:none;
padding:  3px 16px;
border:solid 1px transparent;
display:block;
margin: 0;
-webkit-border-radius: 1.6em;
-moz-border-radius: 1.6em;
text-shadow: 0 1px 1px rgba(0,0,0, .3);
}
#nav a:hover {
background: #000;
color: #fff;
}
/* main level link hover */
#menu-nav a.current, #menu-nav li:hover > a {
background:#E6E6E6;
color:#444444;
text-decoration:none;
border:outset 1px #f2f2f2;
-webkit-box-shadow: 0 1px 1px #585858;
-moz-box-shadow: 0 1px 1px #585858;
box-shadow: 0 1px 1px #585858;
text-shadow: 0 1px 0 rgba(255,255,255, 1);
}
/* sub levels link hover */
#menu-nav ul li:hover a, #menu-nav li:hover li a {
color:#666666;
background:none;
border:none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}
#menu-nav ul a:hover {
background: #0078ff !important;
color: #fafafa !important;
-webkit-border-radius: 0;
-moz-border-radius: 0;
text-shadow: 0 1px 0 #dddddd;
}
/* dropdown */
#menu-nav li:hover > ul {
display: block;
z-index:1;
}
/* level 2 list */
#menu-nav ul {
display: none;
margin: 0;
padding: 0;
width: 180px;
position: absolute;
top: 40px;
left:auto;
background:#f2f2f2;
border: solid 1px #b4b4b4;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3);
-moz-box-shadow: 0 1px 3px rgba(0,0,0, .3);
box-shadow: 0 1px 3px rgba(0,0,0, .3);
}
#menu-nav ul li {
float: none;
margin: 0;
padding: 0;
}
#menu-nav ul a {
text-shadow: 0 1px 0 #fafafa;
}
/* level 3+ list */
#menu-nav ul ul {
left: 90px;
top: auto;
position: absolute;
}
/* rounded corners of first and last link */
#menu-nav ul li:first-child > a {
-webkit-border-top-left-radius: 9px;
-moz-border-radius-topleft: 9px;
-webkit-border-top-right-radius: 9px;
-moz-border-radius-topright: 9px;
}
#menu-nav ul li:last-child > a {
-webkit-border-bottom-left-radius: 9px;
-moz-border-radius-bottomleft: 9px;
-webkit-border-bottom-right-radius: 9px;
-moz-border-radius-bottomright: 9px;
}
/* clearfix */
#menu-nav:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#menu-nav {
display: inline-block;
}
html[xmlns] #menu-nav {
display: block;
}
* html #menu-nav {
height: 1%;
}

/*-- SEARCH --*/
#search {
width: 240px;
float: right;
margin: 0;
padding: 3px 8px; }

.searchform {
display: inline-block;
zoom: 1; /* ie7 hack for display:inline-block */
*display: inline;
border: solid 1px #5e6366;
padding: 3px 5px;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
-webkit-box-shadow: 0 1px 0px rgba(0,0,0,.1);
-moz-box-shadow: 0 1px 0px rgba(0,0,0,.1);
box-shadow: 0 1px 0px rgba(0,0,0,.1);
background: #71787b;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
background: -moz-linear-gradient(top, #fff, #ededed);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie7 */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie8 */
}

.searchform input {
font: normal 12px/100% Arial, Helvetica, sans-serif;
}

.searchform .searchfield {
background: #d5d5d5;
padding: 6px 6px 6px 8px;
width: 180px;
border: solid 1px #bcbbbb;
outline: none;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
}

.searchform .searchbutton {
color: #fff;
border: solid 1px #494949;
font-size: 11px;
height: 27px;
width: 27px;
text-shadow: 0 1px 1px rgba(0,0,0,.6);
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
background: #555;
background: -webkit-gradient(linear, left top, left bottom, from(#9e9e9e), to(#454545));
background: -moz-linear-gradient(top, #9e9e9e, #454545);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie7 */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie8 */
}

Sesuaikan kode yang berwarna merah (width) dengan lebar blog Anda. Kemudian silakan mengganti kode - kode yang berhubungan dengan pewarnaan, baik menggunakan hex triplet (ex: #ff0000), color name (ex: red), RGB {ex: rgb(255, 0, 0)}, atau RGBA {ex: rgba(255, 0, 0, 0.5)}.

Kemudian letakkan kode HTML seperti yang tampak di bawah ini, di sekitar elemen header blog Anda (bisa di atas, di dalam, maupun di bawah elemen header tersebut).

<nav>
<ul id='menu-nav'>
<b:if cond='data:blog.url != "#"'>
<li><a href='#' title='Beranda'>Home</a></li>
<b:else/>
<li><a class='current' href='#' title='Anda sekarang berada di halaman Beranda'>Home</a></li>
</b:if>
<b:if cond='data:blog.url != "#"'>
<li><a href='#' title='Tentang Penulis'>About</a></li>
<b:else/>
<li><a class='current' href='#' title='Anda sekarang berada di halaman Tentang Penulis'>About</a></li>
</b:if>
<li><a href='#'>Untuk Percobaan</a>
    <ul>
    <li><a href='#'>kosong</a></li>
    <li><a href='#'>kosong</a>
        <ul>
        <li><a href='#'>kosong</a>
            <ul>
            <li><a href='#'>kosong</a></li>
            <li><a href='#'>kosong</a></li>
            </ul>
        </li>
        <li><a href='#'>kosong</a></li>
        <li><a href='#'>kosong</a></li>
        <li><a href='#'>kosong</a>
            <ul>
            <li><a href='#'>kosong</a></li>
            <li><a href='#'>kosong</a></li>
            <li><a href='#'>kosong</a></li>
            <li><a href='#'>kosong</a></li>
            </ul>
        </li>
        </ul>
    </li>
    <li><a href='#'>kosong</a></li>
    <li><a href='#'>kosong</a></li>
    </ul>
</li>
<b:if cond='data:blog.url != "#"'>
<li><a href='#' title='Daftar Isi'>Sitemap</a></li>
<b:else/>
<li><a class='current' href='#' title='Anda sekarang berada di halaman Daftar Isi'>Sitemap</a></li>
</b:if>
</ul>

<div id='search'>
<form action='/search' class='searchform' method='get'>
<input class='searchfield' id='q' name='q' type='text' value=''/>
<input class='searchbutton' type='submit' value='Go'/>
</form>
</div>

</nav>

Ganti kode yang diberi tanda ‘kres’ (#) dengan alamat tautan yang Anda tuju (ex: http://optimasi-blog.blogspot.com/2005/05/about-optimasi-blog.html).
Mau lihat tampilannya, klik di sini.

Demo Optimasi Blog


1. Prayitno, Hendro. “Blogger admin” blogspot. CSS3 Tutorial: “Membuat dropdown menu menggunakan css3 dan html5 | simple-35 blogger template(part2)”. April 7, 2011

37 komentar untuk “Dropdown Menu (Navigasi Horizontal) dengan CSS3”

  1. izin coba...
    thanks...

    http://totto-apa-adanya.blogspot.com

    BalasHapus
  2. sep
    keren nehhh

    walau agak oon sama CSS
    gak papa deh dicobak :)

    BalasHapus
  3. wah bsgus e, trims infonya.
    tapi kalo blogspot, di close langsung redirek ke website lain bisa ga ya.?
    kalo bisa, tolong share cara ya.
    trimakasih....

    BalasHapus
  4. thanks mas, ijin copy scriptnya and tes dulu nih. plus modif2 juga.makasih and salam kenal

    BalasHapus
  5. Menarik sekali tutorialnya, silahkan kunjungi saya balik di www.euisryan.co.cc

    BalasHapus
  6. Boleh juga, tapi nunggu saya beli custom domain dulu deh

    BalasHapus
  7. @Rusa Belajar terus Rusa, jangan sampai kalah sama kura-kura...wkwkwkwkwk.....

    BalasHapus
  8. itu letak headernya dimana sih? ga ngerti OWO

    BalasHapus
  9. Keep blogging, smuga berguna ilmunya

    BalasHapus
  10. Happy blogging kawand, smuga menambah persaudaraan

    BalasHapus
  11. Salam kenal ya kawand,,, thxz infonya

    BalasHapus
  12. @Kanji Makurisu:
    Letaknya header dalam HTML, biasanya memiliki markup sebagai berikut, gan.

    <div id='header-wrapper'>

    </div>
    <div id='content-wrapper'>

    Itu kalau agan meletakkannya di blog “Ekspresi Cyber-World™”

    BalasHapus
  13. Markup HTML header :

    <div id='header-wrapper'>

    </div>

    BalasHapus
  14. tambah efek jquery lumayan nih..

    BalasHapus
  15. sedang diterapkan tipsnya, makasih sob :D

    BalasHapus
  16. tipsnya mantap....ngomong-ngomong kalau untuk wordpress bagaimana >?

    BalasHapus
  17. mas, yang ini kok aku coba gak muncul yaa nav menu nyaa,, ?

    BalasHapus
  18. @beautyskin House:
    Pertama mba beuty, keliru meletakkan kode HTML-nya. Untuk peletakkan kode tersebut harus berada di antara <body>…</body>.
    Kedua, dari pengamatan saya (Ctrl + U) pada blog mba. Coba letakkan kode HTML tersebut di atas atau di bawah </header> (mungkin kodenya berada di atas <div class='tabs-outer'>).
    Ketiga, kode HTML yang saya maksud adalah:
    <nav>
    <ul id='menu-nav'>

    …dst…

    </nav>

    BalasHapus
  19. Makasih kawan....minta ijin copas wat di pasang yah sekalian di share ke yang lain....trus satu lagi kawan, kalo mau ngasih border sama ganti warna pakai kode html bisa ga ya? Review http://infotwelve.blogspot.com
    Sekali lagi terimakasih

    BalasHapus
  20. @Priyanto Mariette:
    Kenapa mesti lewat HTML, gan?

    Untuk mengganti warna latar dan border, bisa dikostumisasi melalui CSS, terutama pada tag background dan border.

    Kemudian tinggal dipilih ingin diletakkan pada properti apa, seperti: nav, menu-nav atau ul, li.

    BalasHapus
  21. Saya baru nyobain nih, kok kalo gadgetnya saya letakkan di atas sub menunya ndak mau keluan, kalau di bawah bisa keluar. mohon dibantu ya.. trimakasih

    BalasHapus
  22. @prima rahmadhani: Maaf, gan. Saya kurang mengeti dengan maksud agan. Mungkin ada baiknya jika menyertakan alamat blog agan, sebab profil blognya belum bisa diakses oleh publik. :D

    BalasHapus
  23. di utak atik akhirnya bisa juga, trimakasih ya.. ntar kalo udah jadi saya share alamat blognya

    BalasHapus
  24. gan, tolongin saya dong, susah bgt dri kmaren buat navigasi utk blog saya. alhamdulillah nyoba tutorial dari blog agan berhasil N saya puas bgt gan, saya ucapkan terima kasih bnyak ya gan. tapi da 1 msalah lg gan: search nya gk mau kerja,gk bsa d klik/dmasukkin kata2, jd gmna dong gan. saya mohon pencerahannya y. alamat blog saya: spotfer.blogspot.com

    BalasHapus
  25. o y gan, boleh tukaran link gk? tutorial blog agan bgus2 bgt, salute saya utk agan, seep dah !!

    BalasHapus
  26. Oh gan, maaf gan, dah tau saya masalahnya dmna, dah bisa gan, seneng bgt sya gan, mksih bnyak y, thanks, syukron, namaste, gracias, sukses slalu utk agan y, amin

    BalasHapus
  27. gan, bngung lg ane ni, mklumlh msh newbie, warna font nya gk mau berubah, klo background dah bsa saya bngung koq gk da utk color nya d sni: nav {
    width:100%;
    background:#585858;
    font:14px Sans-Serif;

    mohon pencerahannya y gan

    BalasHapus
  28. he he he . . . dah bsa lg gan, dah tw posisi warna nya, mklum gan, ^_^ htung2 skalian ngeramein

    BalasHapus
  29. Hi, The above articles is very impressive, and I really enjoyed reading your blog and points that you expressed.

    BalasHapus