Langsung ke konten utama

Cara Membuat Menu Horizontal dengan Dropdown

Cara Membuat Menu Horizontal dengan Dropdown - Support All Browser


Dropdown Menu


Assalammualaikum wr. wb.
Salam sejahtera untuk Sobat blogger semua. Pada kesempatan kali ini saya ingin share sebuah artikel tentang "Cara Membuat Menu Horizontal dengan Dropdown" yang support untuk semua browser. Menu horizontal biasanya digunakan untuk navigasi menu, agar memudahkan pengunjung untuk menemukan yang dia cari di blog kita. Dengan menggunakan menu horizontal ini blog kita akan terlihat lebih profesional.

Langkah-Langkah Cara Membuat Menu Horizontal dengan Dropdown

1.       Masuk ke Dashboard blog Sobat
2.       Pilih menu Template
3.       Kemudian klik menu Edit HTML
4.       Beri tanda centang Expand Widget Templates
5.       Salin kode dibawah ini, diatas kode ]]></b:skin>
.jqueryslidemenu{
font: bold 12px Trebuchet MS; background: #414141; width: 100%;}
.jqueryslidemenu ul{
margin: 0; padding: 0; list-style-type: none;}
/*Top level list items*/
.jqueryslidemenu ul li{
position: relative; display: inline; float: left;}
/*Top level menu link items style*/
.jqueryslidemenu ul li a{
display: block;
background: #414141; /*background of tabs (default state)*/
color: white;
padding: 8px 10px;
border-right: 1px solid #151515;
color: #2d2b2b;
text-decoration: none;}
* html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;}
.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
color: white;}
.jqueryslidemenu ul li a:hover{
background: #DF0101; /*tab link background during hover state*/
color: white;}
/*1st sub level menu*/
.jqueryslidemenu ul li ul{
position: absolute;
left: 0; display: block; visibility: hidden;}
/*Sub level menu list items (undo style from Top level List Items)*/
.jqueryslidemenu ul li ul li{
display: list-item; float: none;}
/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.jqueryslidemenu ul li ul li ul{top: 0;}
/* Sub level menu links style */
.jqueryslidemenu ul li ul li a{
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;}
.jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/
background: #eff9ff;color: black;}
/* CSS classes applied to down and right arrow images */
.downarrowclass{
position: absolute; top: 12px; right: 7px;}
.rightarrowclass{
position: absolute; top: 6px; right: 5px;}
6.       Copy kode berikut dan pastekan di atas kode </head>
<!--[if lte IE 7]>
<style type="text/css">
html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->
<script src='http://mastergomaster.googlecode.com/files/jquery.js' type='text/javascript'/>
<script src=' http://emoticmastergomaster.googlecode.com/files/jquery_slide.js ' type='text/javascript'/>
7.       Salin kode dibawah ini, dan letakan dibawah kode <body>
    <div class='jqueryslidemenu' id='myslidemenu'>
    <ul>
    <li><a href='/'>Home</a></li>
    <li><a href='#'>Menu1</a></li>
    <li><a href='#'>Menu2</a></li>
    <li><a href='#'>Menu3</a></li>
    <li><a href='#'>Menu4</a>
    <ul>
    <li><a href='#'>Sub Menu4</a></li>
    <li><a href='#'> Sub Menu4</a></li>
    <li><a href='#'> Sub Menu4</a></li>
    </ul>
    </li>
    <li><a href='#'>Menu5</a>
    <ul>
    <li><a href='#'>Sub Menu5</a></li>
    <li><a href='#'>Sub Menu5</a>
    <ul>
    <li><a href='#'>1</a></li>
    <li><a href='#'>2</a></li>
    <li><a href='#'>3</a>
    <ul>
    <li><a href='#'>1</a></li>
    <li><a href='#'>2</a></li>
    <li><a href='#'>3</a></li>
    <li><a href='#'>4</a></li>
    </ul>
    </li>
    <li><a href='#'>4</a></li>
    </ul>
    </li>
    </ul>
    </li>
    <li><a href='#'>Menu6</a></li>
    <li><a href='#'>Menu7</a></li>
    <li><a href='#'>Menu8</a></li>
    <li><a href='#'>Menu9</a></li>
    <li><a href='#'>Menu10</a></li>
    <li><a href='#'>Menu11</a></li>
    </ul>
    <br style="clear: left" />
    </div>
