Membuat Menu DropDown Menggantung Diatas : Jasa Penerjemah Resmi dan Tersumpah
  I  
Home Home Contact Kontak Sitemap Sitemap

Membuat Menu DropDown Menggantung Diatas

Membuat Menu DropDown Menggantung Diatas

Jasa Legalisasi DokumenMungkin untuk turorial Membuat Menu DropDown Menggantung Diatas sudah banyak tutorialnya, akan tetapi tidak ada salahnya kami team Penerjemah-BTS ikut berperan berbagi tutorial yang pernah kami buat dalam pembuatan menu dropdown....:D

Dalam pembuatan menu dropdown yang sudah beredar di internet, kebanyakan designer menggunakan jQuery untuk mempercantik tampilannya. Disini kami pun sama dengan menggunakan jQuery untuk mempercantik tampilan.

Pertama-tama Anda harus download terlebih dahulu scriptnya disini, dan untuk pemasangannya silahkan ikuti tutorial berikut.

Javascript

Masukan file Javascript dalam kode HTML, dan penempatannya sebelum kode </head>.

            <!--- Masukan File Jquery dan Java Script --->
            <script type="text/javascript" src="directory/jquery-1.4.2.min.js"></script>
            <script type="text/javascript" src="directory/ddsmothmenu.js"></script>
            <script type="text/javascript">
            ddsmoothmenu.init({
				mainmenuid: "smoothmenu1",
				orientation: 'h',
				classname: 'ddsmoothmenu',
				contentsource: "markup"
			})
            </script>
            

Style

Untuk tampilannya, buatlah 1 file CSS dengan nama style-menu.css dan silahkan copy kode berikut dan paste pada file style-menu.css. Untuk penempatan file CSS dalam HTML sama seperti file Javascript (sebelum kode </head>).


/*//// Script CSS ////*/

.ddsmoothmenu{ font: bold 12px Verdana; /*background of menu bar (default state)*/
	width: 100%; background-color: #FFFFFF; }

.ddsmoothmenu ul{ z-index:100; margin: 0; padding: 0; list-style-type: none; }

/*Top level list items*/
.ddsmoothmenu ul li{ position: relative; display: inline; float: left; background-image: url(transparent); height: 40px; border-right: 1px solid #0C71D6; }

/*Top level menu link items style*/
.ddsmoothmenu ul li a{ display: block; padding-top: 13px; padding-right: 22px; padding-left: 22px; }


* html .ddsmoothmenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/

display: inline-block;
}

.ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited{color: #FFF; font-size: 12px; font-weight: bold; font-family: Arial, Helvetica, sans-serif; }

.ddsmoothmenu ul li a.selected{ /*CSS class that's dynamically added to the currently active menu items' LI A element*/
	color: #eef2f6; text-decoration: none; height: 27px; background-color: #024a93; }

.ddsmoothmenu ul li a:hover{ height: 27px; color: #eef2f6; font-weight: bold; text-decoration: none; background-color: #024a93; }
	
/*1st sub level menu*/
.ddsmoothmenu ul li ul{ position: absolute; left: 0; display: none; visibility: hidden; padding: 0px; }

/*Sub level menu list items (undo style from Top level List Items)*/
.ddsmoothmenu ul li ul li{ display: list-item; float: none; height: auto; background-color: #0052a4; border-top: 1px solid #0071E1; border-bottom: 1px solid #004182; border-right: 1px solid #0052a4; border-left: 1px solid #0052a4; margin: 0px; padding: 0px; }

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.ddsmoothmenu ul li ul li ul{
top: 0;
}

/* Sub level menu links style */
.ddsmoothmenu ul li ul li a{ width: 175px; display: block; height: auto; margin: 5px; padding: 5px; text-align: left; }

.ddsmoothmenu ul li ul li a:link, .ddsmoothmenu ul li ul li a:visited{ color: #FFF; font-size: 11px; font-family: Arial, Helvetica, sans-serif; }

.ddsmoothmenu ul li ul li a.selected { text-decoration: none; height: auto; color: #FFF; background-color: #2179d2; }

.ddsmoothmenu ul li ul li a:hover{ color: #FFF; text-decoration: none; height: auto; background-color: #2179d2; }

/* Holly Hack for IE \*/
* html .ddsmoothmenu{height: 1%;} /*Holly Hack for IE7 and below*/


/* ######### CSS classes applied to down and right arrow images  ######### */

.downarrowclass{ position: absolute; top: 17px; right: 8px; }

.rightarrowclass{ position: absolute; top: 6px; right: 5px; }

/* ######### CSS for shadow added to sub menus  ######### */

.ddshadow{ position: absolute; left: 0; top: 0; width: 0; height: 0; background-color: transparent; }

.toplevelshadow{ /*shadow opacity. Doesn't work in IE*/
opacity: 0.1;
}




            

HTML

Untuk pemasangan linknya, silahkan copy kode dibawah ini dan silahkan atur menu baru Anda.

         <div id="smoothmenu1" class="ddsmoothmenu" >
         <ul>
         <li><a href="http://penerjemah-bts.com#" class="selected" title="Home">Home</a></li>
         <li><a href="#" title="Menu " >Menu 1</a>
             <ul>
             <li><a href="#" title="Menu 1a" >Menu 1a</a></li>
             <li><a href="#" title="Menu 1b" >Menu 1b</a>
                 <ul>
                 <li><a href="#" title="Menu 1b 1" >Menu 1b 1</a></li>
                 <li><a href="#" title="Menu 1b 2" >Menu 1b 2</a></li>
                 <li><a href="#" title="Menu 1b 3" >Menu 1b 3</a></li>
                 </ul>
             </li>
             <li><a href="#" title="Menu 1c" >Menu 1c</a></li>
             </ul>
         </li>
         <li><a href="#" title="Menu 2" >Menu 2</a></li>
         <li><a href="#" title="Menu 3" >Menu 3</a></li>
         <li><a href="#" title="Menu 4" >Menu 4</a></li>
         <li><a href="#" title="Menu 5" >Menu 5</a></li>
         <li><a href="#" title="Menu 6" >Menu 6</a></li>
         </ul>
         </div>
            

Demikianlah tutorial Cara Membuat Menu DropDown Menggantung Diatas dengan JQuery dan Javascript DDsmoothmenu. Untuk live demo, silahkan klik link dibawah ini.

Demo

 

 

Ayo berpartisipasi membangun budaya berkomentar yang baik. Kolom komentar tersedia untuk diskusi, berbagi ide dan pengetahuan. Hargai pembaca lain dengan berbahasa yang baik dalam berekspresi. Setialah pada topik. Jangan menyerang atau menebar kebencian terhadap suku, agama, ras, atau golongan tertentu.

iklan
Situs Iklan Elektronik Terbaik Lazada.co.id
Facebook Fan Page