Membuat Menu Hide Show dengan css

Berikut source code atau codingan menu hide show dengan css ,

<!-- JavaScript|CSS:Core code library snippet 6. -->
<!-- Hide and show a navigation menu. -->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html xmlns="" xml:lang="en" lang="en">
<!-- Code source: -->
<!-- A resource for web developers using XHTML, CSS, JavaScript, PHP -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>View code snippet page</title>
<script language="JavaScript" type="text/javascript">
// function to hide and show a navigation menu
function showHide(aMenu) {
var aMenu = document.getElementById(aMenu); = ( == "block") ? "none" : "block";
<style type="text/css">

.wrapper {width:150px; margin:10px;}

.menuHeader {color: #000099; cursor:pointer; font-weight:bold; border:1px solid #000;}

.menuList {display:none; margin-bottom:10px;}

.menuItem {margin-left:10px; display:block;}



<div class="wrapper">
<div class="menuHeader"
onclick="showHide('menu1')">Menu header 1
<div id="menu1" class="menuList">
<a class="menuItem" href="#">Item 1.1</a>
<a class="menuItem" href="#">Item 1.2</a>
<a class="menuItem" href="#">Item 1.3</a>
<div class="menuHeader"
onclick="showHide('menu2')">Menu header 2
<div id="menu2" class="menuList">
<a class="menuItem" href="#">Item 2.1</a>
<a class="menuItem" href="#">Item 2.2</a>
<a class="menuItem" href="#">Item 2.3</a>


0 Komentar:

Posting Komentar