8.       Gantilah kata/kode yang harus diganti, saya kira mudah di pahami.
*(# adalah url/link, Menu 1 dst, Submenu 1 dst, 1, 2, 3, dst adalah tulisan url/link).
9.       Langkah terakhir adalah menekan tombol Save.

Ok, hanya ini yang dapat saya sampaikan tentang "Cara Membuat Menu Horizontal dengan Dropdown", mohon maaf atas segala kekurangannya.

Wassalammualaikum wr. wb.

.: Semoga Bermanfaat :.

Komentar

Postingan populer dari blog ini

Harga Nokia Asha 308 Dual SIM

Nokia Asha 308 dalam spesifikasinya ternyata memiliki dua slot kartu GSM dalam bentuk yang mini. Hp yang masuk dalam kategori hp pintar Nokia ini juga dilengkapi dengan layar anti gores sehingga aman digunakan meskipun anda tidak memasang screenguard. Dengan harga sembilan ratusan sayangnya hp ini belum dilengkapi dengan fitur 3G atau HSDPA untuk koneksi internetnya, sehingga Gprs dan Edge masih menjadi andalannya. Spesifikasi Nokia Asha 308 Lanjutkan Baca »

[ROMs] Stock Rom HELLO KITTY Samsung Galaxy Y

  Assalamualaikum, Tengah hari ni MK nk share benda yang agak menarik minat kaum HAWA sikit.. Hahaha.. Stock rom ni dah lama dah release, mungkin dah ramai yang tahu pasal rom ni, Tp bagi yang xtahu, hah ni dia MK nak bagi tahu.. Tu dia, stock rom hello kitty, pinky pinky gitu mak.. Stock rom ni base dari  DLLD5 (Datang dari mane x taw ni).. Korang semua jangan risau ok, stock rom ni xde bug atau force close, sebab ia adalah stock original tapi yang membezakan dia je adalah THEME, SystemUI, FRAMEWOR K, Icon dll.. MK garenti la GF, Adik,Kakak,Mak korang suka kalo guna stock rom ni..     Feature : Hello kitty animated bootanimation Hello kitty boot sound Hello kitty shutdown animation   FILE DAN TOOL YANG DI PERLUKAN : Hello Kitty Stock Rom ( MIRRROR : Download ) Odin Driver (Kalo korang dah ade samsung KIES, xyah la download Driver ni ye) USB Cable PC/Laptop Samsung Galaxy Y GT-S5360 Prepa

Lenovo IdeaTab K2010/K2 Tablet Terbaik Bisnis Mobile

spesifikasi Lenovo IdeaTab K2010/K2 | review | Android terbaik | games | terbaik 2012 Spesifikasi Lenovo IdeaTab K2010 sebagai predikat tablet terbaik untuk bisnis, didukung kualitas dan kekuatan yang handal di sektor konektivitas dan memory. Fitur tablet android Lenovo IdeaTab K2010 yang sudah di kenal untuk pebisnis sebagai satu laptop terbaik di jajaran eksekutif, dibangun dengan teknologi dan kekuatan prosesor Quad Core Tegra 3 @ 1.7GHz dan RAM 2GB. Keunggulan Lenovo IdeaTab K2010 sudah dilengkapi fasilitas keyboard dock dan beberapa slot di samping, seperti SD card reader, USB, slot SIM card, MicroUSB, HDMI, dan jack earphone 3,5mm. Desain : Mengusung spesifikasi dan fasilitas terbaik, tablet android Lenovo IdeaTab K2010 dibekali dengan memori internal yang dapat disesuaikan untuk kebutuhan pengguna. Paket penjualan tablet terbaik Lenovo IdeaTab K2010 datang dengan pilihan memory 32 dan 64GB, memiliki diagonal layar 10.1 inci dengan resolusi 1920×1200 px, kemampuan resolusi ti