Drop Down Menu

Membuat Dropdown Menu pada sebuah web sangatlah mudah, banyak tersedia tutorial di internet untuk membuat drop down menu, salah satunya yang sederhana dan simple adalah dropdown menu milik htmldogs atau suckerfish.

Dropdown ini hanya membutuhkan kode CSS dan sedikit JavaScript, berikut langkah-langkah membuat dropdown menu

  1. Buat file CSS, simpan dalam direktori css, misal : css/menu.css
  2. body {
    	font-family: arial, helvetica, serif;
    }
    
    ul { /* all lists */
    	padding: 0;
    	margin: 0;
    	list-style: none;
    }
    
    li { /* all list items */
    	float: left;
    	position: relative;
    	width: 10em;
    }
    
    li ul { /* second-level lists */
    	display: none;
    	position: absolute;
    	top: 1em;
    	left: 0;
    }
    
    li>ul { /* to override top and left in browsers other than IE,
    which will position to the top right of the containing li,
     rather than bottom left */
    	top: auto;
    	left: auto;
    }
    
    li:hover ul, li.over ul { /* lists nested under hovered list items */
    	display: block;
    }
    
    #content {
    	clear: left;
    }
    
    </style>
    
  3. Buat file JavaScript dan simpan dalam direktori js, misal : js/menu.js
  4. startList = function() {
    	if (document.all&&document.getElementById) {
    		navRoot = document.getElementById("nav");
    		for (i=0; i<navRoot.childNodes.length; i++) {
    			node = navRoot.childNodes[i];
    			if (node.nodeName=="LI") {
    				node.onmouseover=function() {
    					this.className+=" over";
    				}
    				node.onmouseout=function() {
    					this.className=this.className.replace(" over", "");
    				}
    			}
    		}
    	}
    }
    
  5. Buat file HTML dengan struktur hirarki menggunakan UnOrder List ( UL)
  6. <head>
    <title>DropDown Menu</title>
    <link href="css/menu.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript" src="js/menu.js"></script>
    <script type="text/javascript" >
       window.onload=startList;
    </script>
    </head>
    <body>
    <ul id="nav">
    
    	<li>Liga Inggris
    		<ul>
    			<li><a href="">Manchester United</a></li>
    			<li><a href="">Tottenham Hotspur</a></li>
    			<li><a href="">Liverpool</a></li>
    			<li><a href="">New Castle United</a></li>
    
    		</ul>
    	</li>
    
    	<li>Liga Spanyol
    		<ul>
    			<li><a href="">Barcelona</a></li>
    			<li><a href="">Real Madrid</a></li>
    			<li><a href="">Valencia</a></li>
    
    		</ul>
    	</li>
    
    	<li>Liga Italia
    		<ul>
    			<li><a href="">Napoli</a></li>
    			<li><a href="">Fiorentina</a></li>
    			<li><a href="">Inter Milan</a></li>
    		</ul>
    	</li>
    
    </ul>
    
    </body>
    

    Jangan lupa untuk menambahkan tag pembuka dan penutup HTML di file ini

Post a Response